企业官网建设流程全解析

react-native-vector-icons 接入 Font Awesome Pro Sharp Duotone Solid：字体包安装、配置与源码实现解析

【免费下载链接】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/fontawesome-pro-sharp-duotone-solid是 react-native-vector-icons 仓库（monorepo）中面向 Font Awesome Pro Sharp Duotone Solid 字体族封装的图标组件包。本文以 packages/fontawesome-pro-sharp-duotone-solid/README.md 为主线，完整讲解该包的安装、自定义字体放置、JSX 使用方式与 Expo 配置插件，并结合包内源码（src/index.ts、app.plugin.js、podspec、Android 清单）说明其底层工作原理，帮助你快速把该图标集接入 React Native 与 Expo 项目。

包概览：只封装组件，不携带字体文件

该包是 Font Awesome Pro 系列众多独立子包之一，与仓库中的fontawesome-pro-solid、fontawesome-pro-sharp-regular等包保持一致的"一个字体族一个 npm 包"结构。其最核心的设计约束在 README 的IMPORTANT区块中明确强调：

本包不包含字体文件，你必须自行提供字体文件。

原因在于 Font Awesome Pro 字体受商业授权约束，无法随开源 npm 包一起分发。因此该包只负责三件事：

1. 提供基于 glyphmap（字符映射表）生成的图标组件；
2. 定义字体文件名与 PostScript 名等元信息；
3. 通过构建期脚本与配置插件，把你的字体文件注册进 iOS/Android 原生工程。

包内已提交的构成文件（见 packages/fontawesome-pro-sharp-duotone-solid 目录）包括：src/index.ts（组件入口）、src/static.ts（静态导出入口）、glyphmaps/FontAwesomeProSharpDuotoneSolid.json（字符映射）、app.plugin.js（Expo 配置插件）、Android 的VectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt与 iOS 的 podspec，但没有fonts/目录与任何.ttf文件，这正是"自行提供字体"的直接体现。

安装

在 React Native 项目中安装该包：

npm install @react-native-vector-icons/fontawesome-pro-sharp-duotone-solid

