解析)
react-native-vector-icons 接入 Font Awesome Pro Sharp Duotone Solid字體包安裝、配置與源碼實現(xiàn)解析【免費下載鏈接】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-iconsreact-native-vector-icons/fontawesome-pro-sharp-duotone-solid是 react-native-vector-icons 倉庫monorepo中面向 Font Awesome Pro Sharp Duotone Solid 字體族封裝的圖標(biāo)組件包。本文以 packages/fontawesome-pro-sharp-duotone-solid/README.md 為主線完整講解該包的安裝、自定義字體放置、JSX 使用方式與 Expo 配置插件并結(jié)合包內(nèi)源碼src/index.ts、app.plugin.js、podspec、Android 清單說明其底層工作原理幫助你快速把該圖標(biāo)集接入 React Native 與 Expo 項目。包概覽只封裝組件不攜帶字體文件該包是 Font Awesome Pro 系列眾多獨立子包之一與倉庫中的fontawesome-pro-solid、fontawesome-pro-sharp-regular等包保持一致的一個字體族一個 npm 包結(jié)構(gòu)。其最核心的設(shè)計約束在 README 的IMPORTANT區(qū)塊中明確強調(diào)本包不包含字體文件你必須自行提供字體文件。原因在于 Font Awesome Pro 字體受商業(yè)授權(quán)約束無法隨開源 npm 包一起分發(fā)。因此該包只負(fù)責(zé)三件事提供基于 glyphmap字符映射表生成的圖標(biāo)組件定義字體文件名與 PostScript 名等元信息通過構(gòu)建期腳本與配置插件把你的字體文件注冊進(jìn) iOS/Android 原生工程。包內(nèi)已提交的構(gòu)成文件見 packages/fontawesome-pro-sharp-duotone-solid 目錄包括src/index.ts組件入口、src/static.ts靜態(tài)導(dǎo)出入口、glyphmaps/FontAwesomeProSharpDuotoneSolid.json字符映射、app.plugin.jsExpo 配置插件、Android 的VectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt與 iOS 的 podspec但沒有fonts/目錄與任何.ttf文件這正是自行提供字體的直接體現(xiàn)。安裝在 React Native 項目中安裝該包npm install react-native-vector-icons/fontawesome-pro-sharp-duotone-solid從 package.json 看該包以react-native-vector-icons/common為唯一運行時依賴react、react-native為 peerDependenciesexpo/config-plugins為可選 peerDependency僅在 Expo 場景需要engines.node要求 18.0.0。包同時通過exports字段暴露了./static靜態(tài)導(dǎo)出與./glyphmaps/*.json字符映射 JSON等子路徑。放置自定義字體文件關(guān)鍵步驟由于包內(nèi)沒有字體安裝完成后必須手動放置字體文件。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。該文件名與組件源碼中的聲明嚴(yán)格一致——src/index.ts 中createIconSet配置了fontFileName: fa-sharp-duotone-solid-900.ttf二者必須匹配否則運行期將找不到字體資源。放置完成后字體會在構(gòu)建階段被自動復(fù)制到 iOS 與 Android 工程中iOS由包內(nèi) react-native-vector-icons-fontawesome-pro-sharp-duotone-solid.podspec 完成。該 podspec 從Podfile所在目錄向上尋找最近的package.json定位項目根讀取reactNativeVectorIcons.fontDir配置默認(rèn)rnvi-fonts把rnvi-fonts/fontawesome-pro-sharp-duotone-solid/下的所有.ttf復(fù)制到 pod 自身的fonts/目錄再通過s.resources fonts/*.ttf注冊為資源若目錄不存在或沒有.ttf文件會直接拋出錯誤提示。Android由構(gòu)建流程在編譯期把字體復(fù)制進(jìn)原生資源與 iOS 一樣自動完成無需手工干預(yù)。值得注意的是fontDir目錄名是可配置的在應(yīng)用的package.json中設(shè)置reactNativeVectorIcons: { fontDir: 你的目錄名 }即可替換默認(rèn)的rnvi-fontspodspec 與 Expo 插件都會讀取同一配置保持行為一致?；A(chǔ)使用渲染圖標(biāo)組件字體就位后即可在代碼中使用組件import { FontAwesomeProSharpDuotoneSolid } from react-native-vector-icons/fontawesome-pro-sharp-duotone-solid; // ... FontAwesomeProSharpDuotoneSolid namehouse color#ff0000 size{20} /組件接受與 react-native-vector-icons 一致的 propsname圖標(biāo)名稱、size字號、color顏色并支持其余樣式屬性。name的取值來自字符映射表 glyphmaps/FontAwesomeProSharpDuotoneSolid.json該文件包含約 4791 個字形條目含house、abacus、address-book等命名圖標(biāo)以及數(shù)字、字母等基礎(chǔ)字形圖標(biāo)名稱均使用 Font Awesome 7 的官方命名。組件本體定義在 src/index.tsexport const FontAwesomeProSharpDuotoneSolid createIconSet(glyphMap, { postScriptName: FontAwesome7SharpDuotone-Solid, fontFileName: fa-sharp-duotone-solid-900.ttf, });createIconSet來自 react-native-vector-icons/common負(fù)責(zé)把 glyphmap 與字體文件綁定生成可渲染的圖標(biāo)組件postScriptName: FontAwesome7SharpDuotone-Solid用于原生字體定位。文件中還導(dǎo)出了FontAwesomeProSharpDuotoneSolidIconName類型由keyof typeof glyphMap推導(dǎo)可提供圖標(biāo)名稱的 TypeScript 類型檢查。同一文件也提供了export default默認(rèn)導(dǎo)出作為別名。此外包還通過react-native-vector-icons/fontawesome-pro-sharp-duotone-solid/static子路徑暴露靜態(tài)導(dǎo)出入口src/static.ts適用于需要靜態(tài)圖標(biāo)引用如固定資源列表的場景。Expo 項目使用 Config Plugin 自動注冊字體在 Expo含 Expo prebuild / dev client項目中字體不會自動進(jìn)入 iOS 工程需要通過包內(nèi)置的 Expo 配置插件完成注冊。在app.json或app.config.js的plugins數(shù)組中添加包名{ expo: { plugins: [react-native-vector-icons/fontawesome-pro-sharp-duotone-solid] } }執(zhí)行 prebuild 或開發(fā)構(gòu)建時插件會讀取rnvi-fonts/fontawesome-pro-sharp-duotone-solid/目錄下的.ttf文件并把它們追加到 iOS 工程的UIAppFonts列表中。其實現(xiàn)位于 app.plugin.js通過withInfoPlist修改 iOSInfo.plist從項目根package.json讀取reactNativeVectorIcons.fontDir默認(rèn)rnvi-fonts拼接字體目錄目錄不存在或目錄內(nèi)沒有.ttf文件時拋出明確錯誤提示參閱包 README將找到的字體文件去重后合并進(jìn)c.modResults.UIAppFonts。該插件與 iOS podspec 讀取同一套fontDir約定因此在 React Native 裸工程與 Expo 工程間切換時無需改變字體目錄結(jié)構(gòu)。插件詳細(xì)機制可參考倉庫的 Expo 配置說明文檔。版本對應(yīng)關(guān)系README 的 Versions 一節(jié)說明12 版本之前該字體包的版本號跟隨上游 Font Awesome 版本而當(dāng)前包react-native-vector-icons/fontawesome-pro-sharp-duotone-solid采用獨立版本號與上游版本通過下表對應(yīng)RNVI 包版本上游 Font Awesome 版本 0.1.07.1.0 0.1.17.2.0該對應(yīng)關(guān)系在 CHANGELOG.md 中亦有印證0.1.0版本引入 Font Awesome 7 的包結(jié)構(gòu)重構(gòu)0.1.2版本升級到 Font Awesome 7.2.0此后1.0.0、1.1.x等版本主要更新依賴如react-native-vector-icons/common與新增 Expo 配置插件、靜態(tài)導(dǎo)出等能力。判斷某次升級對應(yīng)哪個上游字體版本時可結(jié)合本表與 CHANGELOG 交叉核對。原生側(cè)的實現(xiàn)細(xì)節(jié)雖然包內(nèi)沒有原生功能模塊字體渲染仍由 react-native-vector-icons 核心完成但包仍為 iOS/Android 提供了必要的鏈接骨架AndroidVectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt 繼承BaseReactPackagegetModule返回null、getReactModuleInfoProvider返回空映射屬于純占位包配合 AndroidManifest.xml 聲明包名后由 RN 自動鏈接機制接入從源碼結(jié)構(gòu)看其作用是保證包在 Android 側(cè)的注冊鏈路完整而非提供新原生 API。iOSpodspec 除注冊字體資源外還聲明platforms ios / tvos 9.0 / visionos 1.0因此支持 iOS、tvOS 與 visionOS 平臺。貢獻(xiàn)與許可若需為倉庫貢獻(xiàn)例如修改包生成邏輯或模板注意 src/index.ts 與app.plugin.js頭部均注明此文件由生成器生成手工修改會被覆蓋真正的修改入口在packages/generator-react-native-vector-icons的模板目錄這與 貢獻(xiàn)指南 描述的開發(fā)流程一致。本包與整個倉庫一樣采用 MIT 許可見 package.json 與 README License 一節(jié)但請留意MIT 僅覆蓋包代碼本身Font Awesome Pro 字體文件仍受其商業(yè)授權(quán)約束這也是字體必須自行提供的原因。小結(jié)接入react-native-vector-icons/fontawesome-pro-sharp-duotone-solid的完整流程可概括為四步安裝 npm 包 → 把fa-sharp-duotone-solid-900.ttf放入rnvi-fonts/fontawesome-pro-sharp-duotone-solid/→ 在代碼中引入組件渲染圖標(biāo) →Expo 項目在plugins中注冊配置插件。字體命名、目錄約定與原生構(gòu)建腳本環(huán)環(huán)相扣只要保持文件路徑與包內(nèi)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創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 react-native-vector-icons 接入 Font Awesome Pro Sharp Duotone Solid：字體包安裝、配置與源碼實現(xiàn)解析
react-native-vector-icons 接入 Font Awesome Pro Sharp Duotone Solid字體包安裝、配置與源碼實現(xiàn)解析【免費下載鏈接】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-iconsreact-native-vector-icons/fontawesome-pro-sharp-duotone-solid是 react-native-vector-icons 倉庫monorepo中面向 Font Awesome Pro Sharp Duotone Solid 字體族封裝的圖標(biāo)組件包。本文以 packages/fontawesome-pro-sharp-duotone-solid/README.md 為主線完整講解該包的安裝、自定義字體放置、JSX 使用方式與 Expo 配置插件并結(jié)合包內(nèi)源碼src/index.ts、app.plugin.js、podspec、Android 清單說明其底層工作原理幫助你快速把該圖標(biāo)集接入 React Native 與 Expo 項目。包概覽只封裝組件不攜帶字體文件該包是 Font Awesome Pro 系列眾多獨立子包之一與倉庫中的fontawesome-pro-solid、fontawesome-pro-sharp-regular等包保持一致的一個字體族一個 npm 包結(jié)構(gòu)。其最核心的設(shè)計約束在 README 的IMPORTANT區(qū)塊中明確強調(diào)本包不包含字體文件你必須自行提供字體文件。原因在于 Font Awesome Pro 字體受商業(yè)授權(quán)約束無法隨開源 npm 包一起分發(fā)。因此該包只負(fù)責(zé)三件事提供基于 glyphmap字符映射表生成的圖標(biāo)組件定義字體文件名與 PostScript 名等元信息通過構(gòu)建期腳本與配置插件把你的字體文件注冊進(jìn) iOS/Android 原生工程。包內(nèi)已提交的構(gòu)成文件見 packages/fontawesome-pro-sharp-duotone-solid 目錄包括src/index.ts組件入口、src/static.ts靜態(tài)導(dǎo)出入口、glyphmaps/FontAwesomeProSharpDuotoneSolid.json字符映射、app.plugin.jsExpo 配置插件、Android 的VectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt與 iOS 的 podspec但沒有fonts/目錄與任何.ttf文件這正是自行提供字體的直接體現(xiàn)。安裝在 React Native 項目中安裝該包npm install react-native-vector-icons/fontawesome-pro-sharp-duotone-solid從 package.json 看該包以react-native-vector-icons/common為唯一運行時依賴react、react-native為 peerDependenciesexpo/config-plugins為可選 peerDependency僅在 Expo 場景需要engines.node要求 18.0.0。包同時通過exports字段暴露了./static靜態(tài)導(dǎo)出與./glyphmaps/*.json字符映射 JSON等子路徑。放置自定義字體文件關(guān)鍵步驟由于包內(nèi)沒有字體安裝完成后必須手動放置字體文件。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。該文件名與組件源碼中的聲明嚴(yán)格一致——src/index.ts 中createIconSet配置了fontFileName: fa-sharp-duotone-solid-900.ttf二者必須匹配否則運行期將找不到字體資源。放置完成后字體會在構(gòu)建階段被自動復(fù)制到 iOS 與 Android 工程中iOS由包內(nèi) react-native-vector-icons-fontawesome-pro-sharp-duotone-solid.podspec 完成。該 podspec 從Podfile所在目錄向上尋找最近的package.json定位項目根讀取reactNativeVectorIcons.fontDir配置默認(rèn)rnvi-fonts把rnvi-fonts/fontawesome-pro-sharp-duotone-solid/下的所有.ttf復(fù)制到 pod 自身的fonts/目錄再通過s.resources fonts/*.ttf注冊為資源若目錄不存在或沒有.ttf文件會直接拋出錯誤提示。Android由構(gòu)建流程在編譯期把字體復(fù)制進(jìn)原生資源與 iOS 一樣自動完成無需手工干預(yù)。值得注意的是fontDir目錄名是可配置的在應(yīng)用的package.json中設(shè)置reactNativeVectorIcons: { fontDir: 你的目錄名 }即可替換默認(rèn)的rnvi-fontspodspec 與 Expo 插件都會讀取同一配置保持行為一致?；A(chǔ)使用渲染圖標(biāo)組件字體就位后即可在代碼中使用組件import { FontAwesomeProSharpDuotoneSolid } from react-native-vector-icons/fontawesome-pro-sharp-duotone-solid; // ... FontAwesomeProSharpDuotoneSolid namehouse color#ff0000 size{20} /組件接受與 react-native-vector-icons 一致的 propsname圖標(biāo)名稱、size字號、color顏色并支持其余樣式屬性。name的取值來自字符映射表 glyphmaps/FontAwesomeProSharpDuotoneSolid.json該文件包含約 4791 個字形條目含house、abacus、address-book等命名圖標(biāo)以及數(shù)字、字母等基礎(chǔ)字形圖標(biāo)名稱均使用 Font Awesome 7 的官方命名。組件本體定義在 src/index.tsexport const FontAwesomeProSharpDuotoneSolid createIconSet(glyphMap, { postScriptName: FontAwesome7SharpDuotone-Solid, fontFileName: fa-sharp-duotone-solid-900.ttf, });createIconSet來自 react-native-vector-icons/common負(fù)責(zé)把 glyphmap 與字體文件綁定生成可渲染的圖標(biāo)組件postScriptName: FontAwesome7SharpDuotone-Solid用于原生字體定位。文件中還導(dǎo)出了FontAwesomeProSharpDuotoneSolidIconName類型由keyof typeof glyphMap推導(dǎo)可提供圖標(biāo)名稱的 TypeScript 類型檢查。同一文件也提供了export default默認(rèn)導(dǎo)出作為別名。此外包還通過react-native-vector-icons/fontawesome-pro-sharp-duotone-solid/static子路徑暴露靜態(tài)導(dǎo)出入口src/static.ts適用于需要靜態(tài)圖標(biāo)引用如固定資源列表的場景。Expo 項目使用 Config Plugin 自動注冊字體在 Expo含 Expo prebuild / dev client項目中字體不會自動進(jìn)入 iOS 工程需要通過包內(nèi)置的 Expo 配置插件完成注冊。在app.json或app.config.js的plugins數(shù)組中添加包名{ expo: { plugins: [react-native-vector-icons/fontawesome-pro-sharp-duotone-solid] } }執(zhí)行 prebuild 或開發(fā)構(gòu)建時插件會讀取rnvi-fonts/fontawesome-pro-sharp-duotone-solid/目錄下的.ttf文件并把它們追加到 iOS 工程的UIAppFonts列表中。其實現(xiàn)位于 app.plugin.js通過withInfoPlist修改 iOSInfo.plist從項目根package.json讀取reactNativeVectorIcons.fontDir默認(rèn)rnvi-fonts拼接字體目錄目錄不存在或目錄內(nèi)沒有.ttf文件時拋出明確錯誤提示參閱包 README將找到的字體文件去重后合并進(jìn)c.modResults.UIAppFonts。該插件與 iOS podspec 讀取同一套fontDir約定因此在 React Native 裸工程與 Expo 工程間切換時無需改變字體目錄結(jié)構(gòu)。插件詳細(xì)機制可參考倉庫的 Expo 配置說明文檔。版本對應(yīng)關(guān)系README 的 Versions 一節(jié)說明12 版本之前該字體包的版本號跟隨上游 Font Awesome 版本而當(dāng)前包react-native-vector-icons/fontawesome-pro-sharp-duotone-solid采用獨立版本號與上游版本通過下表對應(yīng)RNVI 包版本上游 Font Awesome 版本 0.1.07.1.0 0.1.17.2.0該對應(yīng)關(guān)系在 CHANGELOG.md 中亦有印證0.1.0版本引入 Font Awesome 7 的包結(jié)構(gòu)重構(gòu)0.1.2版本升級到 Font Awesome 7.2.0此后1.0.0、1.1.x等版本主要更新依賴如react-native-vector-icons/common與新增 Expo 配置插件、靜態(tài)導(dǎo)出等能力。判斷某次升級對應(yīng)哪個上游字體版本時可結(jié)合本表與 CHANGELOG 交叉核對。原生側(cè)的實現(xiàn)細(xì)節(jié)雖然包內(nèi)沒有原生功能模塊字體渲染仍由 react-native-vector-icons 核心完成但包仍為 iOS/Android 提供了必要的鏈接骨架AndroidVectorIconsFontAwesomeProSharpDuotoneSolidPackage.kt 繼承BaseReactPackagegetModule返回null、getReactModuleInfoProvider返回空映射屬于純占位包配合 AndroidManifest.xml 聲明包名后由 RN 自動鏈接機制接入從源碼結(jié)構(gòu)看其作用是保證包在 Android 側(cè)的注冊鏈路完整而非提供新原生 API。iOSpodspec 除注冊字體資源外還聲明platforms ios / tvos 9.0 / visionos 1.0因此支持 iOS、tvOS 與 visionOS 平臺。貢獻(xiàn)與許可若需為倉庫貢獻(xiàn)例如修改包生成邏輯或模板注意 src/index.ts 與app.plugin.js頭部均注明此文件由生成器生成手工修改會被覆蓋真正的修改入口在packages/generator-react-native-vector-icons的模板目錄這與 貢獻(xiàn)指南 描述的開發(fā)流程一致。本包與整個倉庫一樣采用 MIT 許可見 package.json 與 README License 一節(jié)但請留意MIT 僅覆蓋包代碼本身Font Awesome Pro 字體文件仍受其商業(yè)授權(quán)約束這也是字體必須自行提供的原因。小結(jié)接入react-native-vector-icons/fontawesome-pro-sharp-duotone-solid的完整流程可概括為四步安裝 npm 包 → 把fa-sharp-duotone-solid-900.ttf放入rnvi-fonts/fontawesome-pro-sharp-duotone-solid/→ 在代碼中引入組件渲染圖標(biāo) →Expo 項目在plugins中注冊配置插件。字體命名、目錄約定與原生構(gòu)建腳本環(huán)環(huán)相扣只要保持文件路徑與包內(nèi)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創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考