Почему стоит перейти на другие библиотеки иконок
Переход с @expo/vector-icons на официальные пакеты @react-native-vector-icons уменьшает размер вашего бандла на 4 МБ или более. Теперь Expo рекомендует внести это изменение.
Старый @expo/vector-icons был оберткой. Он помогал иконкам работать с Expo Go и обновлениями «по воздуху» (over-the-air). Однако эта обертка усложняла систему. Чтобы всё работало, Expo приходилось использовать трансформации Babel, что создавало дополнительную нагрузку на поддержку.
Новые пакеты работают иначе. Они напрямую интегрируются с expo-font и используют нативные API загрузки шрифтов. Это означает, что они работают в Expo Go, сборках для разработки (development builds) и в готовых приложениях.
Преимущества перехода:
- Меньшие бандлы: наше тестовое приложение уменьшилось на 4 МБ после изменения импортов.
- Более современные наборы иконок: вы получаете доступ к таким наборам, как Lucide.
- Лучшие инструменты: вы можете проверять типы имен иконок.
- Более чистая настройка: вам больше не нужны сложные конфигурации алиасов.
Как выполнить миграцию:
- Запустите codemod: используйте
npx @react-native-vector-icons/codemodв корне вашего проекта. - Проверьте изменения: запустите
npx expo doctor, чтобы найти старые пакеты. - Проверьте
expo-font: убедитесь, что он установлен и настроен. Не добавляйте пути к шрифтам изnode_modulesнапрямую в config plugin.
Будьте осторожны со следующими проблемами:
- Конфликты шрифтов: смешивание старых и новых пакетов приводит к появлению пустых квадратов или вопросительных знаков.
- Проблемы с зависимостями: некоторые библиотеки ожидают старые названия. Если вы видите ошибки, проверьте свои зависимости.
Expo объявит @expo/vector-icons устаревшим (deprecated) в одном из будущих релизов. Переход на новые пакеты сейчас упростит ваш проект и повысит его производительность.
Источник: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n