𝗪𝗵𝘆 𝗬𝗼𝘂 𝗦𝗵𝗼𝘂𝗹𝗱 𝗦𝘄𝗶𝘁𝗰𝗵 𝗜𝗰𝗼𝗻 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀
Switching from @expo/vector-icons to the official @react-native-vector-icons packages reduces your bundle size by 4MB or more. Expo now recommends this change.
The old @expo/vector-icons was a wrapper. It helped icons work with Expo Go and over-the-air updates. However, this wrapper added complexity. Expo had to use Babel transforms to make it work. This created extra maintenance work.
The new packages work differently. They integrate directly with expo-font. They use native font loading APIs. This means they work in Expo Go, development builds, and production apps.
Benefits of switching:
- Smaller bundles: Our test app shrank by 4MB after changing imports.
- Newer icon sets: You get access to sets like Lucide.
- Better tools: You can type-check icon names.
- Cleaner setup: You no longer need complex aliasing configurations.
How to migrate:
- Run the codemod: Use npx @react-native-vector-icons/codemod in your project root.
- Verify the change: Run npx expo doctor to find old packages.
- Check expo-font: Ensure it is installed and configured. Do not add font paths from node_modules directly to the config plugin.
Watch out for these issues:
- Font conflicts: Mixing old and new packages causes empty squares or question marks.
- Dependency issues: Some libraries expect old names. Check your dependencies if you see errors.
Expo will deprecate @expo/vector-icons in a future release. Making this change now simplifies your project and improves performance.
Source: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n