Ein SVG-Icon in HTML, React und React Native einsetzen und umfärben
Leitfaden für Entwickler: Inline-SVG oder img-Tag, currentColor für Themes, SVG als React-Komponente und react-native-svg auf dem Handy.
Sie haben ein SVG-Icon, umgewandelt oder gezeichnet. Die Fragen danach sind immer dieselben: Wie kommt es auf die Seite, wie ändere ich seine Farbe per CSS, und wie nutze ich dieselbe Datei in einer React-Native-App? Hier der ganze Weg mit seinen Abwägungen.
Schritt 0: die Farbe steuerbar machen
Ein umgewandeltes SVG hat fest eingetragene Füllungen, zum Beispiel fill="#0d1014". Um das Icon per CSS umzufärben, ersetzen Sie die Füllung der Formen, die auf das Theme reagieren sollen, durch currentColor. Dann übernimmt das Icon den CSS-Wert color seines Elternelements. Farben, die fest bleiben sollen, etwa ein Markenakzent, lassen Sie eingetragen.
- Einfarbiges Icon: jede Füllung durch currentColor ersetzen.
- Zweifarbiges Icon: currentColor für die Hauptform, eine feste Farbe oder eine CSS-Variable (fill="var(--accent)") für den Akzent.
- Die Attribute width und height am Wurzelelement entfernen, die viewBox behalten, die Größe per CSS setzen.
Reines HTML: inline oder img
Ein img-Tag oder ein CSS-Hintergrund ist der einfachste Weg: Die Datei wird gecacht und belastet das HTML nicht, aber die Farbe lässt sich nicht per CSS ändern, und currentColor tut dort nichts. Ein inline eingefügtes SVG lässt sich stylen und animieren, kostet aber ein paar hundert Byte pro Verwendung. Faustregel: inline für Icons, die Farbe oder Zustand wechseln, img für Logos und Illustrationen, die fest bleiben.
Inline fügen Sie das svg-Element in die Seite ein, setzen color auf einem Elternelement, und jede currentColor-Füllung folgt. Bei vielen Icons legen Sie sie als symbol-Elemente in ein verstecktes svg und referenzieren sie mit use; der Browser malt jedes use in der Farbe, die an dieser Stelle gilt.
React: das Icon als Komponente
Machen Sie aus dem SVG eine Komponente, damit es Props annimmt. Attributnamen in camelCase umbenennen (stroke-width wird strokeWidth, fill-rule wird fillRule), xmlns entfernen und die Props auf das Wurzelelement spreaden, damit className und aria-label durchgereicht werden. Ein Werkzeug wie SVGR erledigt genau das auf der Kommandozeile oder als Bundler-Plugin, sodass Sie die .svg-Dateien im Repository behalten und als Komponenten importieren.
Die Farbe ist dann eine Frage von CSS color auf der Komponente oder einem Elternelement, oder eines color-Props, das fill am Wurzelelement setzt. Für eine themefähige Icon-Bibliothek reichen currentColor und CSS-Variablen, eine Laufzeitbibliothek ist nicht nötig.
React Native: react-native-svg
Native Views rendern kein SVG-Markup. Das Paket react-native-svg stellt Svg, Path, Circle und die übrigen Elemente als Komponenten bereit. Wandeln Sie die Datei mit SVGR und dem Preset native um, das diese Komponenten statt DOM-Elementen ausgibt. Die Größe ist explizit (Props width und height, die viewBox bleibt), die Farbe ein fill-Prop an den Path-Elementen. Das übliche Muster ist ein color-Prop an Ihrer Komponente, der an jede Füllung weitergereicht wird, die auf das Theme reagieren soll.
- react-native-svg installieren (bei Expo bereits enthalten).
- SVGR mit der Option native ausführen, um pro Icon eine Komponentendatei zu bekommen.
- Verläufe einfach halten. react-native-svg unterstützt lineare und radiale Verläufe, jeder braucht aber einen Defs-Block, den SVGR für Sie erzeugt.
Die Datei klein halten
Ein Icon sollte eine Handvoll Pfade sein. Hat Ihre umgewandelte Datei Dutzende, hatte die Quelle Rauschen oder Schattierung. Wandeln Sie sie im Modus Logo mit weniger Farben noch einmal um. svgize zeigt die Pfadzahl neben jedem Ergebnis, sodass Sie das vor dem Ausliefern prüfen können. Schicken Sie die fertige Datei zum Schluss durch einen Optimierer wie SVGO, um Metadaten zu entfernen und Zahlen zu kürzen.