Über dieses Tool
Das Tool SVG zu JSX-Komponente konvertiert rohes SVG-Markup in eine saubere React-Komponente, so wie es SVGR tut, aber vollständig in Ihrem Browser ohne Hochladen. Fügen Sie ein aus einem Design-Tool exportiertes Icon ein und erhalten Sie eine Komponente, die Sie importieren und stylen können. Es parst das SVG mit DOMParser und meldet einen klaren Fehler, wenn das Markup fehlerhaft ist.
Jedes SVG-Attribut mit Bindestrich oder Namespace wird in seinen React-Namen in camelCase gesetzt — stroke-width zu strokeWidth, fill-rule zu fillRule, clip-path zu clipPath, stop-color zu stopColor, xlink:href zu xlinkHref, xmlns:xlink zu xmlnsXlink — während data-*- und aria-*-Attribute unverändert bleiben. Inline-Style-Strings werden zu Style-Objekten, leere Elemente wie path und circle werden selbstgeschlossen, und Props werden auf die Wurzel <svg {...props}> gespreadet, sodass die Komponente konfigurierbar bleibt. Optionale Umschalter lassen Sie fest kodierte fill- und stroke-Werte durch currentColor ersetzen (sodass das Icon die Textfarbe erbt), width und height entfernen, damit es sich an seinen Container skaliert, und die Komponente mit forwardRef umhüllen, um den zugrunde liegenden <svg>-Knoten offenzulegen.
Wählen Sie JavaScript- oder TypeScript-Ausgabe: Die TypeScript-Variante typisiert Props als React.SVGProps<SVGSVGElement> und verwendet mit aktiviertem forwardRef forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Die Komponente wird als exportierte Arrow-Function ausgegeben (export const Icon = (props) => (...)), mit Ihrem gewählten Namen und Einrückung, bereit zum Einfügen in ein Icon-Modul.