Util Monster
Kostenlos
Füge SVG-Markup ein, um es in JSX umzuwandeln, das du direkt in eine React-Komponente einsetzen kannst. Attribute werden in camelCase umgeschrieben (class→className), der style-String wird in ein Objekt umgewandelt, und Kommentare sowie DOCTYPE werden entfernt.
Die Syntax von React (JSX) unterscheidet sich leicht von HTML/SVG. Mit Bindestrich geschriebene Attribute (stroke-width) müssen in camelCase umgeschrieben werden (strokeWidth), class wird zu className, und style muss ein JavaScript-Objekt statt eines Strings sein. Dieses Tool übernimmt diese Unterschiede automatisch, sodass sich ein von einem Designer exportiertes SVG-Icon direkt in eine React-Komponente einfügen lässt.
Es ordnet class→className und for→htmlFor zu, wandelt Attribute mit Bindestrichen wie stroke-width und fill-opacity in camelCase um, konvertiert Namespaced-Attribute wie xlink:href zu xlinkHref und lässt data-/aria-Attribute unverändert. style="fill:red;stroke-linecap:round" wird zu dem Objekt style={{ fill: 'red', strokeLinecap: 'round' }}, während Kommentare, DOCTYPE und die XML-Deklaration entfernt werden.
Statt per Regex parst dieses Tool das SVG tatsächlich mit dem im Browser integrierten DOMParser und serialisiert es anschließend neu, sodass verschachtelte Strukturen und Attribute korrekt behandelt werden. Alles läuft in deinem Browser, und der Code wird nie an einen Server gesendet. Nachdem du das Ergebnis in eine Komponente eingefügt hast, kannst du es bei Bedarf anpassen - z. B. width/height in Props auslagern oder fill auf "currentColor" umstellen.