SVG → React
Fertig einfügbares JSX aus jeder SVG-Datei — Attribute so umbenannt, wie React sie erwartet, Props auf das Wurzelelement verteilt, TypeScript wenn du es brauchst.
oder klicken zum Auswählen — nur SVG
Der Komponentenname kommt aus dem Dateinamen, aus arrow-left.svg wird also ArrowLeft.
Dieselbe Komponente, typisiert als SVGProps<SVGSVGElement>.
Nur das Markup, zum Einfügen in eine Komponente, die du schon hast.
Icons als Komponenten
JSX sieht aus wie Markup, ist aber JavaScript. Attribute mit Bindestrich wie stroke-width sind keine gültigen Bezeichner, class kollidiert mit einem reservierten Wort, und geschweifte Klammern in einem Inline-Style werden als Ausdruck gelesen. Ein direkt aus dem Designtool kopiertes SVG scheitert meist an mindestens einem dieser Punkte.
Dieser Konverter benennt um, was umbenannt werden muss, und lässt den Rest in Ruhe. data- und aria-Attribute behalten ihre Bindestriche, weil React sie unverändert durchreicht — sie umzubenennen ist ein verbreiteter Weg, ein barrierefreies Label stillschweigend zu verlieren.
drei Schritte
Wähle eine .svg-Datei — sie bleibt auf deinem Gerät.
Ganze Komponente, ihr TypeScript-Zwilling oder das nackte JSX.
Importiere sie wie jede andere Komponente und style sie über Props.
kurze Antworten
Damit gewinnt, was du von außen übergibst. In JSX überschreibt ein späteres Attribut ein früheres; steht der Spread zuletzt, kannst du className, width oder ein onClick von außen setzen. Steht er vorn, würden die in der Datei festgeschriebenen Werte deine still überschreiben.
Ersetze das fest eingetragene fill oder stroke in der Ausgabe durch currentColor und setze die Farbe dann per CSS an einem beliebigen Elternelement. Sind die Farben über viele Knoten verstreut, schick die Datei vorher durch den SVG-Farbwechsler — der stellt alle auf einmal auf currentColor um.
Nicht direkt. React Native hat kein DOM, SVG braucht dort react-native-svg und großgeschriebene Elementnamen wie Svg und Path. Die hier gezeigte Attribut-Umbenennung ist weiterhin die richtige Form, aber Importe und Tags unterscheiden sich.
Das ist die Quelldatei — minifiziertes SVG bleibt minifiziert, weil Neuformatieren eine eigene Aufgabe ist. Schick sie zuerst durch den SVG-Beautifier, dann kommt die Komponente mit lesbaren Einrückungen heraus.
Nein. Die Umwandlung ist reine Zeichenkettenarbeit in deinem Browser.