Por Que Você Deve Mudar de Bibliotecas de Ícones
Mudar do @expo/vector-icons para os pacotes oficiais do @react-native-vector-icons reduz o tamanho do seu bundle em 4MB ou mais. A Expo agora recomenda essa mudança.
O antigo @expo/vector-icons era um wrapper. Ele ajudava os ícones a funcionarem com o Expo Go e atualizações over-the-air. No entanto, esse wrapper adicionava complexidade. A Expo precisava usar transformações do Babel para fazê-lo funcionar. Isso gerava trabalho extra de manutenção.
Os novos pacotes funcionam de forma diferente. Eles se integram diretamente ao expo-font. Eles utilizam APIs nativas de carregamento de fontes. Isso significa que funcionam no Expo Go, em builds de desenvolvimento e em aplicativos de produção.
Benefícios da mudança:
- Bundles menores: Nosso aplicativo de teste diminuiu 4MB após a alteração dos imports.
- Conjuntos de ícones mais recentes: Você tem acesso a conjuntos como o Lucide.
- Melhores ferramentas: Você pode realizar o type-check dos nomes dos ícones.
- Configuração mais limpa: Você não precisa mais de configurações complexas de aliasing.
Como migrar:
- Execute o codemod: Use
npx @react-native-vector-icons/codemodna raiz do seu projeto. - Verifique a mudança: Execute
npx expo doctorpara encontrar pacotes antigos. - Verifique o expo-font: Certifique-se de que ele está instalado e configurado. Não adicione caminhos de fontes do node_modules diretamente ao config plugin.
Fique atento a estes problemas:
- Conflitos de fonte: Misturar pacotes antigos e novos causa quadrados vazios ou pontos de interrogação.
- Problemas de dependência: Algumas bibliotecas esperam os nomes antigos. Verifique suas dependências se encontrar erros.
A Expo irá descontinuar o @expo/vector-icons em uma versão futura. Fazer essa mudança agora simplifica seu projeto e melhora o desempenho.
Fonte: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n