Perché dovresti passare a nuove librerie di icone
Passare da @expo/vector-icons ai pacchetti ufficiali @react-native-vector-icons riduce la dimensione del bundle di 4 MB o più. Expo ora raccomanda questo cambiamento.
Il vecchio @expo/vector-icons era un wrapper. Aiutava le icone a funzionare con Expo Go e con gli aggiornamenti over-the-air. Tuttavia, questo wrapper aggiungeva complessità. Expo doveva utilizzare le trasformazioni Babel per farlo funzionare, il che comportava un lavoro di manutenzione extra.
I nuovi pacchetti funzionano in modo diverso. Si integrano direttamente con expo-font e utilizzano le API native di caricamento dei font. Ciò significa che funzionano in Expo Go, nelle build di sviluppo e nelle app in produzione.
Vantaggi del passaggio:
- Bundle più piccoli: la nostra app di test si è ridotta di 4 MB dopo aver cambiato gli import.
- Set di icone più recenti: avrai accesso a set come Lucide.
- Strumenti migliori: puoi effettuare il type-check dei nomi delle icone.
- Configurazione più pulita: non avrai più bisogno di complesse configurazioni di aliasing.
Come migrare:
- Esegui il codemod: usa npx @react-native-vector-icons/codemod nella root del tuo progetto.
- Verifica la modifica: esegui npx expo doctor per trovare i vecchi pacchetti.
- Controlla expo-font: assicurati che sia installato e configurato. Non aggiungere i percorsi dei font da node_modules direttamente al plugin di configurazione.
Attenzione a questi problemi:
- Conflitti di font: mescolare i vecchi e i nuovi pacchetti causa la comparsa di quadrati vuoti o punti interrogativi.
- Problemi di dipendenza: alcune librerie si aspettano i vecchi nomi. Controlla le tue dipendenze se riscontri errori.
Expo depreccherà @expo/vector-icons in una release futura. Effettuare questo cambiamento ora semplifica il progetto e ne migliora le prestazioni.
Fonte: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n