SVG-zu-JSX-Konverter

Was ist SVG-zu-JSX-Konverter?

Der SVG-zu-JSX-Konverter ist ein kostenloses Browser-Tool, das einfaches SVG-Markup in gültiges React-JSX verwandelt, das du direkt in eine Komponente einfügen kannst. React erwartet DOM-Attribute in camelCase (strokeWidth, clipPath, fillRule), verwendet className statt class und braucht das style-Attribut als Objekt aus camelCase-Eigenschaften statt als String – dieses Tool korrigiert das alles automatisch. Frontend-Entwickler und Designer nutzen es beim Exportieren von Icons aus Figma, Illustrator oder einem Icon-Set. Aktiviere die optionale Bereinigung, um Kommentare, Editor-Metadaten und XML-Deklarationen zu entfernen, und wähle, ob die Ausgabe Inline-JSX oder eine mit React.SVGProps typisierte Funktions-, memo()- oder forwardRef-Komponente ist.

So verwendest du SVG-zu-JSX-Konverter

1. Füge dein SVG-Markup in das Eingabefeld ein oder lege eine .svg-Datei in die Ablagezone.
2. Lies das umgewandelte JSX im Ausgabefeld – Attribute sind in camelCase, class wird zu className, ein Inline-style wird zum style-Objekt und leere Tags schließen sich automatisch selbst.
3. Öffne die Einstellungen und wähle eine Komponentenausgabe: Inline-JSX, eine Funktionskomponente, eine memo()-Komponente oder eine forwardRef-Komponente.
4. Lege im Feld Komponentenname den Namen fest, der im Wrapper verwendet wird (zum Beispiel MyIcon).
5. Aktiviere TypeScript-Props, um die Komponente mit React.SVGProps zu typisieren, oder aktiviere SVG bereinigen, um zuerst Kommentare und Editor-Metadaten zu entfernen.
6. Klicke auf Kopieren, um das JSX zu kopieren, und füge es dann in dein React- oder Next.js-Projekt ein.

Beispiele

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Häufig gestellte Fragen

Was ändert der Konverter an meinem SVG?

Er benennt Attribute mit Bindestrich und Namespace in Reacts camelCase-Form um (stroke-width zu strokeWidth, xlink:href zu xlinkHref), wandelt class in className um, schreibt einen Inline-style-String in ein JSX-style-Objekt mit camelCase-Schlüsseln um und schließt leere Elemente wie path und rect selbst, damit sie gültiges JSX sind.

Wie funktionieren die Optionen für die Komponentenausgabe?

Wähle Inline-JSX, um das Markup überall zu platzieren, oder verpacke es als Funktions-, memo()- oder forwardRef-Komponente mit dem von dir eingegebenen Komponentennamen. Eine forwardRef-Komponente erhält eine ref, die an das Wurzel-svg gehängt wird. Aktiviere TypeScript-Props, um jeden Wrapper mit React.SVGProps zu typisieren und {...props} zu spreizen.

Wandelt es Inline-Styles um?

Ja. Ein Attribut style="fill:red;stroke-width:2" wird in ein JSX-style-Objekt wie style={{ fill: "red", strokeWidth: "2" }} umgeschrieben, mit camelCase-Eigenschaftsnamen und Werten als Strings. CSS-Custom-Properties (--var) bleiben als String-Schlüssel erhalten.

Was macht die SVGO-artige Bereinigung?

Wenn SVG bereinigen aktiv ist, entfernt das Tool XML-Deklarationen, DOCTYPE, Kommentare, <metadata>, Editor-Namespaces wie inkscape: und sodipodi: sowie das version-Attribut des svg und kürzt anschließend Leerraum – alles bevor die JSX-Umwandlung läuft.

Wird mein SVG irgendwohin hochgeladen?

Nein. Eine Datei abzulegen oder Markup einzufügen führt eine reine String-Transformation vollständig in deinem Browser aus, sodass dein SVG nie an einen Server gesendet wird und das Tool offline funktioniert.