Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG in eine React-Komponente umwandeln

Mach aus jedem SVG-Icon oder jeder Illustration eine funktionale React-Komponente mit JSX-tauglichen Attributen, weitergereichten Props und optionalen Props für Größe und Farbe.

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

Warum SVG nicht einfach in React einfügen?

Rohes SVG in einer .jsx-Datei führt meist zu einer Flut von Warnungen wie „Invalid DOM property stroke-width“ oder „Invalid DOM property class“ – oder sogar zu einem Kompilierfehler, wenn die Datei ein style-Attribut oder eine XML-Deklaration enthält. Jedes Attribut von Hand umzubenennen ist bei großen Icon-Sets langsam und fehleranfällig.

Dieser Konverter übernimmt das Umbenennen und verpackt das Markup in eine Komponente, die Props entgegennimmt. Da {...props} auf das <svg>-Wurzelelement verteilt wird, kannst du className, aria-label, onClick oder eine eigene Breite aus der Elternkomponente übergeben, ohne das Icon erneut zu bearbeiten.

Empfohlene Einstellungen für React-Icons

Für eine wiederverwendbare Icon-Komponente empfehlen wir:

  • currentColor aktivieren, damit das Icon die Textfarbe der Elternkomponente übernimmt und im Dark Mode funktioniert.
  • Die size-Prop aktivieren, um Breite und Höhe mit einem einzigen Wert wie size={20} zu steuern.
  • Die viewBox behalten und feste width- und height-Angaben entfernen, damit das Icon mit CSS skaliert.
  • forwardRef nur nutzen, wenn eine Elternkomponente das <svg>-Element braucht, etwa für Tooltips oder Animationen.

Inline-Komponenten oder Bilddateien?

Inline-SVG-Komponenten lassen sich mit CSS gestalten, animieren und beim Hover umfärben und verursachen keine zusätzliche Netzwerkanfrage. Für große, unveränderliche Illustrationen kann ein einfaches <img src="/file.svg"> günstiger sein, weil der Browser die Datei separat cachen kann. Nutze Komponenten für Icons und UI-Grafiken und Bild-Tags für aufwendige Illustrationen.

Häufige Fragen

Welche React-Versionen werden unterstützt?

Die Ausgabe ist eine normale Funktionskomponente, die mit React 16.8 und neuer funktioniert, einschließlich React 18 und 19. forwardRef und memo sind optional und werden nur importiert, wenn du sie aktivierst.

Muss ich React in der erzeugten Datei importieren?

Nein. Mit der modernen JSX-Transformation von Next.js, Vite und Create React App 4+ muss React nicht im Scope sein. Der Konverter importiert nur, was die Komponente tatsächlich verwendet.

Wie ändere ich die Icon-Farbe von der Elternkomponente aus?

Aktiviere die Option currentColor. Füllungen und Konturen werden durch currentColor ersetzt, sodass das Icon die CSS-Farbe seines Elternelements übernimmt, zum Beispiel über die Tailwind-Klasse text-red-600.

Kann ich dem Icon onClick oder aria-label übergeben?

Ja. Die Komponente verteilt {...props} auf das <svg>-Wurzelelement, sodass jedes übergebene SVG-Attribut und jeder Event-Handler weitergereicht wird und die Standardwerte überschreibt.