SVG in React-Komponente umwandeln

Nein. Die Umwandlung läuft vollständig in deinem Browser. Die Datei verlässt dein Gerät nicht – es gibt keinen Server, der sie sehen könnte. Sobald die Seite geladen ist, funktioniert das Werkzeug sogar offline.

Speichere die Datei neben deinem Code und importiere sie: import MyIcon from "./MyIcon"; Alles, was du der Komponente übergibst, landet auf dem <svg>-Element, sodass <MyIcon className="h-6 w-6" aria-hidden="true" /> wie erwartet funktioniert. Die Komponente heisst wie die Datei, in PascalCase.

Attribute werden in ihre JSX-Form umbenannt (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), Inline-Styles werden zu Style-Objekten, und XML-Prolog, Kommentare und DOCTYPE entfallen. Ausser du schaltest «Zuerst optimieren» aus, läuft das SVG zusätzlich durch denselben Optimierer wie «SVG optimieren», was den Code spürbar verkürzt.

Skripte, Event-Handler, externe Bilder und Stylesheets werden entfernt, bevor die Komponente erzeugt wird – du lieferst nie versehentlich fremden Code aus.

Standardmässig erhältst du eine .tsx-Datei, deren Props als SVGProps<SVGSVGElement> typisiert sind. Schalte «TypeScript» aus für eine reine .jsx-Datei ohne Typen.