アイコンライブラリを切り替えるべき理由
@expo/vector-icons から公式の @react-native-vector-icons パッケージに切り替えることで、バンドルサイズを4MB以上削減できます。現在、Expoはこの変更を推奨しています。
旧来の @expo/vector-icons はラッパーでした。これは、Expo Go や OTA（over-the-air）アップデートでアイコンが動作するようにするためのものでした。しかし、このラッパーによって複雑さが増していました。Expo は動作させるために Babel トランスフォームを使用する必要があり、それが余計なメンテナンス作業を生んでいました。
新しいパッケージは仕組みが異なります。これらは expo-font と直接統合されており、ネイティブのフォント読み込み API を使用します。つまり、Expo Go、開発ビルド、および本番用アプリのすべてで動作することを意味します。
切り替えるメリット：
- バンドルサイズの縮小：インポートを変更した後、テストアプリのサイズが4MB減少しました。
- より新しいアイコンセット：Lucide のようなセットが利用可能になります。
- より優れたツール：アイコン名を型チェックできます。
- よりクリーンなセットアップ：複雑なエイリアス設定が不要になります。
移行方法：
- codemod を実行する：プロジェクトのルートで
npx @react-native-vector-icons/codemodを使用します。 - 変更を確認する：
npx expo doctorを実行して、古いパッケージがないか確認します。 expo-fontを確認する：インストールと設定が正しく行われていることを確認してください。node_modulesからのフォントパスを config plugin に直接追加しないでください。
注意すべき問題：
- フォントの競合：新旧のパッケージを混在させると、空白の四角形や疑問符が表示される原因になります。
- 依存関係の問題：一部のライブラリは古い名前を想定しています。エラーが発生した場合は、依存関係を確認してください。
Expo は将来のリリースで @expo/vector-icons を非推奨にする予定です。今この変更を行うことで、プロジェクトが簡素化され、パフォーマンスが向上します。
出典: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n