Ein SVG in eine React-Komponente (JSX) umwandeln
Verwandle ein SVG in eine einsatzbereite React/JSX-Komponente (camelCase-Attribute, eigener Name).
The SVG receives {...props}: you can pass className, width, style, etc. Attributes are converted to camelCase for React.
🔒 100 % clientseitig — keine Daten gesendet
Wandeln Sie jedes SVG in eine wiederverwendbare React-Komponente um: Attribute werden in camelCase umgewandelt (stroke-width → strokeWidth), der Komponentenname ist anpassbar und {...props} wird hinzugefügt. Alles wird lokal generiert.
What is it for?
- ▸ Eine React-Icon-Komponente aus einem SVG erstellen
- ▸ Ein Piktogramm in eine Komponentenbibliothek einfügen
- ▸ Ein SVG per Props stylebar machen (className, Farbe)
- ▸ Einen Stapel exportierter Icons konvertieren
FAQ
Warum {...props} hinzufügen?
Damit Sie className, width, height, style oder Event-Handler von außerhalb der Komponente an das SVG übergeben können.
Bleiben Tags wie linearGradient erhalten?
Ja, die Groß-/Kleinschreibung der SVG-Elemente (linearGradient, clipPath…) bleibt erhalten, wie React es verlangt.
Kann ich die Farbe später ändern?
Ja, wenn das SVG currentColor verwendet, folgt die Farbe der CSS-Eigenschaft color der übergeordneten Komponente.
Ist es TypeScript-kompatibel?
Die Ausgabe ist einfaches JSX; für TypeScript fügen Sie einen Props-Typ hinzu, z. B. (props: React.SVGProps<SVGSVGElement>).