概要
公開日: 2026-06-09
翻訳生成に失敗したため、原文をそのまま保存しています。
原文
If you've used Expo, chances are you've relied on @expo/vector-icons. It's time to move on. We recommend switching from @expo/vector-icons to a better alternative: the latest versions of icon-pack-specific @react-native-vector-icons packages that fully support Expo apps, including Expo Go. This change simplifies the ecosystem, reduces confusion, and can shrink your app bundle size. In this post, we'll explain why we're making this recommendation, what it means for your app, and how to migrate smoothly. Why @expo/vector-icons is no longer the recommended solution Historical context When we first created @expo/vector-icons, we built it as a convenience wrapper around react-native-vector-icons, designed to work seamlessly with Expo projects. It uses expo-font to dynamically load icon fonts, enabling functionality in development builds, OTA updates, and Expo Go—even when fonts weren't bundled natively. Expo has evolved immensely since @expo/vector-icons was created. Aliasing complexity To support third-party libraries that import and use react-native-vector-icons, we aliased it to @expo/vector-icons using Babel (or now Metro). This creates unnecessary complexity and maintenance burden. Not a core Expo concern Maintaining a package that wraps third-party icon fonts doesn't align with Expo's focus on platform-level capabilities. We want to empower the ecosystem, not duplicate it. The better path: Use packages from @react-native-vector-icons directly The latest versions of packages in @react-native-vector-icons (not to be confused with the deprecated react-native-vector-icons package) now integrate directly with expo-font and call its native font loading API when needed. These new packages work in all important contexts—Expo Go, dev builds, and across all platforms. Therefore, there's no longer any need for a wrapper and we will be deprecating @expo/vector-icons in a future release of Expo SDK. Benefits of the migration - New features - Access to latest icon set versions, including icon sets that weren't available in @expo/vector-icons, such as Lucide. - Easier to create your own icon sets using the generator. - Ability to type-check icon names when using createIconSetFromFontello or createIconSetFromIcoMoon - Smaller app bundle size - Apps may accidentally bundle all icon fonts, even if they only use one or two. Moving away from @expo/vector-icons helps reduce this bloat. In our repro app we cut the shipped bundle and asset payload size by around 4 MB just by changing an import statement and a package.json dependency. - Cleaner project setup - No more aliasing configuration - One source of truth for icon packages - Less risk of version drift or unexpected behavior How to migrate your app We've built a codemod that automatically updates your imports from @expo/vector-icons to @react-native-vector-icons: - Run npx @react-native-vector-icons/codemod in your project and verify the output. - Run npx expo doctor to verify that @expo/vector-icons or react-native-vector-icons have not remained in your project. - Ensure expo-font is installed and properly configured. Do not add the paths to fonts from node_modules/@react-native-vector-icons/ to expo-font config plugin. This will result in a build error. - Verify your custom icons (if any) - Double-check any custom fonts or icons you're using—especially if you previously relied on createIconSetFromIcoMoon or similar helpers. Potential issues to watch for - Icon font conflicts If your project or its dependency uses different vector icon packages (such as @expo/vector-icons, react-native-vector-icons and @react-native-vector-icons/some-font) or several versions of the same package, you might encounter unexpected behavior when you try to render an icon from the same font across different packages. For example, rendering the same font across different packages may result in icons rendering as ? or as empty squares. To prevent these issues from happening, we have added a doctor warning that checks