SVG zu JSX/React Konverter

Konvertieren Sie SVG online in JSX-React-Komponenten. Wandelt SVG-Attribute in camelCase um, verpackt als React-Komponente. Kostenlos und sofort.

Component:

Wrap as Component

SVG

JSX / React

Über die SVG-zu-JSX-Konvertierung

Die Verwendung von SVG-Icons und -Grafiken in React erfordert die Konvertierung von SVG-Attributen in JSX-kompatible Syntax. Dieses Tool verarbeitet alle diese Transformationen automatisch und kann SVG in eine React-Komponente mit Export-Anweisung einhüllen.

𝕏 Twitter in LinkedIn

Bewerten Sie dieses Tool

4.8 / 5 · 55 Bewertungen

Weitere Werkzeuge

JSXHTML zu JSX TWCSS zu Tailwind 🖼️Bild-Base64-Konverter JSJS/HTML Formatierer

Bleiben Sie informiert

Wöchentliche Dev-Tipps und neue Tools.

Kein Spam. Jederzeit abbestellbar.

Enjoy these free tools?

☕Buy Me a Coffee

Anleitung

SVG-Markup in das Eingabefeld einfügen
Komponentenname festlegen und Verpackungsoptionen umschalten
Konvertieren klicken, um JSX-kompatibles SVG zu generieren
Ergebnis in React-Komponentendatei kopieren

Typische Anwendungsfälle

SVG-Icons aus Figma oder Illustrator in React-Komponenten konvertieren
Icon-Bibliothek mit wiederverwendbaren React-SVG-Komponenten aufbauen
SVG-Assets aus statischem HTML nach React migrieren
Inline-SVGs für React-Rendering optimieren

Häufig gestellte Fragen

Welche SVG-Attribute werden konvertiert?

Alle kebab-case SVG-Attribute werden in camelCase konvertiert: stroke-width → strokeWidth, fill-opacity → fillOpacity usw.

Kann man SVG als React-Komponente verpacken?

Ja. Aktivieren Sie die Option 'Als Komponente verpacken', um eine vollständige React-Komponente mit Export zu generieren.

Warum xmlns in React entfernen?

Das xmlns-Attribut wird nur für eigenständige SVG-Dateien benötigt. In JSX/React ist es unnötig.

Werden Inline-Styles unterstützt?

Ja. Inline-Style-Strings werden in JavaScript-Style-Objekte mit camelCase-Eigenschaften konvertiert.