在 React Native 中使用 Evil Iconsreact-native-vector-icons/evil-icons 字体包完整指南【免费下载链接】react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.项目地址: https://gitcode.com/gh_mirrors/re/react-native-vector-iconsEvil Icons 是一套线条风格stroke-based的图标字体本文以仓库中的 packages/evil-icons/README.md 为主线系统讲解react-native-vector-icons/evil-icons的安装、动态/静态两种导入方式、Expo 配置插件接入并结合仓库源码createIconSet实现、glyphmap、Android 原生包深入说明其底层工作原理。读完本文你将能够在 React Native 与 Expo 项目中正确、高效地集成 Evil Icons并理解两种字体加载策略的取舍。一、Evil Icons 字体包是什么Evil Icons 是 react-native-vector-icons 生态中面向 Evil Icons 字体上游版本 1.10.1的独立包。与直接依赖整个 react-native-vector-icons 不同当前仓库采用每个图标集一个独立 npm 包的 monorepo 结构react-native-vector-icons/evil-icons即对应 packages/evil-icons 目录包内包含fonts/EvilIcons.ttf字体文件本体glyphmaps/EvilIcons.json图标名到 Unicode 码点的映射表共 72 个图标src/index.ts/src/static.ts动态加载与静态加载两种入口app.plugin.jsExpo 配置插件android/用于 autolinking 注册的原生包。从 package.json 可以看到该包要求node 18.0.0peerDependencies 为react、react-native以及可选的expo/config-plugins 10.0.0仅在使用 Expo 配置插件时需要。当前仓库中该包版本为 13.1.2。二、安装在 React Native 或 Expo 项目中执行npm install react-native-vector-icons/evil-icons包内exports字段见 package.json暴露了以下子路径均可直接引用子路径用途react-native-vector-icons/evil-icons默认入口动态加载字体react-native-vector-icons/evil-icons/static静态入口配合原生构建react-native-vector-icons/evil-icons/glyphmaps/*.json图标映射表 JSONreact-native-vector-icons/evil-icons/fonts/*.ttf字体文件react-native-vector-icons/evil-icons/app.plugin.jsExpo 配置插件三、基础用法最简单的用法是从默认入口导入组件并渲染import { EvilIcons } from react-native-vector-icons/evil-icons; // ... EvilIcons namehouse color#ff0000 size{20} /该 README 还给出了两种入口的取舍建议// 静态导入推荐用于开发构建避免字体被打包两次 import { EvilIcons } from react-native-vector-icons/evil-icons/static; // 或使用动态字体加载默认入口参见 Expo 配置指南 import { EvilIcons } from react-native-vector-icons/evil-icons;组件的核心 props 与 react-native-vector-icons 保持一致name图标名、color颜色可传任何TextStyle[color]、size字号。此外还支持style、children、allowFontScaling默认false与innerRef等属性完整定义见 packages/common/src/create-icon-set.tsx 中的IconProps。3.1 图标命名与 glyphmapname的可选值来自 glyphmaps/EvilIcons.json共 72 个图标例如archive、arrow-down、arrow-left、arrow-right、arrow-up、bell、calendar、camera、cart、chart、check、chevron-down、chevron-left、chevron-right、chevron-up、clock、close、close-o、comment、credit-card、envelope、exclamation、external-link、eye、gear、heart、image、like、link、location、lock、minus、navicon、paperclip、pencil、play、plus、pointer、question、redo、refresh、retweet、sc-facebook、sc-github、sc-google-plus、sc-instagram、sc-linkedin、sc-odnoklassniki、sc-pinterest、sc-skype、sc-soundcloud、sc-telegram、sc-tumblr、sc-twitter、sc-vimeo、sc-vk、sc-youtube、search、share-apple、share-google、spinner、spinner-2、spinner-3、star、tag、trash、trophy、undo、unlock、user、house。映射表中每个图标名对应一个十进制的 Unicode 码点如house: 61696即 UF100。在渲染时createIconSet内部通过resolveGlyph将码点转换为字符String.fromCodePoint(glyph)未知名称则回退为?实现见 packages/common/src/create-icon-set.tsx。3.2 TypeScript 类型支持两个入口文件都会导出图标名联合类型export type EvilIconsIconName keyof typeof glyphMap;见 src/index.ts 与 src/static.ts。这意味着nameprop 会获得完整的类型提示与编译期校验拼写错误的图标名会在编译阶段被拦截。四、默认入口动态加载与静态入口/static如何选择这是本 README 引出的核心话题完整决策背景见 docs/SETUP-EXPO.md默认入口动态加载src/index.ts中createIconSet的配置带有fontSource: require(../fonts/EvilIcons.ttf)见 src/index.tsMetro 会把.ttf作为 JS 资源打进 bundle。图标首次渲染时运行时通过expo-font底层是react-native-vector-icons/common的dynamicLoader将字体注册到原生文本系统无需任何原生配置。这是唯一能在 Expo Go 中工作的方式且字体可以随 OTA 更新。前提是 Expo SDK 52。静态入口/staticsrc/static.ts不携带fontSource见 src/static.tsMetro 不会打包.ttf。字体由 autolinking 在构建期通过每个包的build.gradle/.podspec拷贝进原生二进制再由 Expo 配置插件把它注册进 iOS 的Info.plistUIAppFonts。该方式只适用于 Development Build不适用于 Expo Go且内嵌字体无法通过 OTA 更换。[!NOTE] 如果只使用默认入口、但又在开发构建中启用了 autolinking同一个.ttf会同时以 JS 资源与原生资源两种方式进入包体造成体积翻倍此时要么改用/static要么在 autolinking 中排除该包只保留 JS 侧副本。关于动态加载react-native-vector-icons/common还导出了控制函数isDynamicLoadingEnabled()、isDynamicLoadingSupported()、setDynamicLoadingEnabled()与setDynamicLoadingErrorCallback()可用于检测/开关动态加载能力或在 OTA 更新缺失字体时捕获错误。五、Expo Config Plugin 配置如果你使用静态导入/static并在 Expo 开发构建中运行需要在app.json或app.config.js的plugins数组中注册本包的配置插件{ expo: { plugins: [react-native-vector-icons/evil-icons] } }配置完成后执行npx expo prebuild重新生成原生工程。插件实现见 app.plugin.js它基于expo/config-plugins的withInfoPlist把EvilIcons.ttf追加到UIAppFonts数组c.modResults.UIAppFonts从而让 iOS 在应用启动时加载该字体。注意本插件只负责 iOS 侧注册Android 侧由 autolinking 直接处理字体拷贝。[!WARNING] 不要重复配置不要再把node_modules/react-native-vector-icons/evil-icons/fonts/EvilIcons.ttf手动加入expo-font的 config plugin 配置否则会造成字体配置重复。六、底层实现createIconSet 如何工作两个入口都基于react-native-vector-icons/common的createIconSet工厂函数构建packages/common/src/create-icon-set.tsx。其核心逻辑包括字体引用解析根据平台生成fontFamily引用——Windows 为/Assets/{fontFileName}#{postScriptName}Android 为字体文件名去扩展名其余平台使用postScriptName见fontReference的Platform.selectcreate-icon-set.tsx。样式覆盖强制fontFamily: fontReference、fontWeight: normal、fontStyle: normal防止父级文本样式破坏图标字形。动态字体加载当存在fontSource且动态加载开启时首次渲染通过dynamicLoader.loadFontAsync异步加载字体加载完成前渲染空字符以避免豆腐块create-icon-set.tsx。图像源 API组件命名空间上还挂载了getImageSource异步与getImageSourceSync同步两个静态方法可把图标转为图片源对象用于Image组件、TabBarIcon等场景内部走create-icon-source-cache缓存。也就是说EvilIcons namehouse size{20} color#ff0000 /最终渲染为一个设置了对应fontFamily与字形字符的Text节点。七、Android 侧原生注册android/目录下提供了用于 autolinking 的原生包VectorIconsEvilIconsPackage.kt。它继承BaseReactPackage但getModule返回null、getReactModuleInfoProvider返回空映射——从源码结构看这是一个占位包主要作用是让 autolinking 发现并保留该包的原生构建产物字体拷贝配置本身不注册任何原生模块。因此在纯 JS 渲染场景如默认动态加载下即使不依赖该原生包也能正常工作静态加载场景则依赖 autolinking 在构建期完成字体拷贝。八、版本对应关系README 明确说明在 12.0.0 版本之前字体包的版本号直接跟随上游 Evil Icons 版本12.0.0 之后改为跟随 react-native-vector-iconsRNVI版本体系。当前对应关系如下RNVI 版本上游 Evil Icons 版本 12.0.01.10.1仓库中 package.json 的 devDependencies 锁定evil-icons: 1.10.1与表格一致字体生成流程由根目录 scripts/generate-fonts.sh 与字体包生成器packages/generator-react-native-vector-icons协作完成相关演进记录可查看 packages/evil-icons/CHANGELOG.md如 12.0.0 起字体包负责字体拷贝、12.3.0 起导出字体文件与 glyphmaps、13.1.0 起加入 Expo 配置插件。九、更多平台与后续参考不使用 Expo 的纯 React Native 工程请参考 docs/SETUP-REACT-NATIVE.mdWeb 端集成方式见 docs/SETUP-WEB.md自定义字体含 FontAwesome Pro 等 Pro 字体需通过createIconSet配合fontSource实现详见 README.md仓库的整体架构与全部字体包列表见根目录 README.md参与开发请遵循 CONTRIBUTING.md 中的工作流。十、总结react-native-vector-icons/evil-icons是一个高度工程化的字体包默认入口借助动态字体加载做到开箱即用、Expo Go 可用、支持 OTA静态入口配合 Expo 配置插件与 autolinking 做到原生打包、无 JS 资源冗余。理解createIconSet的字体引用解析与resolveGlyph字形映射机制能帮助你在渲染异常、字体重复打包等场景下快速定位根因并根据 Expo/纯 RN、Expo Go/Development Build 的不同组合选择正确的导入方式。【免费下载链接】react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.项目地址: https://gitcode.com/gh_mirrors/re/react-native-vector-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考