SVG in React-Komponente Konverter

Fügen Sie ein beliebiges SVG ein oder laden Sie es hoch und erhalten Sie eine saubere React-Komponente zurück – mit camelCase-Attributen, einem Props-Spread auf dem Root-Element und optionaler TypeScript-Signatur. Kostenlos, privat und sofort.

SVG hier ablegen oder klicken zum Hochladen

Akzeptiert .svg-Dateien oder SVG-Code unten einfügen

Oder SVG-Code einfügen

Warum SVG hier in React konvertieren

Sauberes camelCase-JSX

Jedes SVG-Attribut wird für React umbenannt: class wird zu className, stroke-width zu strokeWidth und clip-path zu clipPath – die Komponente kompiliert ohne Warnungen.

Inline-Styles als Objekte

Ein style-Attribut wie fill:red;stroke-width:2 wird zu einem korrekten React-Style-Objekt mit camelCase-Keys und großgeschriebenen Vendor-Präfixen, statt eines Strings, den React ablehnt.

Props-Spread auf dem Root-Element

Das Root-SVG erhält nach seinen eigenen Attributen einen {...props}-Spread, sodass Verwender className, width, height oder onClick übergeben und die Standardwerte überschreiben können.

TypeScript oder JavaScript

Mit einem Toggle eine typisierte Komponente mit React.SVGProps<SVGSVGElement> ausgeben oder bei reinem JavaScript bleiben. Den Komponentennamen beliebig wählen.

Namespaced Attribute repariert

xlink:href wird zu xlinkHref und xml:space zu xmlSpace, während data-*- und aria-*-Attribute unberührt bleiben – Verläufe, Masken und Barrierefreiheit funktionieren weiterhin.

100 % Privat und kostenlos

Die Konvertierung läuft vollständig im Browser über den eingebauten Parser. Ihr SVG wird nie hochgeladen, es gibt keine Anmeldung und keine Limits.

So wandeln Sie SVG in eine React-Komponente um

SVG hinzufügen

Ziehen Sie eine .svg-Datei per Drag & Drop, klicken Sie zum Durchsuchen oder fügen Sie Ihr SVG-Markup in das Feld ein.

Optionen festlegen

Benennen Sie Ihre Komponente, aktivieren Sie TypeScript für eine typisierte Signatur und entscheiden Sie, ob Props auf das Root-SVG-Element gespreadet werden sollen.

Sauberes JSX erhalten

Der Konverter benennt class in className um, schreibt alle Attribute in camelCase, wandelt Inline-Styles in ein Style-Objekt um und repariert namespaced Attribute wie xlink:href.

Kopieren und einfügen

Klicken Sie auf Kopieren und fügen Sie die Komponente direkt in Ihr React-, Next.js- oder TypeScript-Projekt ein. Kein Build-Schritt, keine Abhängigkeit.

Wählen Sie das richtige Tool

Warum diese Seite existiert

Use the SVG to React converter when you need a vector as a real component, not a static asset. It camelCases every attribute, turns inline styles into a style object, spreads props on the root, and can emit TypeScript.

Am besten für

Turning Figma, Illustrator, or Inkscape icons into JSX components
Building an icon set where each SVG accepts className, size, and color props
Inlining a logo as a component instead of an img tag or background

SVG-zu-React FAQ

Fügen Sie Ihren SVG-Code ein oder laden Sie eine .svg-Datei hoch, und das Tool gibt eine einsatzbereite React-Komponente zurück. Es benennt Attribute in camelCase um, wandelt Inline-Styles in ein Style-Objekt um, spreadet Props auf dem Root-Element und ermöglicht Komponentennamen sowie TypeScript-Umschalten. Kopieren Sie die Ausgabe in Ihr Projekt und importieren Sie sie wie jede andere Komponente.

JSX ist kein HTML. React erwartet className statt class, camelCase-Attribute wie strokeWidth statt stroke-width und ein Style-Objekt statt eines Style-Strings. Ein rohes SVG in JSX eingefügt wirft in der Regel Fehler oder rendert gar nichts – genau das behebt dieser Konverter für Sie.

Ja. Aktivieren Sie den TypeScript-Toggle und die Komponente wird mit props: React.SVGProps<SVGSVGElement> und einem React-Import typisiert, sodass sie direkt in eine .tsx-Datei eingefügt werden kann. Lassen Sie ihn deaktiviert für JavaScript-Ausgabe.

Mit aktiviertem Spread endet das Root-SVG mit {...props}, nach seinen eigenen Attributen. Das ermöglicht es jedem, der Ihre Komponente verwendet, className, width, height, fill oder Event-Handler zu übergeben und die Standardwerte zu überschreiben – so funktionieren die meisten Icon-Bibliotheken.

Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser über den nativen SVG-Parser. Es wird nichts übertragen, sodass das Tool sicher für private Markenassets und proprietäre Icons ist.