SVG zu Komponente
Jedes SVG in eine produktionsreife React- oder Vue-Komponente umwandeln – mit Size-Prop, JSX-Attributen und ohne Abhängigkeiten.
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.
Häufig gestellte Fragen
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: <MyIcon size={32} /> oder <MyIcon size={16} />.
Kann ich die React-Komponente mit benutzerdefinierten SVG-Attributen verwenden?
Ja. Die React-Komponente erweitert React.SVGProps<SVGSVGElement>, sodass Sie jedes gültige SVG-Attribut als Prop übergeben können: fill, stroke, className, aria-label usw. Die {...props}-Ausbreitung auf dem Root-<svg> leitet sie alle weiter.
Was passiert mit SVG-Elementen ohne Kinder, wie <path>?
Häufige leere SVG-Elemente (path, circle, rect, ellipse, line, stop und andere), die in der Quelle als <elem></elem> erscheinen, werden automatisch in die selbstschließende <elem />-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.