Moving away from @expo/vector-icons

概要

もし Expo を使っているなら、@expo/vector-icons に依存してきた可能性が高いです。ですが、これからは移行を推奨します。おすすめは、@expo/vector-icons の代わりに、Expo アプリ（Expo Go を含む）を完全にサポートするアイコンパック固有の最新の @react-native-vector-icons パッケージを使うことです。この変更によりエコシステムが簡素化され、混乱が減り、アプリのバンドルサイズが小さくなることがあります。本記事では、なぜこの推奨をするのか、アプリにとって何を意味するのか、そしてスムーズに移行する方法を説明します。

なぜ @expo/vector-icons は推奨されなくなったのか

歴史的背景

最初に @expo/vector-icons を作成したとき、react-native-vector-icons の便利なラッパーとして、Expo プロジェクトでシームレスに動作するように設計しました。expo-font を使ってアイコンフォントを動的に読み込み、フォントがネイティブにバンドルされていない場合でも、開発ビルド、OTA アップデート、Expo Go で機能するようにしていました。Expo は @expo/vector-icons が作られて以来大きく進化しています。

エイリアスによる複雑化

サードパーティライブラリが react-native-vector-icons をインポートして利用するのをサポートするために、Babel（または現在は Metro）を使ってこれを @expo/vector-icons にエイリアスしていました。これが不必要な複雑さとメンテナンス負荷を生んでいます。

Expo のコア関心事ではない

サードパーティのアイコンフォントをラップするパッケージを維持することは、Expo が注力すべきプラットフォームレベルの機能とは一致しません。エコシステムを複製するのではなく、強化したいと考えています。

より良い選択肢: 直接 @react-native-vector-icons のパッケージを使う

react-native-vector-icons（非推奨のパッケージ）と混同しないように注意してください。@react-native-vector-icons の最新バージョン群は expo-font と直接統合され、必要に応じてネイティブのフォント読み込み API を呼び出すようになっています。これらの新しいパッケージは、Expo Go、開発ビルド、すべてのプラットフォームで動作します。そのため、ラッパーは不要になり、将来的に @expo/vector-icons は deprecate する予定です。

移行のメリット

• 新機能
  • Lucide のように、@expo/vector-icons では利用できなかったアイコンセットを含め、最新のアイコンセットバージョンにアクセスできます。
  • ジェネレーターを使って独自のアイコンセットを作るのが簡単になります。
  • createIconSetFromFontello や createIconSetFromIcoMoon を使う場合、アイコン名の型チェックが可能になります。
• バンドルサイズの削減
  • アプリが実際には 1〜2 個しか使っていないのに、すべてのアイコンフォントを誤ってバンドルしてしまう可能性があります。@expo/vector-icons から移行することでこの肥大化を防げます。再現用のアプリでは、インポートと package.json の依存関係を変更するだけで、出荷バンドルおよびアセットのペイロードサイズを約 4 MB 削減できました。
• プロジェクト設定の簡素化
  • エイリアス設定が不要になります。
  • アイコンパッケージの真の単一ソースになります。
  • バージョンの乖離や予期せぬ動作のリスクが減ります。

アプリを移行する方法

• プロジェクト内で npx @react-native-vector-icons/codemod を実行し、出力を確認してください。
• npx expo doctor を実行して、プロジェクトに @expo/vector-icons や react-native-vector-icons が残っていないことを確認してください。
• expo-font がインストールされ、適切に設定されていることを確認してください。node_modules/@react-native-vector-icons/ からのフォントパスを expo-font の config plugin に追加しないでください。これを行うとビルドエラーになります。
• カスタムアイコンを確認する
  • もし createIconSetFromIcoMoon などのヘルパーに依存していた場合は、カスタムフォントやアイコンが正しく動作するかを再確認してください。

注意すべき潜在的な問題

• アイコンフォントの競合

  • プロジェクトやその依存関係が異なるベクターアイコンパッケージ（例: @expo/vector-icons, react-native-vector-icons, @react-native-vector-icons/some-font）や同じパッケージの複数バージョンを使っている場合、同じフォントを別パッケージ経由でレンダリングしようとすると予期しない動作が発生することがあります。たとえば、同じフォントを別パッケージでレンダリングすると、アイコンが ? や空の四角で表示されることがあります。
  • これらの問題を防ぐため、@react-native-vector-icons スコープの新しいパッケージと @expo/vector-icons または react-native-vector-icons を混在させていないかをチェックする doctor の警告を追加しました。

• 広範な利用状況

  • 現在、EAS Build 上のアプリの約 60% が @expo/vector-icons を含んでいます。この変更は多くのプロジェクトに影響することを認識しているため、移行を円滑にするための codemod を提供しています。さらに、ユーザーが移行する時間を確保するために、引き続き @expo/vector-icons をメンテナンスします。移行中に問題が発生したら issue を開くか、ぜひお知らせください。

最後に

この変更は多少の作業を要しますが、コードベースが簡素化され、ビルドがより予測可能になり、バイナリが小さくなる可能性があります。これは、Expo をモダンで最良のモバイルアプリ構築・デプロイ手段にするための段階的な一歩です。今後の Expo SDK のリリースで @expo/vector-icons は非推奨になり、コミュニティパッケージに完全に依存する予定です。