Was macht der SVG-zu-Komponente-Konverter?

Er wandelt ein rohes SVG in eine wiederverwendbare React- (JSX/TSX) oder Vue-3-Komponente um. Neben dem Einbetten des SVG in die Komponente bereinigt er den Code und passt die Attribute an das korrekte Format des jeweiligen Frameworks an.

Wie funktioniert die React-Konvertierung?

In React werden Attribute in camelCase konvertiert (z. B. wird aus stroke-width strokeWidth), aus class wird className und aus dem String-Style ein Objekt. Das SVG wird in eine funktionale Komponente eingebettet, die die Props an das svg-Element weitergibt — ideal für Icon-Systeme.

Und die Vue-3-Konvertierung?

In Vue 3 wird das SVG in einen template-Block innerhalb eines Single File Components mit script setup (lang ts) gesetzt. Die Attribute bleiben im HTML-Format (kebab-case) und die Komponente leitet die Attribute automatisch an das Wurzelelement weiter.

Wofür ist die Option currentColor?

Sie ersetzt feste fill- und stroke-Farben durch currentColor, sodass das Icon die Textfarbe (die CSS-Eigenschaft color) erbt. In Icon-Systemen ist das essenziell, da man das Icon allein durch Ändern der Farbe des übergeordneten Elements umfärben kann.

Unterstützt die generierte Komponente TypeScript?

Ja. Wähle React (TSX), um eine typisierte Komponente mit SVGProps zu generieren, oder Vue 3, das script setup (lang ts) verwendet. Beide funktionieren ohne Anpassungen in TypeScript-Projekten.

Wird mein SVG an einen Server gesendet?

Nein. Die gesamte Konvertierung erfolgt lokal in deinem Browser per JavaScript. Kein SVG oder Code wird an ToolboxHub-Server gesendet.

Kostenloser Online SVG-zu-React- & Vue-Komponente-Konverter

Über den SVG-zu-Komponente-Konverter

Füge ein rohes SVG ein und erhalte eine fertige Komponente in React (JSX oder TSX) oder Vue 3. Das Tool bereinigt den Code, konvertiert die Attribute in das Format des jeweiligen Frameworks (camelCase und className in JSX), kann Farben durch currentColor ersetzen und die Dimensionen entfernen, damit das Icon per CSS skaliert. Ideal für interne Icon-Systeme. Alles läuft lokal in deinem Browser. Zum Verkleinern des Codes nutze unseren Minifier.

In 3 Schritten konvertieren

Füge den SVG-Code in das Eingabefeld ein.
Wähle das Framework (React JSX/TSX oder Vue 3) und den Namen der Komponente.
Klicke auf Konvertieren und kopiere oder lade die Komponente herunter.

SVG-zu-Komponente-Konverter