SVG in React JSX Konverter
Konvertieren Sie SVG-Vektorgrafiken in einbaufertige React JSX-Komponenten mit Props-Spreading
Wandelt XML-Attribute von SVGs in React-konformes JSX (camelCase) um.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Fügen Sie den SVG-Code ein.
- Geben Sie den Namen der React-Komponente ein.
- Klicken Sie auf Konvertieren und speichern Sie den Code.
FAQ
- Kann man die Farben nachträglich steuern?
- Ja, durch {...props} können Sie z. B. fill='currentColor' oder classNames von außen übergeben.
- Werden ursprüngliche HTML-Attributnamen wie class oder stroke-width automatisch in React-Syntax wie className oder strokeWidth umgewandelt?
- Ja — bei der Umwandlung wird class zu className, und Bindestrich-Attribute wie stroke-width oder fill-rule werden automatisch, wie von JSX gefordert, in camelCase (strokeWidth, fillRule) umgewandelt. Auch als String geschriebene Inline-Stile wie style="color:red" werden in Objekt-Syntax ({ color: 'red' }) umgewandelt, sodass das Ergebnis ohne weitere Anpassungen direkt eingefügt und verwendet werden kann.
- Werden ursprüngliche HTML-Attributnamen wie class oder stroke-width automatisch in React-Syntax wie className oder strokeWidth umgewandelt?
- Ja — bei der Umwandlung wird class zu className, und Bindestrich-Attribute wie stroke-width oder fill-rule werden automatisch, wie von JSX gefordert, in camelCase (strokeWidth, fillRule) umgewandelt. Auch als String geschriebene Inline-Stile wie style="color:red" werden in Objekt-Syntax ({ color: 'red' }) umgewandelt, sodass das Ergebnis ohne weitere Anpassungen direkt eingefügt und verwendet werden kann.