从 package.json 看，该包以@react-native-vector-icons/common为唯一运行时依赖，react、react-native为 peerDependencies，@expo/config-plugins为可选 peerDependency（仅在 Expo 场景需要）；engines.node要求>= 18.0.0。包同时通过exports字段暴露了./static（静态导出）与./glyphmaps/*.json（字符映射 JSON）等子路径。

放置自定义字体文件（关键步骤）

由于包内没有字体，安装完成后必须手动放置字体文件。README 指定的位置为：

rnvi-fonts/fontawesome-pro-sharp-duotone-solid/fa-sharp-duotone-solid-900.ttf

即项目根目录下的rnvi-fonts/fontawesome-pro-sharp-duotone-solid/目录中，文件名固定为fa-sharp-duotone-solid-900.ttf。该文件名与组件源码中的声明严格一致——src/index.ts 中createIconSet配置了fontFileName: 'fa-sharp-duotone-solid-900.ttf'，二者必须匹配，否则运行期将找不到字体资源。

放置完成后，字体会在构建阶段被自动复制到 iOS 与 Android 工程中：

• iOS：由包内 react-native-vector-icons-fontawesome-pro-sharp-duotone-solid.podspec 完成。该 podspec 从Podfile所在目录向上寻找最近的package.json定位项目根，读取reactNativeVectorIcons.fontDir配置（默认rnvi-fonts），把rnvi-fonts/fontawesome-pro-sharp-duotone-solid/下的所有.ttf复制到 pod 自身的fonts/目录，再通过s.resources = 'fonts/*.ttf'注册为资源；若目录不存在或没有.ttf文件，会直接抛出错误提示。
• Android：由构建流程在编译期把字体复制进原生资源，与 iOS 一样自动完成，无需手工干预。

值得注意的是，fontDir目录名是可配置的：在应用的package.json中设置"reactNativeVectorIcons": { "fontDir": "你的目录名" }即可替换默认的rnvi-fonts，podspec 与 Expo 插件都会读取同一配置，保持行为一致。

基础使用：渲染图标组件

字体就位后即可在代码中使用组件：

import { FontAwesomeProSharpDuotoneSolid } from '@react-native-vector-icons/fontawesome-pro-sharp-duotone-solid'; // ... <FontAwesomeProSharpDuotoneSolid name="house" color="#ff0000" size={20} />

组件接受与 react-native-vector-icons 一致的 props：name（图标名称）、size（字号）、color（颜色），并支持其余样式属性。name的取值来自字符映射表 glyphmaps/FontAwesomeProSharpDuotoneSolid.json，该文件包含约 4791 个字形条目（含house、abacus、address-book等命名图标以及数字、字母等基础字形），图标名称均使用 Font Awesome 7 的官方命名。

组件本体定义在 src/index.ts：

export const FontAwesomeProSharpDuotoneSolid = createIconSet(glyphMap, { postScriptName: 'FontAwesome7SharpDuotone-Solid', fontFileName: 'fa-sharp-duotone-solid-900.ttf', });

createIconSet来自 @react-native-vector-icons/common，负责把 glyphmap 与字体文件绑定生成可渲染的图标组件；postScriptName: 'FontAwesome7SharpDuotone-Solid'用于原生字体定位。文件中还导出了FontAwesomeProSharpDuotoneSolidIconName类型（由keyof typeof glyphMap推导），可提供图标名称的 TypeScript 类型检查。同一文件也提供了export default默认导出作为别名。

此外，包还通过@react-native-vector-icons/fontawesome-pro-sharp-duotone-solid/static子路径暴露静态导出入口（src/static.ts），适用于需要静态图标引用（如固定资源列表）的场景。

Expo 项目：使用 Config Plugin 自动注册字体

在 Expo（含 Expo prebuild / dev client）项目中，字体不会自动进入 iOS 工程，需要通过包内置的 Expo 配置插件完成注册。在app.json或app.config.js的plugins数组中添加包名：

{ "expo": { "plugins": ["@react-native-vector-icons/fontawesome-pro-sharp-duotone-solid"] } }

执行 prebuild 或开发构建时，插件会读取rnvi-fonts/fontawesome-pro-sharp-duotone-solid/目录下的.ttf文件，并把它们追加到 iOS 工程的UIAppFonts列表中。其实现位于 app.plugin.js：

• 通过withInfoPlist修改 iOSInfo.plist；
• 从项目根package.json读取reactNativeVectorIcons.fontDir（默认rnvi-fonts）拼接字体目录；
• 目录不存在或目录内没有.ttf文件时抛出明确错误（提示参阅包 README）；
• 将找到的字体文件去重后合并进c.modResults.UIAppFonts。

该插件与 iOS podspec 读取同一套fontDir约定，因此在 React Native 裸工程与 Expo 工程间切换时无需改变字体目录结构。插件详细机制可参考仓库的 Expo 配置说明文档。

版本对应关系

README 的 Versions 一节说明：12 版本之前，该字体包的版本号跟随上游 Font Awesome 版本；而当前包（@react-native-vector-icons/fontawesome-pro-sharp-duotone-solid）采用独立版本号，与上游版本通过下表对应：

该对应关系在 CHANGELOG.md 中亦有印证：0.1.0版本引入 Font Awesome 7 的包结构重构，0.1.2版本升级到 Font Awesome 7.2.0；此后1.0.0、1.1.x等版本主要更新依赖（如@react-native-vector-icons/common）与新增 Expo 配置插件、静态导出等能力。判断某次升级对应哪个上游字体版本时，可结合本表与 CHANGELOG 交叉核对。

原生侧的实现细节

虽然包内没有原生功能模块（字体渲染仍由 react-native-vector-icons 核心完成），但包仍为 iOS/Android 提供了必要的链接骨架：

• Android：VectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt 继承BaseReactPackage，getModule返回null、getReactModuleInfoProvider返回空映射，属于纯"占位"包，配合 AndroidManifest.xml 声明包名后由 RN 自动链接机制接入；从源码结构看，其作用是保证包在 Android 侧的注册链路完整，而非提供新原生 API。
• iOS：podspec 除注册字体资源外，还声明platforms = ios / tvos 9.0 / visionos 1.0，因此支持 iOS、tvOS 与 visionOS 平台。

贡献与许可

若需为仓库贡献（例如修改包生成逻辑或模板），注意 src/index.ts 与app.plugin.js头部均注明"此文件由生成器生成，手工修改会被覆盖"，真正的修改入口在packages/generator-react-native-vector-icons的模板目录，这与 贡献指南 描述的开发流程一致。本包与整个仓库一样采用 MIT 许可（见 package.json 与 README License 一节），但请留意：MIT 仅覆盖包代码本身，Font Awesome Pro 字体文件仍受其商业授权约束，这也是字体必须自行提供的原因。

小结

接入@react-native-vector-icons/fontawesome-pro-sharp-duotone-solid的完整流程可概括为四步：安装 npm 包 → 把fa-sharp-duotone-solid-900.ttf放入rnvi-fonts/fontawesome-pro-sharp-duotone-solid/→ 在代码中引入组件渲染图标 →（Expo 项目）在plugins中注册配置插件。字体命名、目录约定与原生构建脚本环环相扣，只要保持文件路径与包内fontFileName一致，iOS/Android/Expo 三种场景均可自动完成字体注册。

【免费下载链接】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