UI组件移动开发【免费下载链接】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点击查看免费下载本指南以 packages/fontisto/CHANGELOG.md 为骨架梳理 Fontisto 图标包从 12.0.0 到 13.1.2 的完整版本演进脉络并结合 packages/fontisto 目录下的源码、构建配置与文档深入讲解该包的安装方式、动态/静态两种加载模式、Expo Config Plugin 配置以及各版本变更背后的实现细节。读完本文你将能够理解 Fontisto 包各版本变更的技术含义正确地在 React Native 与 Expo 项目中安装、配置和使用Fontisto /图标组件并掌握 12.0.0 破坏性变更字体拷贝责任转移对项目集成方式的实际影响。一、包定位Fontisto 在 react-native-vector-icons 生态中的角色Fontisto 是一套包含 600 图标的免费开源字体图标集其图标命名风格以语义化单词为主如house、apple、instagram。在本仓库中它被封装为独立发布的 npm 包react-native-vector-icons/fontisto属于 monorepopnpm workspace下的子包之一。从 packages/fontisto/package.json 可以看到该包的运行时依赖仅为react-native-vector-icons/commonworkspace 版本核心组件由公共包中的createIconSet工厂函数生成字体文件与字形映射glyphmap随包发布字体文件packages/fontisto/fonts/Fontisto.ttf字形映射packages/fontisto/glyphmaps/Fontisto.jsonCHANGELOG 中反复出现的“Updated react-native-vector-icons/common to x.y.z”正是这种依赖关系的直接体现字体包本身不实现渲染逻辑所有渲染、图片源生成、动态加载能力都来自common包Fontisto 包只负责提供字形数据与字体资源。版本号对应关系CHANGELOG 所在包的 README.md 明确说明在版本 12 之前字体包的版本号跟随上游 Fontisto 版本而从 12.0.0 开始版本号改为跟随 react-native-vector-icons 主版本。当前对应关系为RNVI 版本上游 Fontisto 版本 12.0.03.0.4上游版本 3.0.4 也可在 package.json 的devDependencies中确认fontisto: 3.0.4该依赖用于在本地开发时校验/生成字形数据。二、版本演进全景从 12.0.0 到 13.1.2 的变更解读本节按时间倒序梳理 CHANGELOG.md 中的全部版本条目并将每类变更与仓库源码对应起来。2.1 13.1.22026-05-24依赖对齐 将react-native-vector-icons/common更新至 13.0.1。此版本无字体或功能变更属于纯依赖对齐发布确保 Fontisto 包与 common 包新版本含缺陷修复保持一致。2.2 13.1.12026-04-23Expo 插件导出修复 修复 expo plugin 导出问题贡献者 Vojtech Novak。该问题影响 Expo 用户在app.json的plugins数组中按包名引用插件的方式。修复后插件可通过react-native-vector-icons/fontisto的 package exports 正确解析到 app.plugin.js。该文件对应的导出声明见 package.json 中的./app.plugin.js: ./app.plugin.js。2.3 13.1.02026-04-12新增 Expo Config Plugin 新增 expo config plugins贡献者 Vojtech Novak。这是 Fontisto 包支持 Expo 托管工作流的关键版本。插件的实现逻辑位于 packages/fontisto/app.plugin.js它通过expo/config-plugins的withInfoPlist钩子将Fontisto.ttf追加到 iOS 工程的UIAppFonts数组中从而在 Expo 预构建prebuild阶段自动完成 iOS 字体注册const { withInfoPlist } require(expo/config-plugins); module.exports (config) withInfoPlist(config, (c) { const fonts [Fontisto.ttf]; c.modResults.UIAppFonts [...new Set([...(c.modResults.UIAppFonts || []), ...fonts])]; return c; });在 README.md 中Expo 用户只需在app.json或app.config.js中声明{ expo: { plugins: [react-native-vector-icons/fontisto] } }注意package.json 将expo/config-plugins声明为可选 peerDependencyoptional: true即非 Expo 项目无需安装它也不会产生依赖冲突。2.4 13.0.02026-03-26common 主版本升级 将react-native-vector-icons/common更新至 13.0.0。主版本号升级通常意味着 common 包存在破坏性变更但字体包本身 APIFontisto namehouse ... /保持不变用户侧的破坏性影响取决于 common 包的具体变更内容。2.5 12.5.02026-03-20静态导出 暴露图标族的静态导出static export贡献者 Vojtech Novak。此版本引入了react-native-vector-icons/fontisto/static子路径导出。对应的源码为 packages/fontisto/src/static.ts其与动态加载入口 packages/fontisto/src/index.ts 的核心差异在于静态版本调用createIconSet时不传入fontSource不require字体文件字体依赖由原生侧iOS Info.plist / Android 字体资源 / Expo 插件预先注册而动态版本通过require(../fonts/Fontisto.ttf)让 common 包在运行时按需加载字体。两种模式的完整对比见本文第四节。2.6 12.4.3 / 12.4.2 / 12.4.12026-02~03修复与生成器改进12.4.3更新 common 至 12.4.2。12.4.2生成器在生成过程中自动更新.yo-rc.json中的上游版本号贡献者 John Ferlito并更新 common 至 12.4.1。这与仓库中 packages/generator-react-native-vector-icons 的模板生成体系相关——Fontisto 的 src/index.ts 顶部注释明确标注该文件由generator-react-native-vector-icons/src/app/templates生成手工修改会被覆盖。12.4.1新增targetSdkVersion以避免READ_PHONE_STATE权限问题贡献者 Phecda Su。该修复位于 Android 构建配置层避免字体包在部分 Android 场景下被意外要求该权限。2.7 12.4.02025-11-01生成体系升级 将 FontAwesome 升级到 v7 并采用新包结构贡献者 John Ferlito。 更新 common 至 12.4.0。该变更虽然针对 FontAwesome但属于整体生成器/包结构升级的一部分Fontisto 包随之获得 common 12.4.0 的能力。2.8 12.3.02025-08-03导出字体文件与字形映射 导出字体文件和 glyphmaps贡献者 Vojtech Novak。此版本在 package.json 中新增了两个子路径导出规则允许使用者直接引用原始资源./glyphmaps/*.json: ./glyphmaps/*.json, ./fonts/*.ttf: ./fonts/*.ttf这意味着开发者可以import glyphMap from react-native-vector-icons/fontisto/glyphmaps/Fontisto.json直接拿到字形表如用于自定义图标映射、搜索图标名称或直接引用字体文件如 Web 端font-face使用。2.9 12.2.02025-07-20支持 React Server Components 为 RSC 添加use client指令贡献者 Vojtech Novak。在 src/index.ts 和 src/static.ts 的首行均可看到use client;该指令使图标组件在 Next.js 等 RSCReact Server Components环境中被正确识别为客户端组件避免服务端渲染时引用 React Native 原生模块导致报错。2.10 12.1.02025-07-12导出图标名类型 导出图标名称的类型贡献者 John Ferlito。对应源码为 src/index.ts 与 src/static.ts 中的export type FontistoIconName keyof typeof glyphMap;FontistoIconName由字形映射 JSON 的键推导而来为name属性提供编译期校验杜绝手写错别字导致运行时空白图标的问题。注意该类型导出位于根入口但static子路径同样导出同名类型。2.11 12.0.2 / 12.0.12025-06多端修复12.0.2新增 Ion Icons无字体变更更新 common 至 12.0.2贡献者 John Ferlito。12.0.12025-06-15包含一组修复尝试使用根项目的 compileSdk避免 aar 元数据不兼容贡献者 Alexander Kucheryavenko移除 fortawesome 仓库泄漏贡献者 John Ferlito将目录脚本转换为 TypeScript贡献者 Md. Jayed Hasan修正 CHANGELOG 中错误的回链ionicons 升级至 8.0.8更新 common 至 12.0.1。2.12 12.0.02025-05-04破坏性变更——字体拷贝责任转移这是 Fontisto 包以及所有字体包历史上最重要的转折点包含⚠️破坏性变更让字体包自己负责字体拷贝PR 相关条目 #1711在 12.0.0 之前字体文件的拷贝/链接由中心化的脚本统一处理此后每个字体包必须自带字体文件并通过自身机制完成原生侧注册。这也解释了为何 packages/fontisto/fonts/Fontisto.ttf 直接随包发布以及为何需要 podspec 与 Expo 插件来声明字体资源。 新增 lucide 图标生成器层面的图标族扩充。 octicons 升级至 19.14.0、fontawesome6 升级至 6.7.2、glyphmap 脚本中的 macOS 检测修复贡献者 Chanphirom Sok、John Ferlito。字体拷贝责任转移后各平台的注册方式如下平台字体注册机制仓库依据iOS / tvOS / visionOSpodspec 的s.resources fonts/*.ttfreact-native-vector-icons-fontisto.podspecAndroid原生包与清单声明VectorIconsFontistoPackage.kt 与 AndroidManifest.xmlExpoConfig Plugin 写入UIAppFontsapp.plugin.jsWindowscreateIconSet内部的/Assets/{font}#{postScriptName}路径拼接create-icon-set.tsx三、安装与快速上手3.1 安装README.md 给出的安装命令为npm install react-native-vector-icons/fontisto使用 pnpm 或 yarn 的项目对应执行pnpm add/yarn add。包要求 Node.js 18见 package.json。3.2 基础用法import { Fontisto } from react-native-vector-icons/fontisto; // ... Fontisto namehouse color#ff0000 size{20} /组件属性继承自 React Native 的TextProps见 create-icon-set.tsx 中IconPropsT的定义常用属性包括属性类型默认值说明nameFontistoIconName必填图标名如house编译期类型校验sizenumberDEFAULT_ICON_SIZE图标尺寸pxcolorTextStyle[color]DEFAULT_ICON_COLOR图标颜色innerRefRefText-透传到底层Text的 ref其他TextProps-style、onPress等文本属性均可用size与color的默认值定义在 packages/common/src/defaults.ts。createIconSet返回的组件还附带getImageSource异步与getImageSourceSync同步两个静态方法用于把图标转换为图片源供Image、TabBar等场景使用详见 create-icon-set.tsx 与 packages/common/src/get-image-source.ts。四、动态加载与静态加载两种模式这是 12.5.0 起最重要的使用决策两种入口对应仓库中两个独立源文件对比维度动态加载react-native-vector-icons/fontisto静态加载react-native-vector-icons/fontisto/static源文件src/index.tssrc/static.ts字体来源传入fontSource: require(../fonts/Fontisto.ttf)由 common 包运行时加载不传fontSource依赖原生侧预注册字体适合场景需要按需/动态加载字体的应用已通过原生配置iOS Info.plist、Android 资源、Expo 插件注册字体的应用Expo 支持一般无需 Config Plugin必须配置 Expo Config Plugin见 README.md两文件的其余代码完全一致均从../glyphmaps/Fontisto.json导入字形表并以postScriptName: fontisto、fontFileName: Fontisto.ttf调用createIconSet。postScriptName与fontFileName会被 create-icon-set.tsx 用于按平台解析字体引用Windows 上拼接为/Assets/Fontisto.ttf#fontistoAndroid 上使用字体基名Fontisto其他平台iOS/macOS使用 PostScript 名fontisto。选择建议如果你在 Expo 托管项目中工作或希望字体在原生层统一管理选择静态入口 Config Plugin如果你需要 common 包提供更灵活的动态字体加载能力具体机制见 packages/common/src/dynamicLoading选择默认动态入口。五、Expo 项目集成与 iOS 字体注册原理5.1 配置步骤安装npm install react-native-vector-icons/fontisto在app.json的expo.plugins中加入react-native-vector-icons/fontisto完整示例见 README.md使用静态导入import { Fontisto } from react-native-vector-icons/fontisto/static重新执行expo prebuild/expo run:ios让插件生效。5.2 插件原理app.plugin.js 通过withInfoPlist在预构建阶段把Fontisto.ttf合并进 iOS 工程的UIAppFonts数组使用Set去重避免重复注册。这与 12.0.0 破坏性变更“字体包自己负责字体拷贝”的设计一脉相承——原生工程不再依赖全局脚本每个字体包自包含字体资源与注册逻辑。5.3 iOS 裸工程对于不使用 Expo 的裸 React Native 工程字体资源由 react-native-vector-icons-fontisto.podspec 声明s.resources fonts/*.ttf会把字体打进 framework 资源配合postScriptName: fontisto即可被UIFont按名解析。podspec 支持iosmin_ios_version_supported、tvos 9.0、visionos 1.0三个平台。5.4 AndroidAndroid 侧 VectorIconsFontistoPackage.kt 是一个空实现的原生包getModule返回null、模块表为空AndroidManifest.xml 仅声明包名com.reactnativevectoricons.fontisto——说明 Android 上的图标渲染完全走字体 Text组件路径不需要任何原生模块参与。六、版本升级注意事项结合 CHANGELOG从旧版本升级时需重点关注跨越 12.0.0 的升级是破坏性的字体拷贝责任已转移升级后请确认字体文件随包正常安装iOS/Expo 项目需重新运行pod install或expo prebuild确保Fontisto.ttf被正确注册。选择正确的导入路径12.5.0 之前只有根入口需要使用静态模式时请升级到 12.5.0 并导入react-native-vector-icons/fontisto/static。保持 common 包同步Fontisto 包几乎每个版本都随 common 包更新如 13.1.2 → common 13.0.1、12.4.3 → common 12.4.2建议通过 npm 的依赖解析整体升级避免版本错配导致动态加载行为不一致。RSC 环境12.2.0 已内置use client指令若在 Next.js 等 RSC 项目中使用请确保版本不低于 12.2.0。图标名类型12.1.0 可导入FontistoIconName获得编译期图标名校验升级后若出现既有图标名报错说明该图标不在当前 glyphmap 中可对照 glyphmaps/Fontisto.json 核对。七、参与维护与源码生成说明Fontisto 包的所有源码src/index.ts、src/static.ts、app.plugin.js、podspec均为生成文件文件头部注释明确指出如需修改应改到 packages/generator-react-native-vector-icons 的模板src/app/templates中再通过生成流程重建直接修改会被覆盖。CHANGELOG 12.4.2 中“生成器自动更新.yo-rc.json上游版本”的改进正是为了让这套生成体系在升级上游字体版本时保持元数据同步。构建发布流程见 package.jsonprepare阶段执行bob buildreact-native-builder-bob 多目标构建 commonjs/module/typescript配置见同文件react-native-builder-bob字段并运行根目录 scripts/fix-glyphmaps.mjs 修复字形映射格式。社区贡献流程与开发工作流参见仓库根目录 CONTRIBUTING.md。八、常见问题速查图标显示为空白或方块通常是字体未注册。检查是否使用了正确的加载模式——静态模式必须配置 Expo 插件或原生字体注册动态模式确认fontSource加载成功。Expo 预构建后字体未生效确认app.json的plugins已加入react-native-vector-icons/fontisto且包版本 13.1.0插件功能引入版本13.1.1 修复了导出问题。TypeScript 报 name 类型错误确认图标名存在于 glyphmaps/Fontisto.json或改用类型收窄后的as FontistoIconName。需要直接引用字体/字形文件使用 12.3.0 提供的react-native-vector-icons/fontisto/fonts/Fontisto.ttf与react-native-vector-icons/fontisto/glyphmaps/Fontisto.json子路径。总结Fontisto 包在 12.0.0 → 13.1.2 的演进中完成了从“集中式字体拷贝”到“字体包自包含”的架构转型并逐步补齐了 Expo 插件13.1.x、静态导出12.5.0、RSC 支持12.2.0与类型导出12.1.0等现代化能力。理解这份 CHANGELOG 背后的源码实现——createIconSet工厂、双入口加载模式、Config Plugin 与 podspec 的字体注册机制——能帮助你在各种工程形态下稳定地集成 Fontisto 图标并顺畅完成跨版本升级。赞分享UI组件移动开发【免费下载链接】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点击查看免费下载相关推荐React Native Vector Icons源码解析理解图标渲染原理React Native Vector Icons源码解析理解图标渲染原理 想要深入理解React Native Vector Icons的图标渲染机制吗本UI组件移动开发【小白入门】React Native Vector Icons 安装配置完全攻略【小白入门】React Native Vector Icons 安装配置完全攻略 项目基础介绍 React Native Vector Icons 是一个广受UI组件移动开发2024终极指南React Native Vector Icons快速集成与样式定制全攻略2024终极指南React Native Vector Icons快速集成与样式定制全攻略 React Native Vector Icons是一款为ReacUI组件移动开发上一篇Elvish高级编程技巧闭包、高阶函数和函数式编程实践下一篇Ecoute故障排除手册常见问题与解决方案完整清单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考