Kostenloses Tool

SVG-in-React-Konverter

Mach aus SVG-Dateien React-Komponenten, die du in dein Projekt einfügen kannst. TypeScript oder JavaScript, mit den Props size und title.

SVG-Dateien oder einen Ordner hier ablegenDateien bleiben auf deinem Gerät

Noch keine Dateien

Hier erscheinen die umgewandelten Dateien. Lege oben SVG-Dateien ab oder probiere es mit Beispiel-Icons.

So wandelst du SVG in React um

SVG-Dateien ablegenFüge Dateien oder einen Ordner hinzu oder SVG-Code ein.
TypeScript oder JavaScript wählenLege die Standardgröße fest und ob einfarbige Icons der Textfarbe folgen.
Kopieren oder herunterladenKopiere eine Komponente oder lade alle Dateien mit einem Index als ZIP herunter.

Wie sieht die Komponente aus?

Eine Funktion pro Icon, die das SVG als JSX zurückgibt. Sie nimmt size, title und jede SVG-Prop an, etwa className oder onClick.

Wie ändere ich die Icon-Farbe?

Einfarbige Icons nutzen currentColor und übernehmen die umgebende Textfarbe. Setze sie per CSS oder mit der Prop color.

Funktioniert das mit Next.js?

Ja. Die Komponenten sind reines React ohne Abhängigkeiten und laufen in Next.js, Vite und Remix.

Was passiert mit Verläufen und IDs?

IDs werden mit Reacts useId eindeutig gemacht, sodass mehrere Icons mit Verläufen auf einer Seite nicht kollidieren.