EntwicklerMaxProcessado no seu navegador

SVG-zu-React-Konverter

Fügen Sie Ihren schmutzigen SVG-Code ein und erhalten Sie eine optimierte React-Komponente, die für das moderne Web bereit und formatiert ist.

Nur noch 1 Nutzung heute. Upgrade auf Pro für erweiterte Nutzung (Fair-Use-Richtlinie).

Upgrade

Ausgabe

Ziel

web

Format

TSX

Status

Keine Grundlage

Konvertierung konfigurieren

Quell-SVG

SVG hochladen

Klicken Sie, um eine .svg-Datei zu laden

Komponente

Format

SVG

Komponenten-Optionen

Parität und Reihenfolge

Props

Ziel und Export

Ziel

Export

Ausgabe

Generierte Komponente

Farbe

Struktur

Lesbarkeit

Geben Sie das SVG ein.

Geben Sie ein SVG ein, um die Komponente zu generieren

Fügen Sie den Code ein oder laden Sie eine .svg-Datei hoch

Betrieb

Vorschau und Verwendung

Web

Vorschau

Laden Sie ein gültiges SVG hoch.

Snippet

Geben Sie die Werte ein.

§ So verwenden

So konvertieren Sie SVG in eine React-Komponente

Verwandeln Sie rohes SVG-Markup in eine saubere, typisierte React-Komponente — sofort, in Ihrem Browser.

SVG einfügen
Fügen Sie das SVG-Markup ein oder legen Sie eine .svg-Datei ab.
Optionen einstellen
Wählen Sie TypeScript oder JSX, den Komponentennamen und ob Props/Refs weitergereicht werden.
Komponente kopieren
Attribute werden automatisch in camelCase umgewandelt. Kopieren Sie die einsatzbereite Komponente in Ihr Projekt.

Verwandte

SVG-zu-React-Konverter