Welche SVG-Attributnamen werden für React konvertiert?

Alle mit Bindestrich versehenen SVG-Attribute werden in camelCase umgewandelt: stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap usw. Die Sonderfälle class → className und xlink:href → href werden ebenfalls behandelt.

Warum werden bei der Vue-Ausgabe keine Attributnamen konvertiert?

Vue-Templates unterstützen kebab-case-Attributnamen auf SVG-Elementen nativ – Browser und Vues Compiler verarbeiten stroke-width korrekt. Keine Konvertierung erforderlich, was die Vue-Ausgabe näher am originalen SVG hält.

Was bewirkt die Size-Prop?

Die generierte Komponente ersetzt die festen width- und height-Werte des SVGs durch eine Size-Prop (Standard 24). So können Sie die Komponente in jeder Größe verwenden: oder .

Kann ich die React-Komponente mit benutzerdefinierten SVG-Attributen verwenden?

Ja. Die React-Komponente erweitert React.SVGProps , sodass Sie jedes gültige SVG-Attribut als Prop übergeben können: fill, stroke, className, aria-label usw. Die {...props}-Ausbreitung auf dem Root- leitet sie alle weiter.

Was passiert mit SVG-Elementen ohne Kinder, wie ?

Häufige leere SVG-Elemente (path, circle, rect, ellipse, line, stop und andere), die in der Quelle als erscheinen, werden automatisch in die selbstschließende -Form konvertiert, die JSX erfordert.

Unterstützt dieses Tool mehrfarbige oder komplexe SVGs?

Ja – der Konverter verarbeitet alle Elemente und Attribute im SVG, nicht nur einfache Einzelpfad-Icons. Verläufe, Filter, Masken und Gruppen bleiben alle erhalten. Die Ausgabe ist das vollständige SVG als Komponente, keine vereinfachte Version.

SVG zu Komponente

Jedes SVG in eine produktionsreife React- oder Vue-Komponente umwandeln – mit Size-Prop, JSX-Attributen und ohne Abhängigkeiten.

Komponentenname

Framework

Input

Komponentenausgabe

SVG-Code einfügen oder eine .svg-Datei ablegen, um eine Komponente zu generieren.

SVG sofort in React- oder Vue-Komponenten konvertieren

Ein SVG in eine React- oder Vue-Codebasis einzufügen bedeutet, Attribute manuell umzubenennen, eine Size-Prop hinzuzufügen und XML-Präambeln zu bereinigen. Zolkits SVG-zu-Komponente-Konverter erledigt das alles automatisch – fügen Sie Ihr SVG ein und erhalten Sie in Sekunden eine saubere, typisierte Komponente.

Korrekte JSX-Attribute

Konvertiert SVG-Attributnamen automatisch in ihre JSX-Entsprechungen: stroke-width → strokeWidth, fill-rule → fillRule, class → className und mehr.

Sofortige Konvertierung

Ergebnisse aktualisieren sich während der Eingabe. Reines JavaScript – kein Server-Roundtrip, keine schweren Bibliotheken, kein WASM. Schnelle Browser-Verarbeitung.

React & Vue Unterstützung

Typisierte React-Funktionskomponente mit SVGProps generieren oder eine Vue SFC mit einem Composition-API-Script-Setup-Block. Mit einem Klick zwischen Frameworks wechseln.

100 % Privat

Ihr SVG-Code verlässt Ihren Browser nie. Alles wird im Arbeitsspeicher konvertiert, ohne Server, ohne Logging und ohne Datenerfassung.

Für immer kostenlos

Kein Konto erforderlich, keine Nutzungslimits, keine Bezahlschranken. SVG einfügen, Komponente kopieren, fertig.

Size-Prop integriert

Jede generierte Komponente akzeptiert eine Size-Prop (Standard 24), die sowohl Breite als auch Höhe steuert, sodass sie in jedem Maßstab Ihres Design-Systems einsetzbar ist.

So konvertieren Sie SVG in eine Komponente

1
Fügen Sie Ihren SVG-Code in das Eingabepanel ein oder ziehen Sie eine .svg-Datei darauf.
2
Geben Sie einen Komponentennamen ein und wählen Sie Ihr Ziel-Framework – React (TSX) oder Vue (SFC).
3
Kopieren Sie den generierten Komponentencode oder klicken Sie auf „Herunterladen”, um ihn als .tsx- oder .vue-Datei zu speichern.