@expo/vector-iconsからの移行

Expo を使ったことがあるなら、@expo/vector-icons にもおそらく依存しているはずだ。そろそろ次に進むときだ。

@expo/vector-icons から、より良い代替手段への移行を勧める。各アイコンパッケージ専用の @react-native-vector-icons パッケージ の最新版だ。これらは Expo Go を含む Expo アプリを完全にサポートしている。この変更でエコシステムが簡素になり、混乱が減り、アプリのバンドルサイズも小さくできる。以下では、なぜこう勧めるのか、あなたのアプリにとって何を意味するのか、そしてどうすればスムーズに移行できるのかを説明する。

なぜ @expo/vector-icons はもう推奨されないのか

経緯

@expo/vector-icons を最初に作ったとき、私たちはこれを react-native-vector-icons の上に載せた便利なラッパーとして設計し、Expo プロジェクトとシームレスに連携するようにした。expo-font でアイコンフォントを動的に読み込むため、フォントがネイティブにバンドルされていなくても、開発ビルド、OTA アップデート、Expo Go で動作した。しかし @expo/vector-icons が生まれて以降、Expo は大きく変わった。

エイリアスが招いた複雑さ

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 SDK リリースで @expo/vector-icons を非推奨にする。

移行のメリット

• 新機能

  • 最新のアイコンセットが使える。@expo/vector-icons にはないアイコンセットも含む。たとえば Lucide。

  • ジェネレーターで独自のアイコンセットを作るのが簡単になる。

  • createIconSetFromFontello や createIconSetFromIcoMoon を使うとアイコン名を型チェックできる

• アプリのバンドルサイズ削減

  • アイコンを 1 つか 2 つしか使っていなくても、アプリがすべてのアイコンフォントを意図せずバンドルしてしまうことがある。@expo/vector-icons から離れることは、こうした冗長さの削減に役立つ。私たちの再現アプリでは、import 文 1 行と package.json の依存 1 つを変えただけで、リリースバンドルとアセットのサイズが約 4 MB 減った。

• よりクリーンなプロジェクト設定

  • エイリアス設定が不要になる

  • アイコンパッケージの出所が 1 つになる

  • バージョンのずれや予期しない挙動のリスクが下がる

アプリの移行手順

@expo/vector-icons の import を @react-native-vector-icons に自動で書き換える codemod を用意した。

• プロジェクトで 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 を非推奨にし、コミュニティパッケージに完全に依存するようになる。