SVG zu React-Komponente
SVG einfügen, fertige JSX- oder TSX-Komponente zum Importieren erhalten.
oder Datei ablegen / Code unten einfügen
React-Komponente
Die Ausgabe erscheint hier
So funktioniert es
- 1Füge SVG-Code ein oder lege eine .svg-Datei ab.
- 2Schalte die TypeScript-Ausgabe um und lege den Komponentennamen fest.
- 3Kopiere die erzeugte Komponente in deine Codebasis.
Kostenlos, ohne Registrierung, ohne Wasserzeichen — alles läuft lokal in deinem Browser, deine Dateien verlassen also nie deinen Rechner.
Häufige Fragen
Was genau wird umgewandelt?
Attribute werden zu camelCase (stroke-width → strokeWidth), class wird zu className, und die übrigen Props werden an das Wurzelelement weitergereicht, damit du Größe und Farbe übergeben kannst.
Soll ich das SVG vorher optimieren?
Ja — schick es zuerst durch den SVG-Optimierer, dann wird die Komponente kleiner und sauberer. Die beiden Werkzeuge liegen einen Klick auseinander.