SVG in JSX umwandeln

Wandelt rohes SVG-Markup in eine sofort einfügbare React-Komponente um. Er schreibt SVG-Attribute in React-kompatible camelCase-Props um (class zu className, stroke-width zu strokeWidth, xlink:href zu xlinkHref und viele weitere), konvertiert Inline-Style-Strings in React-Style-Objekte, schließt Void- und SVG-Shape-Elemente selbstschließend und entfernt den Standard-Namespace xmlns="http://www.w3.org/2000/svg".

1. Füge dein SVG-Markup (muss <svg> und </svg> enthalten) in das Eingabefeld ein 2. Klicke auf Prettify, um das Markup vor der Konvertierung automatisch einzurücken (optional) 3. Lege einen Komponentennamen fest (Standard ist SvgComponent, nur alphanumerische Zeichen und Unterstrich) 4. Aktiviere bei Bedarf die "use client"-Direktive und/oder den useMemo-Hook 5. Klicke auf Convert, um die JSX-Komponente zu erzeugen und in die Zwischenablage zu kopieren

Das Feld Komponentenname steuert den exportierten Bezeichner. Wenn das Kontrollkästchen "use client" aktiviert ist, beginnt die Ausgabe mit "use client" in einer eigenen Zeile und wird als Standardexport ohne Props exportiert; andernfalls wird sie als benanntes const exportiert, das Props akzeptiert und svg zurückgibt. Wenn useMemo aktiviert ist, wird das SVG-Markup in useMemo(() => (...), []) eingeschlossen. Die Eingabe muss sowohl <svg als auch </svg> enthalten, sonst wird sie mit einer ungültig-SVG-Fehlermeldung abgelehnt.