为什么你应该更换图标库

为什么你应该更换图标库

从 @expo/vector-icons 切换到官方的 @react-native-vector-icons 包可以将您的 bundle size 减少 4MB 或更多。Expo 现在建议进行此项更改。

旧的 @expo/vector-icons 是一个封装层（wrapper）。它有助于图标在 Expo Go 和热更新（over-the-air updates）中正常工作。然而，这个封装层增加了复杂性。Expo 必须使用 Babel transforms 来使其工作，这增加了额外的维护工作。

新的包工作方式不同。它们直接与 expo-font 集成，并使用原生字体加载 API。这意味着它们可以在 Expo Go、开发构建（development builds）和生产应用中正常工作。

切换的好处：

• 更小的 bundle size：更改导入后，我们的测试应用体积减小了 4MB。
• 更新的图标集：您可以访问像 Lucide 这样的图标集。
• 更好的工具：您可以对图标名称进行类型检查（type-check）。
• 更简洁的配置：您不再需要复杂的别名（aliasing）配置。

如何迁移：

1. 运行 codemod：在项目根目录运行 npx @react-native-vector-icons/codemod。
2. 验证更改：运行 npx expo doctor 来查找旧包。
3. 检查 expo-font：确保它已安装并配置。不要直接将 node_modules 中的字体路径添加到 config plugin 中。

注意以下问题：

• 字体冲突：混合使用新旧包会导致出现空白方块或问号。
• 依赖问题：某些库可能仍在使用旧名称。如果遇到错误，请检查您的依赖项。

Expo 将在未来的版本中弃用 @expo/vector-icons。现在进行此更改可以简化您的项目并提高性能。

来源：https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n