DocsDigest
Back to listLanguage: JA
OpenAIExpoJun 9, 2026, 1:15 PM

Moving away from @expo/vector-icons

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Moving away from @expo/vector-icons

exporeact-nativeiconscodemodexpo-fontbundle-size

Key Points

  • Switch to @react-native-vector-icons scoped packages
  • Run codemod: npx @react-native-vector-icons/codemod
  • Expect smaller bundles and no aliasing

Summary

Expo recommends switching from @expo/vector-icons to the icon-pack-specific @react-native-vector-icons packages. The newer scoped packages integrate with expo-font, work in Expo Go and dev builds, reduce bundle size, and remove the need for aliasing.

Key Points

  • Recommendation: replace imports from @expo/vector-icons with the corresponding packages under the @react-native-vector-icons scope.
  • Benefits:
    • Access latest icon sets (e.g., Lucide) and newer features.
    • Smaller shipped bundles by avoiding accidentally bundling all icon fonts.
    • Simpler project setup with no Babel/Metro aliasing and fewer version drift risks.
  • Migration steps:
    • Run the automated codemod: npx @react-native-vector-icons/codemod and inspect changes.
    • Run npx expo doctor to ensure @expo/vector-icons or react-native-vector-icons are removed.
    • Ensure expo-font is installed and configured; do NOT add font paths from node_modules/@react-native-vector-icons/ to the expo-font config (this causes build errors).
    • Verify any custom icons created with createIconSetFromIcoMoon/Fontello remain functional.
  • Potential issues to watch for:
    • Icon font conflicts when mixing packages or versions can render icons as ? or empty squares.
    • A doctor warning will surface mixing of new @react-native-vector-icons packages with old packages.
  • Compatibility and timeline:
    • The new scoped packages work in Expo Go, dev builds, and across platforms.
    • @expo/vector-icons will be maintained for a migration period but will be deprecated in a future Expo SDK release.

Actionable checklist for engineers

  • Run npx @react-native-vector-icons/codemod and review diffs.
  • Confirm expo-font is present and remove any incorrect node_modules font paths from font config.
  • Run npx expo doctor and fix any mixing warnings.
  • Test app in Expo Go / dev build and check icon rendering across dependencies.
  • Open an issue with Expo if you encounter migration problems.

Bottom line

Migrating is straightforward with the provided codemod and yields cleaner projects, more predictable builds, and often smaller binaries. Plan to migrate before the future deprecation of @expo/vector-icons.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

@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 は非推奨になり、コミュニティパッケージに完全に依存する予定です。

Moving away from @expo/vector-icons | Expo | DocsDigest