Dlaczego warto zmienić biblioteki ikon
Przejście z @expo/vector-icons na oficjalne pakiety @react-native-vector-icons zmniejsza rozmiar paczki o 4 MB lub więcej. Expo zaleca obecnie tę zmianę.
Stare @expo/vector-icons było wrapperem. Pomagało ono ikonom działać z Expo Go oraz aktualizacjami over-the-air. Jednak ten wrapper wprowadzał dodatkową złożoność. Expo musiało używać transformacji Babel, aby to działało, co generowało dodatkową pracę przy utrzymaniu.
Nowe pakiety działają inaczej. Integrują się bezpośrednio z expo-font. Korzystają z natywnych API do ładowania czcionek. Oznacza to, że działają w Expo Go, development builds oraz aplikacjach produkcyjnych.
Korzyści z przejścia:
- Mniejsze paczki: Nasza testowa aplikacja zmniejszyła się o 4 MB po zmianie importów.
- Nowsze zestawy ikon: Zyskujesz dostęp do zestawów takich jak Lucide.
- Lepsze narzędzia: Możesz sprawdzać typy nazw ikon.
- Czystsza konfiguracja: Nie potrzebujesz już skomplikowanych konfiguracji aliasów.
Jak przeprowadzić migrację:
- Uruchom codemod: Użyj
npx @react-native-vector-icons/codemodw głównym katalogu projektu. - Zweryfikuj zmianę: Uruchom
npx expo doctor, aby znaleźć stare pakiety. - Sprawdź expo-font: Upewnij się, że jest zainstalowane i skonfigurowane. Nie dodawaj ścieżek do czcionek z
node_modulesbezpośrednio do pluginu konfiguracyjnego.
Uważaj na te problemy:
- Konflikty czcionek: Mieszanie starych i nowych pakietów powoduje pojawianie się pustych kwadratów lub znaków zapytania.
- Problemy z zależnościami: Niektóre biblioteki oczekują starych nazw. Sprawdź swoje zależności, jeśli zobaczysz błędy.
Expo wycofa @expo/vector-icons w przyszłej wersji. Dokonanie tej zmiany już teraz uprości Twój projekt i poprawi jego wydajność.
Źródło: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n