𝗪𝗵𝘆 𝗬𝗼𝘂 𝗦𝗵𝗼𝘂𝗹𝗱 𝗦𝘄𝗶𝘁𝗰𝗵 𝗜𝗰𝗼𝗻 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀
Der Wechsel von @expo/vector-icons zu den offiziellen @react-native-vector-icons-Paketen reduziert Ihre Bundle-Größe um 4 MB oder mehr. Expo empfiehlt diesen Wechsel nun.
Das alte @expo/vector-icons war ein Wrapper. Er half dabei, dass Icons mit Expo Go und Over-the-Air-Updates funktionieren. Dieser Wrapper fügte jedoch Komplexität hinzu. Expo musste Babel-Transforms verwenden, um es zum Laufen zu bringen. Dies führte zu zusätzlichem Wartungsaufwand.
Die neuen Pakete funktionieren anders. Sie integrieren sich direkt in expo-font. Sie nutzen native Font-Loading-APIs. Das bedeutet, dass sie in Expo Go, Development Builds und Produktions-Apps funktionieren.
Vorteile des Wechsels:
- Kleinere Bundles: Unsere Test-App verkleinerte sich nach der Änderung der Imports um 4 MB.
- Neuere Icon-Sets: Sie erhalten Zugriff auf Sets wie Lucide.
- Bessere Tools: Sie können Icon-Namen per Type-Check überprüfen.
- Saubereres Setup: Sie benötigen keine komplexen Aliasing-Konfigurationen mehr.
So migrieren Sie:
- Führen Sie das Codemod aus: Verwenden Sie npx @react-native-vector-icons/codemod in Ihrem Projektverzeichnis.
- Überprüfen Sie die Änderung: Führen Sie npx expo doctor aus, um alte Pakete zu finden.
- Überprüfen Sie expo-font: Stellen Sie sicher, dass es installiert und konfiguriert ist. Fügen Sie keine Font-Pfade aus node_modules direkt zum Config-Plugin hinzu.
Achten Sie auf diese Probleme:
- Font-Konflikte: Die Mischung aus alten und neuen Paketen führt zu leeren Quadraten oder Fragezeichen.
- Abhängigkeitsprobleme: Einige Bibliotheken erwarten die alten Namen. Überprüfen Sie Ihre Abhängigkeiten, falls Fehlermeldungen auftreten.
Expo wird @expo/vector-icons in einer zukünftigen Version als veraltet (deprecated) markieren. Diesen Wechsel jetzt vorzunehmen, vereinfacht Ihr Projekt und verbessert die Performance.
Quelle: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n