Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG-zu-JSX- und React-Komponenten-Konverter

Füge SVG-Code ein oder ziehe .svg-Dateien hierher und erhalte eine saubere, commit-fertige Komponente für React, TypeScript, React Native, Vue oder Solid. Alles läuft lokal in deinem Browser.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
Export:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
538 B(-24 %)
Komponente
566 B

Was dieser SVG-Konverter macht

SVG-Dateien aus Figma, Illustrator, Sketch oder Inkscape sind gültiges XML, aber kein gültiges JSX. React erwartet Props in camelCase wie strokeWidth statt stroke-width, className statt class und ein Style-Objekt statt eines CSS-Strings. Außerdem fügen Editoren XML-Deklarationen, Kommentare, Metadatenblöcke und Attribute mit Namensräumen hinzu, die dein Bundle aufblähen und Warnungen auslösen.

SvgJsx liest das SVG mit einem kleinen XML-Parser, schreibt jedes Attribut in die Form um, die dein Framework erwartet, und gibt eine sauber formatierte Komponente aus. Du kannst TypeScript-Typen, eine size-Prop, currentColor-Füllungen, forwardRef, memo und den Exportstil wählen und anschließend den Code kopieren oder als Datei herunterladen.

So wandelst du SVG in eine React-Komponente um

Der Ablauf dauert nur wenige Sekunden:

  • Füge den SVG-Code in das Eingabefeld ein oder ziehe eine oder mehrere .svg-Dateien darauf.
  • Wähle das Ausgabeformat: React, React Native, Vue, Solid oder ein reines JSX-Snippet.
  • Lege den Komponentennamen und Optionen wie TypeScript, currentColor und die size-Prop fest.
  • Prüfe die Live-Vorschau und den Größenvergleich, dann kopiere den Code oder lade die Datei herunter. Mehrere Dateien werden zu einem ZIP gebündelt.

Automatische Umwandlungen

Attribute mit Bindestrich werden zu camelCase (stroke-linecap → strokeLinecap), Attribute mit Namensraum werden zusammengezogen (xlink:href → xlinkHref) und Inline-Style-Strings werden zu JavaScript-Objekten. data-*- und aria-*-Attribute bleiben unverändert, weil React sie so akzeptiert. Script-Elemente und Inline-Event-Handler werden entfernt, damit eine eingefügte Datei niemals Code in deine App einschleusen kann.

Eine leichte Optimierung fasst Leerraum zusammen und kann Koordinaten auf eine feste Anzahl Nachkommastellen runden. Bei den meisten Icon-Sets spart das 20–40 % des Markups – ganz ohne schwergewichtige SVGO-Abhängigkeit.

Häufige Fragen

Ist dieser SVG-zu-JSX-Konverter kostenlos?

Ja. SvgJsx ist komplett kostenlos, braucht kein Konto und hat keine Nutzungslimits. Es ist eine statische Website, daher gibt es keine Serverkosten, die an dich weitergegeben werden müssten.

Werden meine SVG-Dateien irgendwo hochgeladen?

Nein. Dateien werden mit der FileReader-API des Browsers gelesen und per JavaScript auf deinem Gerät konvertiert. Nichts wird an einen Server gesendet – das Tool eignet sich also auch für vertrauliche Logos und Icons.

Was ist der Unterschied zwischen SVG und JSX?

SVG ist XML-Markup, JSX dagegen eine Syntaxerweiterung für JavaScript. JSX braucht Attributnamen in camelCase, className statt class, Style-Objekte statt Strings und geschweifte Klammern für Sonderzeichen – deshalb lässt sich rohes SVG oft nicht kompilieren.

Funktioniert es mit Exporten aus Figma und Illustrator?

Ja. Editor-spezifische Metadaten, Kommentare, sodipodi- und inkscape-Attribute sowie die XML-Deklaration werden standardmäßig entfernt. Verläufe, Masken und Clip-Pfade funktionieren weiter, weil referenzierte IDs erhalten bleiben.

Kann ich viele SVG-Icons auf einmal konvertieren?

Ja. Ziehe mehrere .svg-Dateien hinein, und jede wird zu einer eigenen Komponente mit dem Dateinamen. Lade alle als ZIP herunter, das zusätzlich eine index-Datei enthält, die jedes Icon re-exportiert.