Ikona SVG w HTML, React i React Native: osadzenie i zmiana koloru
Poradnik dla programisty: SVG inline czy img, currentColor do motywów, SVG jako komponent React i react-native-svg na mobile.
Masz ikonę SVG, skonwertowaną albo narysowaną. Pytania, które przychodzą zaraz potem, są zawsze te same: jak ją wstawić na stronę, jak zmienić jej kolor z CSS i jak użyć tego samego pliku w aplikacji React Native. Poniżej cała droga razem z kompromisami.
Krok 0: kolor ma być sterowalny
Skonwertowany SVG ma wypełnienia wpisane na sztywno, na przykład fill="#0d1014". Żeby kolorować ikonę z CSS, zamień fill kształtów, które mają reagować na motyw, na currentColor. Od tej chwili ikona przyjmuje wartość color swojego rodzica. Kolory, które mają zostać stałe, na przykład akcent marki, zostaw wpisane na sztywno.
- Ikona jednokolorowa: każdy fill zamień na currentColor.
- Ikona dwutonowa: currentColor dla głównego kształtu, kolor wpisany na sztywno albo zmienna CSS (fill="var(--accent)") dla akcentu.
- Usuń atrybuty width i height z elementu głównego, zostaw viewBox i ustawiaj rozmiar z CSS.
Czysty HTML: inline czy img
Tag img albo tło w CSS to najprostsza droga: plik jest cache'owany i nie zaśmieca HTML, ale koloru nie zmienisz z CSS, a currentColor nic tam nie zrobi. SVG wklejony inline da się stylować i animować, kosztem kilkuset bajtów na każde użycie. Zasada praktyczna: inline dla ikon, które zmieniają kolor albo stan, img dla logo i ilustracji, które są stałe.
W wersji inline wklej element svg do strony, ustaw color na rodzicu, a każde wypełnienie currentColor pójdzie za nim. Przy większej liczbie ikon włóż je do jednego ukrytego svg jako elementy symbol i odwołuj się do nich przez use; przeglądarka pomaluje każde use kolorem obowiązującym w tym miejscu.
React: ikona jako komponent
Zamień SVG w komponent, żeby przyjmował propsy. Nazwy atrybutów zmień na camelCase (stroke-width na strokeWidth, fill-rule na fillRule), usuń xmlns i rozłóż propsy na element główny, żeby className i aria-label przechodziły dalej. Narzędzie SVGR robi dokładnie to z linii poleceń albo jako wtyczka bundlera, więc trzymasz pliki .svg w repozytorium i importujesz je jako komponenty.
Kolor to wtedy kwestia CSS-owego color na komponencie lub rodzicu, albo propa color, który ustawia fill na elemencie głównym. Do biblioteki ikon z motywami wystarczy currentColor i zmienne CSS, żadna dodatkowa biblioteka nie jest potrzebna.
React Native: react-native-svg
Widoki natywne nie renderują znaczników SVG. Pakiet react-native-svg udostępnia Svg, Path, Circle i pozostałe elementy jako komponenty. Przepuść plik przez SVGR z presetem native, który zamiast elementów DOM wygeneruje te komponenty. Rozmiar podajesz jawnie (propsy width i height, viewBox zostaje), a kolor to prop fill na elementach Path. Typowy wzorzec to prop color na twoim komponencie, przekazywany do każdego fill, który ma reagować na motyw.
- Zainstaluj react-native-svg (w Expo jest w zestawie).
- Uruchom SVGR z opcją native, żeby dostać plik komponentu dla każdej ikony.
- Gradienty trzymaj proste. react-native-svg obsługuje liniowe i radialne, ale każdy wymaga bloku Defs, który SVGR wygeneruje za ciebie.
Pilnuj rozmiaru pliku
Ikona powinna być garścią ścieżek. Jeśli skonwertowany plik ma ich kilkadziesiąt, źródło miało szum albo cieniowanie. Skonwertuj je ponownie w trybie Logo z mniejszą liczbą kolorów. svgize pokazuje liczbę ścieżek obok każdego wyniku, więc sprawdzisz to przed wdrożeniem. Na koniec przepuść plik przez optymalizator, na przykład SVGO, żeby usunąć metadane i skrócić liczby.