SVG in JSX umwandeln

Macht aus SVG-Markup eine React-Funktionskomponente: SVGO optimiert das SVG in deinem Browser, dann wandelt SVGR es auf dem Server um. Attribute werden in camelCase geschrieben (stroke-width zu strokeWidth), numerische Größen werden zu Zahlen, und {...props} wird auf das Root-<svg> gespreadet.

Ein aus Figma oder Illustrator exportiertes Icon in eine React-Komponente umwandeln.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. Conversion runs locally in your browser. Your code is not uploaded.

Original

Result

JSX

Wann sie hilft

Ein aus Figma oder Illustrator exportiertes Icon in eine React-Komponente umwandeln.
Prüfen, wie SVGR ein SVG umschreibt, bevor du SVGR in eine Build-Pipeline aufnimmst.

Anwendung

Füge SVG-Markup ein oder lade eine .svg-Datei; Eingaben, die kein gültiges SVG sind, werden mit einem Fehler abgelehnt.
Öffne die Einstellungen, um die SVGO-Optimierung auszuschalten oder Plugins wie remove title oder merge paths umzuschalten; die Vorschau unter dem Editor vergleicht das ursprüngliche mit dem optimierten SVG.
Kopiere die Komponente und benenne SvgComponent um; übergib className, width oder fill als Props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React-Komponente (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Details und Einschränkungen

SVGO läuft in einem Web Worker in deinem Browser; das optimierte SVG wird dann an den Endpunkt /api/svg-to-jsx dieser Seite gesendet, wo SVGR die Komponente erzeugt. Füge keine vertraulichen Grafiken ein.

Mit den Standardeinstellungen werden Kommentare, <title>, <desc> und Editor-Metadaten entfernt und Pfaddaten gekürzt (M5.000 12.000 L19.000 12.000 wird zu M5 12h14). Schalte die Optimierung aus, um das SVG so umzuwandeln, wie es eingefügt wurde.

Style-Strings werden zu Style-Objekten und class wird zu className.

Die Ausgabe zielt auf React DOM; verwende SVG to React Native für react-native-svg.

FAQ

Warum behält das Root-Element width und height?

remove dimensions ist in den SVGO-Einstellungen aus, und SVGR verwendet Standardoptionen, daher bleiben die Abmessungen als Zahlen erhalten (width={24}). Überschreibe sie über Props, da {...props} nach ihnen kommt.

Kann ich mit fill="currentColor" die Farbe per CSS setzen?

Ja. currentColor bleibt erhalten, sodass das Icon der CSS-Farbe seines Elternelements folgt. Fest kodierte Farben innerhalb von Pfaden werden nicht ersetzt.

Warum fehlt das <title> in meiner Komponente?

Das SVGO-Plugin remove title ist standardmäßig aktiv. Schalte es in den Einstellungen aus oder deaktiviere die Optimierung ganz, wenn du das <title> für die Barrierefreiheit brauchst.

Gibt es eine TypeScript-Ausgabe?

Nein. Die Seite gibt eine JavaScript-Komponente ohne Typannotationen aus.

Spezifikationen und Referenzen

SVGR documentation

SVG