Jeder Entwickler, der jemals rohe SVG in ein React-Projekt eingefügt hat, kennt diese Probleme aus eigener Erfahrung.
Roh-SVG verwendet Attribute mit Bindestrichen wie clip-rule, fill-opacity und stroke-linecap. React erwartet camelCase — clipRule, fillOpacity, strokeLinecap. Fehlt auch nur eines, entsteht ein Laufzeitfehler oder ein stiller Stil-Bug.
Figma und Sketch exportieren SVGs mit eingebetteten fill="#3B82F6"-Werten. Jedes Icon wird zu einem Einzweck-Prop. Um dasselbe SVG in einem Dark Theme, Hover-Zustand oder einer anderen Markenfarbe zu verwenden, müssen Sie es klonen und erneut bearbeiten.
Design-Tools packen <title>-, <defs>-, leere <g>-Gruppen und redundante Attribute in jeden SVG-Export. Dieses tote Gewicht bläht Ihr JSX-Bundle auf und verlangsamt die Parse-Zeit — besonders wenn Sie Dutzende Icons inlinen.
SVG links einfügen — React-Komponente rechts erhalten
Sechs produktionsreife Transformationen sofort angewendet, vollständig in Ihrem Browser.
Fügen Sie ein SVG ein und die React-Komponente erscheint sofort. Die SVG-zu-React-Konvertierung läuft als Browser-AST-Transform — null Netzwerk-Roundtrips, null Latenz unabhängig von der Dateigröße.
Aktivieren Sie den TSX-Modus und der Konverter stellt automatisch interface IconProps extends React.SVGProps<SVGSVGElement> voran. Jede Prop ist typisiert.
Vor der SVG-zu-React-Konvertierung entfernt das Tool <title>-, <defs>-, leere Gruppen und redundante Attribute aus Figma- oder Sketch-Exporten. Pfade werden zusammengefasst — SVG-zu-React-Ausgabe um bis zu 60 % reduziert.
Im Tailwind-Modus ersetzt der SVG-zu-React-Konverter hartcodierte Fill- und Stroke-Farben durch className="fill-current" und currentColor. Icons erben sofort die übergeordnete Textfarbe.
Jedes SVG-Attribut mit Bindestrich — clip-rule, fill-opacity, stroke-linecap, xlink:href — wird automatisch in sein React-camelCase-Äquivalent umbenannt. class wird zu className. Die Ausgabe ist immer gültiges JSX.
Entfernen Sie hartcodierte Breite und Höhe vom SVG-Wurzelelement mit einem Umschalter. Die SVG-zu-React-Komponente passt sich via CSS oder className-Prop an.
Vom rohen SVG-Export zur kopierfertigen React-Komponente in unter 30 Sekunden.
Kopieren Sie den SVG-Quellcode aus Figma, Sketch, einer Icon-Bibliothek oder einer SVG-Datei. Fügen Sie ihn direkt in das linke Panel des SVG-zu-React-Konverters ein. Das Tool akzeptiert jedes gültige SVG, einschließlich Mehrsegment-Icons und komplexe Illustrationen.
Wählen Sie Ausgabeformat und Optimierungen für Ihr Projekt. Aktivieren Sie TypeScript für TSX-Ausgabe mit typisierten Props. Aktivieren Sie SVGO-Komprimierung, um Figma-Bloat vor der SVG-zu-React-Transformation zu entfernen. Aktivieren Sie Tailwind CSS, um hartcodierte Farben durch currentColor zu ersetzen.
Die SVG-zu-React-Ausgabe erscheint während der Eingabe im rechten Panel. Klicken Sie auf Kopieren, um die React-Komponente in die Zwischenablage zu senden, dann direkt in Ihre .jsx- oder .tsx-Datei einfügen. Keine Neuformatierung erforderlich.
Ob Sie ein Design-System aufbauen, die Bundle-Größe optimieren oder fertige Icons übergeben — der SVG-zu-React-Konverter deckt Ihren Workflow ab.
Rohen SVG links einfügen und die React-Komponente erscheint rechts in Echtzeit. Die SVG-zu-React-Transformation läuft als reine Browser-AST-Pass — kein Warten, kein Server, keine Rate-Limits.
Ein Umschalter wechselt die SVG-zu-React-Ausgabe von JSX zu TSX und generiert automatisch interface IconProps extends React.SVGProps<SVGSVGElement>. Jede CSS-Klasse, jedes Aria-Label und jeder Event-Handler ist vollständig typisiert.
Der Konverter führt SVGO-Komprimierung vor der SVG-zu-React-Transformation aus — entfernt Figma-Metadaten, führt redundante Pfade zusammen und reduziert die Dateigröße um bis zu 60 %. Tailwind-Modus ersetzt dann hartcodierte Fill-Farben durch currentColor.
Häufige Fragen zur Konvertierung von SVG zu React-Komponenten, TypeScript-Props und SVG-Optimierung.
SVG zu React konvertieren bedeutet, eine rohe SVG-Datei — exportiert aus Figma, Sketch oder einer Icon-Bibliothek — in eine wiederverwendbare React-Funktionskomponente umzuwandeln. Das SVG-Markup wird zu JSX, Attribute mit Bindestrichen werden zu camelCase, und die Komponente kann Props wie className, width und aria-label empfangen.
SVG als React-Komponente zu inlinen ermöglicht es Ihnen, fill und stroke via CSS zu steuern, einzelne Pfade mit Framer Motion zu animieren, ARIA-Labels für Barrierefreiheit anzuwenden und ungenutzte Icons beim Build-Zeit tree-shaken. Ein <img>-Tag behandelt SVG als undurchsichtiges Bild.
Ja. Aktivieren Sie den TypeScript-Schalter und die SVG-zu-React-Ausgabe wechselt vom .jsx- zum .tsx-Format. Der Konverter generiert automatisch interface IconProps extends React.SVGProps<SVGSVGElement> am Dateianfang.
Der SVG-zu-React-Konverter verarbeitet alle bekannten Attribute mit Bindestrich: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href und class → className.
Vor der SVG-zu-React-Transformation wendet das Tool einen JavaScript-SVGO-Pass in Ihrem Browser an. Es entfernt <title>-, <desc>-, <defs>-, leere <g>-Elemente und redundante Präsentationsattribute, die von Design-Tools generiert wurden.
Im Tailwind-Modus ersetzt der SVG-zu-React-Konverter hartcodierte fill="#hex"- und stroke="#hex"-Attribute durch fill="currentColor" und stroke="currentColor" und fügt className="fill-current" zum Wurzel-<svg>-Element hinzu. Das Icon erbt dann die text-color-Klasse des übergeordneten Elements — perfekt für Dark Mode.
Nein. Die gesamte SVG-zu-React-Konvertierung findet in der JavaScript-Engine Ihres Browsers statt. Ihr SVG-Quellcode verlässt niemals Ihr Gerät. Kein Backend, kein Upload, kein Logging und kein Rate-Limit.
Ja, obwohl sehr große SVGs (Hunderte von Pfaden) möglicherweise etwas länger dauern. Der SVG-zu-React-Konverter verarbeitet Mehrsegment-Icons, Clip-Pfade, Verläufe, Masken und verschachtelte Gruppen.
100% kostenlos · Keine Anmeldung · Kein Upload · Offline verfügbar
