SVG-zu-JSX-Konverter
Füge ein SVG ein und erhalte eine saubere React-, React-Native-, Vue- oder Svelte-Komponente, bereit zum Kopieren in dein Projekt.
- Keine Uploads
- Funktioniert offline
- Kostenlos, ohne Anmeldung
- Dateien verlassen nie deinen Browser
SVG-Dateien hier ablegen
oder SVG-Code in den Editor einfügen. Du kannst mehrere Dateien gleichzeitig öffnen.
Dein SVG bleibt auf diesem Gerät. Nichts wird hochgeladen.
Anleitung: SVG-zu-JSX-Konverter
- 1
SVG einfügen
Füge SVG-Code ein oder lege eine Datei ab. Optimiere es vorher im Tab Optimieren für die kleinste Komponente.
- 2
Framework wählen
Wähle React (JSX oder TSX), React Native, Vue oder Svelte. Lege einen Komponentennamen und Optionen wie currentColor fest.
- 3
Kopieren oder herunterladen
Kopiere die Komponente oder lade sie als fertige .jsx-, .tsx-, .vue- oder .svelte-Datei herunter.
Warum SVG vor der Nutzung in React umgewandelt werden muss
JSX sieht aus wie HTML, folgt aber JavaScript-Regeln. Rohes SVG in eine React-Komponente einzufügen schlägt oft fehl oder erzeugt Warnungen: Attribute mit Bindestrich wie stroke-width und fill-rule müssen in camelCase stehen, class muss className heißen und Inline-style-Strings müssen zu Objekten werden. Attribute mit Namensraum wie xlink:href und Metadaten aus Illustrator oder Sketch müssen ebenfalls bereinigt werden.
viewsvg erledigt das alles und verpackt das Ergebnis in eine benannte Komponente, die Props annimmt – so kannst du className, width oder ein aria-label von der Elternkomponente übergeben.
Tipps für SVG-Icon-Komponenten
- Schick das SVG zuerst durch den Optimierer, um Metadaten zu entfernen und Pfade zu verkleinern.
- Aktiviere currentColor verwenden, damit Icons der Textfarbe folgen und in hellen wie dunklen Themes funktionieren.
- Aktiviere width/height entfernen und setze die Größe per CSS, damit dieselbe Komponente in jeder Größe funktioniert.
- Behalte die
viewBox. Ohne sie kann das Icon nicht skalieren.
Alles, was du für die Arbeit mit SVG brauchst
SVG-zu-JSX-Konverter ist Teil eines Arbeitsbereichs zum Ansehen, Bearbeiten, Optimieren und Konvertieren von SVG-Dateien – ohne Anmeldung, ohne Werbung, ohne Uploads.
Sofortige Vorschau
Zoom bis 6400 %, verschieben, an den Bildschirm anpassen und dein SVG auf transparentem, weißem, schwarzem oder beliebigem Hintergrund prüfen.
Live-Code-Editor
Syntaxhervorhebung, Fehlermarkierungen pro Zeile, Formatieren und Minifizieren, Suche und vollständiger Rückgängig-Verlauf.
Kontur & Pixelraster
Sieh jeden Pfad im Konturmodus und prüfe beim Hineinzoomen die Pixelausrichtung mit dem Raster.
Prüfen
Datei- und gzip-Größe, viewBox, Elementbaum mit Hervorhebung beim Überfahren und Farbersetzung per Klick.
Mit SVGO optimieren
Dateien verkleinern mit Vorher-Nachher-Vorschau und einstellbarer Genauigkeit. Alle geöffneten Dateien auf einmal optimieren.
PNG, JPG, WebP & ICO
In jeder Größe bis 16384 px exportieren, mit Transparenz, oder das PNG direkt in die Zwischenablage kopieren.
React, Vue & Svelte
Saubere JSX/TSX-, React-Native-, Vue- und Svelte-Komponenten mit Unterstützung für currentColor und Props.
Viele Dateien auf einmal
Öffne viele SVGs als Tabs, optimiere sie gesammelt oder lade sie als ZIP mit SVGs oder PNGs herunter.
Privat & offline
Keine Uploads, kein Konto. Deine Arbeit wird im Browser gespeichert, und die App funktioniert nach dem ersten Besuch offline.
Häufige Fragen
Was ändert sich beim Umwandeln von SVG in JSX?
Attribute werden zu camelCase (stroke-width → strokeWidth), class wird zu className, xlink:href zu xlinkHref und Inline-Style-Strings werden zu Style-Objekten. viewsvg erledigt das alles für dich.
Wie übernimmt ein SVG-Icon in React die Textfarbe?
Aktiviere „currentColor verwenden“. Alle fill- und stroke-Werte werden durch currentColor ersetzt, sodass das Icon der CSS-Farbe seines Elternelements folgt.
Wird React Native unterstützt?
Ja. Wähle React Native, und du bekommst eine Komponente mit react-native-svg (Svg, Path, G usw.) samt passender Import-Zeile.
Werden meine SVG-Dateien irgendwo hochgeladen?
Nein. viewsvg läuft komplett in deinem Browser. Dateien werden auf deinem Gerät gelesen, angezeigt, optimiert und konvertiert, und nichts wird an einen Server gesendet. Nach dem ersten Besuch funktioniert es sogar offline.
Ist viewsvg kostenlos?
Ja. Alle Funktionen sind kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Dateilimit.