Rivet Icons 图标库基于 Font Awesome 的 React 图标方案与无 Token 开箱即用机制【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actorsRivet Iconsrivet-gg/icons是 Rivet 项目为自身产品线打造的前端图标库它以 Font Awesome 为基础将包括 Pro 图标在内的全部 SVG 图标预生成并提交进仓库最终使用者无需任何 Font Awesome 付费 Token 即可直接使用。本文以 frontend/packages/icons/README.md 为主体结合 生成脚本、打包脚本 与 共享工具 的源码完整讲解安装使用、许可证边界以及维护者如何通过“manifest → vendor → esbuild 分包”三阶段流水线新增图标。一、Rivet Icons 是什么定位与设计目标Rivet Icons 是构建在 Font Awesome 之上的图标库为 Rivet 产品前端控制台、Inspector、文档站等提供统一图标资源。它解决的核心痛点非常明确Font Awesome Pro 图标需要付费授权与 npm 私有仓库 Token普通使用者无法直接安装。Rivet Icons 的做法是维护者在具备 Font Awesome Pro 授权的前提下把所有需要的图标含 Pro 图标预先取出、生成代码文件并提交到仓库。最终消费者安装rivet-gg/icons时得到的是仓库中已经存在的生成文件因此完全不依赖 Font Awesome Token开箱即用。这一点在 README 的 Overview 一节中明确说明也在 package.json 的files字段包含scripts、manifest.json、src、dist中得到印证——发布产物中不包含任何需要运行时认证的内容。从仓库源码看该包当前版本为2.2.1sideEffects: false这意味着打包器可以安全地对其做 tree-shaking配合下方“按图标分包”的产物结构效果显著。二、安装与使用一个 import 即可用图标2.1 安装pnpm add rivet-gg/icons由于包本身只提供“图标定义与一个轻量 React 组件”它把渲染依赖声明为peerDependencies见 package.json安装时需确保以下包已存在peer 依赖版本要求fortawesome/fontawesome-svg-core^6.5.2fortawesome/free-solid-svg-icons^6.5.2fortawesome/free-brands-svg-icons^6.5.2fortawesome/react-fontawesome^0.2.2react/react-dom^192.2 基本用法import { Icon, faCheckCircle } from rivet-gg/icons; Icon icon{faCheckCircle} /Icon组件是对fortawesome/react-fontawesome的FontAwesomeIcon的薄封装其类型签名定义在生成的 src/index.gen.ts 中export function Icon(props: OmitComponentPropstypeof FontAwesomeIcon, icon {icon: IconProp}) { return createElement(FontAwesomeIcon, props as FontAwesomeIconProps)} export type IconProp string | { prefix: string; iconName: string } | [string, string];也就是说icon属性既可以是图标定义对象如faCheckCircle也可以是 Font Awesome 支持的IconProp形态fas fa-check之类的字符串、{prefix, iconName}对象或[prefix, name]元组其余属性与FontAwesomeIcon完全一致size、color、fixedWidth、spin、className等均可直接透传。2.3 别名导入生成的导出中同时包含 Font Awesome 的旧版别名。例如faAdd与faPlus指向同一个图标index.gen.tsfaAd与faRectangleAd同源index.gen.ts方便迁移历史代码。别名清单由manifest.json中的aliases字段记录例如{ icon: faPlus, aliases: [faPlus, faAdd] }2.4 仓库内真实使用案例该包在 Rivet 前端被广泛使用例如 auto-form/fields/array.tsx 中import { Icon, faAdd, faTrash } from rivet-gg/icons;以及 feedback-dialog.tsx 中的faDiscord、docs-sheet.tsx 中的faExternalLink、copy-area.tsx 中的faCopy等覆盖了表单增删、品牌标识、外部链接、复制操作等典型场景可作为实际写法的参考。三、许可证边界务必阅读README 以“Legal Notice”开篇这一点不可忽视本包仅限 Rivet 产品与服务中使用禁止在第三方产品、项目或商业应用中使用包内含 Font Awesome Pro 图标这些图标仅授权给 Rivet 在其产品中使用不得提取、再分发或用于 Rivet 产品之外的任何场景若要在自己的项目中使用 Font Awesome Pro 图标必须自行向 Font Awesome 购买授权。详细条款见 frontend/packages/icons/LICENSE许可证明确限定“PERMITTED USE”为 Rivet Gaming, Inc. 开发、运营或官方认可的产品与服务第 3 条对 Font Awesome Pro 图标的提取与再分发做了严格禁止。因此这个包本质上是一个仅供 Rivet 生态内部使用的组件公开它主要是为了让 Rivet 相关的插件、SDK 或文档示例可以引用。如果你在开发与 Rivet 无关的项目不应直接使用本包。四、工作原理从 Token 到静态文件的三阶段流水线普通使用者拿到的dist/index.js是纯静态文件但它的诞生依赖维护者一侧的自动化脚本。整条流水线由 package.json 暴露两个命令generate: npm run gen:manifest npm run gen:vendor, gen:vendor: node scripts/vendor-icons.js, gen:manifest: node scripts/generate-manifest.js即 README 中提到的pnpm manifest与pnpm vendor对应上述 npm 脚本名。4.1 阶段一generate-manifest.js生成清单scripts/generate-manifest.js 的工作是扫描 Font Awesome 包并生成manifest.json检查环境调用checkEnvironment()要求必须存在FONTAWESOME_PACKAGE_TOKEN否则直接报错退出这是维护者专属操作配置私有 registryconfigureFontAwesomeRegistry()在src/下临时生成.npmrc指向https://npm.fontawesome.com/并注入_authToken见 shared-utils.js注册三类图标源FA_PACKAGES常量fortawesome/free-solid-svg-icons免费实心fortawesome/free-brands-svg-icons免费品牌fortawesome/pro-solid-svg-iconsPro 实心注册自定义 Kitawesome.me/kit-63db24046b/icons/kit/custom以及旧格式非 ESM的 duotone 遗留 Kit自定义 Kit 中存放 Rivet 专属图标对应 shared-utils.js 中版本号为1.0.44的包去重与别名提取按iconBaseName分组优先选择文件名与faCamelCase(iconBaseName)一致的“canonical 图标”并从图标定义中提取别名iconDefinition.icon?.[2]数组后写入manifest.json。生成后的 manifest.json 体量可观超过 2.4 万行每个包下列出icon与aliases例如fortawesome/free-solid-svg-icons: { icons: [ { icon: faAddressBook, aliases: [faAddressBook, faContactBook] } ] }4.2 阶段二vendor-icons.js生成源码与产物scripts/vendor-icons.js 负责把manifest.json变成可发布的代码加载清单并统计图标总数生成图标导出代码generateIconExports对标准包/Pro 包生成export { definition as faXxx } from fortawesome/.../faXxx;形式的再导出对自定义 Kit 生成批量导出对遗留 duotone Kit 由于不是 ESM改为内联图标定义inlineCode写出生成文件均带// This file is generated by scripts/vendor-icons.js与版权横幅禁止手改src/index.gen.jssrc/index.gen.ts用 esbuild 分包打包bundleWithEsbuild为每一个图标单独生成dist/icons/name.js文件每个文件自包含 SVG 数据、不做代码分割react/react-dom/fortawesome/react-fontawesome保持 external最后生成静态再导出的 barrel 文件dist/index.js。一个值得注意的实现细节由于某些图标别名仅大小写不同如faPaintBrush/faPaintbrush在大小写不敏感的文件系统上会撞名脚本会把这些“延迟别名”不做独立 esbuild 入口而是在 barrel 中通过export { primary as alias } from ./icons/primary.js的方式间接再导出vendor-icons.js从而既保留 API 兼容又避免文件系统冲突。4.3 阶段三发布产物结构package.json 的exports定义了两个入口.: { types: ./src/index.gen.ts, import: ./dist/index.js, default: ./dist/index.js }, ./icons/*.js: { import: ./dist/icons/*.js, default: ./dist/icons/*.js }main/import指向dist/index.jsbarrel 再导出 Icon组件types指向src/index.gen.ts子路径rivet-gg/icons/icons/*.js允许深度按需导入单个图标进一步配合 tree-shaking。正是“按图标分包 静态再导出 barrel”这一结构让import { faCheckCircle } from rivet-gg/icons能被打包器精准摇树避免把整个图标集打进产物。4.4 维护者的环境准备shared-utils 细节维护者首次运行前需满足持有 Font Awesome Pro 授权并设置环境变量FONTAWESOME_PACKAGE_TOKEN在src/目录内运行pnpm install安装 FA Pro 包脚本会在src/下临时创建package.json与.npmrc用完后自动清理运行pnpm manifest生成manifest.json运行pnpm vendor生成src/index.gen.js、src/index.gen.ts、dist/index.js提交所有生成文件。依赖版本在 shared-utils.js 的FA_PACKAGES_CONFIG中集中管理Pro regular/solid 为6.6.0Free solid/brands 为7.2.0自定义 Kit 为1.0.44。其中还有一个容易踩坑的类型问题已被脚本处理Pro 包声明的旧版fortawesome/fontawesome-common-types与 Free 包解析的版本不同会导致同一图标在不同包中出现两套IconDefinition类型身份因此脚本通过overrides强制统一为6.7.2shared-utils.js。五、故障排查5.1 图标不显示图标含 Font Awesome Pro 图标已全部预生成并提交进仓库正常情况下无需任何 Token。若图标未显示按 README 建议依次检查peer 依赖是否安装确认fortawesome/fontawesome-svg-core、fortawesome/free-solid-svg-icons、fortawesome/free-brands-svg-icons、fortawesome/react-fontawesome、react、react-dom都已安装且版本满足要求见上文表格导入方式是否正确import { Icon, faCheckCircle } from rivet-gg/icons; Icon icon{faCheckCircle} /若仍不显示可在 Rivet 官方 Discord 反馈仅用于 Rivet 相关产品问题。从源码角度看最可能的原因是 peer 依赖缺失或版本不匹配——Icon组件在运行时依赖FontAwesomeIcon渲染 SVG而fortawesome/fontawesome-svg-core负责注册图标定义缺少任何一环都会导致空白。5.2 维护者报错Could not find package fortawesome/pro-solid-svg-icons该错误发生在没有 Font Awesome Pro 包访问权时运行 vendor 脚本的场景。解决步骤确认已设置FONTAWESOME_PACKAGE_TOKEN环境变量在src/目录下运行pnpm install安装 FA Pro 包脚本会通过临时.npmrc从 Font Awesome 私有 registry 拉取重新运行pnpm vendor。注意README 明确指出此过程仅供拥有 Font Awesome Pro 授权的维护者执行普通使用者完全不需要也不应该执行该流程。六、总结Rivet Icons 的设计思路对“如何在开源项目中安全地复用商业图标资源”给出了一个可复用的范式把授权侧的一次性获取Token、Pro 包封装在维护者脚本里把面向消费者的产物固化为提交进仓库的静态文件从而在许可证合规的前提下实现终端用户的零配置体验。对普通使用者而言你只需要记住三条pnpm add rivet-gg/icons并确保 6 个 peer 依赖就位import { Icon, faXxx } from rivet-gg/icons即可渲染任意含 Pro图标别名自动可用本包仅供 Rivet 产品使用非 Rivet 项目请勿直接引用需要 Pro 图标请自行向 Font Awesome 购买授权。如需深入源码可继续阅读 generate-manifest.js、vendor-icons.js、shared-utils.js 以及生成的 index.gen.ts理解清单生成、图标分包与类型统一背后的完整实现。【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/18 9:53:38 · 阅读 1.2k Rivet Icons 图标库：基于 Font Awesome 的 React 图标方案与无 Token 开箱即用机制
Rivet Icons 图标库基于 Font Awesome 的 React 图标方案与无 Token 开箱即用机制【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actorsRivet Iconsrivet-gg/icons是 Rivet 项目为自身产品线打造的前端图标库它以 Font Awesome 为基础将包括 Pro 图标在内的全部 SVG 图标预生成并提交进仓库最终使用者无需任何 Font Awesome 付费 Token 即可直接使用。本文以 frontend/packages/icons/README.md 为主体结合 生成脚本、打包脚本 与 共享工具 的源码完整讲解安装使用、许可证边界以及维护者如何通过“manifest → vendor → esbuild 分包”三阶段流水线新增图标。一、Rivet Icons 是什么定位与设计目标Rivet Icons 是构建在 Font Awesome 之上的图标库为 Rivet 产品前端控制台、Inspector、文档站等提供统一图标资源。它解决的核心痛点非常明确Font Awesome Pro 图标需要付费授权与 npm 私有仓库 Token普通使用者无法直接安装。Rivet Icons 的做法是维护者在具备 Font Awesome Pro 授权的前提下把所有需要的图标含 Pro 图标预先取出、生成代码文件并提交到仓库。最终消费者安装rivet-gg/icons时得到的是仓库中已经存在的生成文件因此完全不依赖 Font Awesome Token开箱即用。这一点在 README 的 Overview 一节中明确说明也在 package.json 的files字段包含scripts、manifest.json、src、dist中得到印证——发布产物中不包含任何需要运行时认证的内容。从仓库源码看该包当前版本为2.2.1sideEffects: false这意味着打包器可以安全地对其做 tree-shaking配合下方“按图标分包”的产物结构效果显著。二、安装与使用一个 import 即可用图标2.1 安装pnpm add rivet-gg/icons由于包本身只提供“图标定义与一个轻量 React 组件”它把渲染依赖声明为peerDependencies见 package.json安装时需确保以下包已存在peer 依赖版本要求fortawesome/fontawesome-svg-core^6.5.2fortawesome/free-solid-svg-icons^6.5.2fortawesome/free-brands-svg-icons^6.5.2fortawesome/react-fontawesome^0.2.2react/react-dom^192.2 基本用法import { Icon, faCheckCircle } from rivet-gg/icons; Icon icon{faCheckCircle} /Icon组件是对fortawesome/react-fontawesome的FontAwesomeIcon的薄封装其类型签名定义在生成的 src/index.gen.ts 中export function Icon(props: OmitComponentPropstypeof FontAwesomeIcon, icon {icon: IconProp}) { return createElement(FontAwesomeIcon, props as FontAwesomeIconProps)} export type IconProp string | { prefix: string; iconName: string } | [string, string];也就是说icon属性既可以是图标定义对象如faCheckCircle也可以是 Font Awesome 支持的IconProp形态fas fa-check之类的字符串、{prefix, iconName}对象或[prefix, name]元组其余属性与FontAwesomeIcon完全一致size、color、fixedWidth、spin、className等均可直接透传。2.3 别名导入生成的导出中同时包含 Font Awesome 的旧版别名。例如faAdd与faPlus指向同一个图标index.gen.tsfaAd与faRectangleAd同源index.gen.ts方便迁移历史代码。别名清单由manifest.json中的aliases字段记录例如{ icon: faPlus, aliases: [faPlus, faAdd] }2.4 仓库内真实使用案例该包在 Rivet 前端被广泛使用例如 auto-form/fields/array.tsx 中import { Icon, faAdd, faTrash } from rivet-gg/icons;以及 feedback-dialog.tsx 中的faDiscord、docs-sheet.tsx 中的faExternalLink、copy-area.tsx 中的faCopy等覆盖了表单增删、品牌标识、外部链接、复制操作等典型场景可作为实际写法的参考。三、许可证边界务必阅读README 以“Legal Notice”开篇这一点不可忽视本包仅限 Rivet 产品与服务中使用禁止在第三方产品、项目或商业应用中使用包内含 Font Awesome Pro 图标这些图标仅授权给 Rivet 在其产品中使用不得提取、再分发或用于 Rivet 产品之外的任何场景若要在自己的项目中使用 Font Awesome Pro 图标必须自行向 Font Awesome 购买授权。详细条款见 frontend/packages/icons/LICENSE许可证明确限定“PERMITTED USE”为 Rivet Gaming, Inc. 开发、运营或官方认可的产品与服务第 3 条对 Font Awesome Pro 图标的提取与再分发做了严格禁止。因此这个包本质上是一个仅供 Rivet 生态内部使用的组件公开它主要是为了让 Rivet 相关的插件、SDK 或文档示例可以引用。如果你在开发与 Rivet 无关的项目不应直接使用本包。四、工作原理从 Token 到静态文件的三阶段流水线普通使用者拿到的dist/index.js是纯静态文件但它的诞生依赖维护者一侧的自动化脚本。整条流水线由 package.json 暴露两个命令generate: npm run gen:manifest npm run gen:vendor, gen:vendor: node scripts/vendor-icons.js, gen:manifest: node scripts/generate-manifest.js即 README 中提到的pnpm manifest与pnpm vendor对应上述 npm 脚本名。4.1 阶段一generate-manifest.js生成清单scripts/generate-manifest.js 的工作是扫描 Font Awesome 包并生成manifest.json检查环境调用checkEnvironment()要求必须存在FONTAWESOME_PACKAGE_TOKEN否则直接报错退出这是维护者专属操作配置私有 registryconfigureFontAwesomeRegistry()在src/下临时生成.npmrc指向https://npm.fontawesome.com/并注入_authToken见 shared-utils.js注册三类图标源FA_PACKAGES常量fortawesome/free-solid-svg-icons免费实心fortawesome/free-brands-svg-icons免费品牌fortawesome/pro-solid-svg-iconsPro 实心注册自定义 Kitawesome.me/kit-63db24046b/icons/kit/custom以及旧格式非 ESM的 duotone 遗留 Kit自定义 Kit 中存放 Rivet 专属图标对应 shared-utils.js 中版本号为1.0.44的包去重与别名提取按iconBaseName分组优先选择文件名与faCamelCase(iconBaseName)一致的“canonical 图标”并从图标定义中提取别名iconDefinition.icon?.[2]数组后写入manifest.json。生成后的 manifest.json 体量可观超过 2.4 万行每个包下列出icon与aliases例如fortawesome/free-solid-svg-icons: { icons: [ { icon: faAddressBook, aliases: [faAddressBook, faContactBook] } ] }4.2 阶段二vendor-icons.js生成源码与产物scripts/vendor-icons.js 负责把manifest.json变成可发布的代码加载清单并统计图标总数生成图标导出代码generateIconExports对标准包/Pro 包生成export { definition as faXxx } from fortawesome/.../faXxx;形式的再导出对自定义 Kit 生成批量导出对遗留 duotone Kit 由于不是 ESM改为内联图标定义inlineCode写出生成文件均带// This file is generated by scripts/vendor-icons.js与版权横幅禁止手改src/index.gen.jssrc/index.gen.ts用 esbuild 分包打包bundleWithEsbuild为每一个图标单独生成dist/icons/name.js文件每个文件自包含 SVG 数据、不做代码分割react/react-dom/fortawesome/react-fontawesome保持 external最后生成静态再导出的 barrel 文件dist/index.js。一个值得注意的实现细节由于某些图标别名仅大小写不同如faPaintBrush/faPaintbrush在大小写不敏感的文件系统上会撞名脚本会把这些“延迟别名”不做独立 esbuild 入口而是在 barrel 中通过export { primary as alias } from ./icons/primary.js的方式间接再导出vendor-icons.js从而既保留 API 兼容又避免文件系统冲突。4.3 阶段三发布产物结构package.json 的exports定义了两个入口.: { types: ./src/index.gen.ts, import: ./dist/index.js, default: ./dist/index.js }, ./icons/*.js: { import: ./dist/icons/*.js, default: ./dist/icons/*.js }main/import指向dist/index.jsbarrel 再导出 Icon组件types指向src/index.gen.ts子路径rivet-gg/icons/icons/*.js允许深度按需导入单个图标进一步配合 tree-shaking。正是“按图标分包 静态再导出 barrel”这一结构让import { faCheckCircle } from rivet-gg/icons能被打包器精准摇树避免把整个图标集打进产物。4.4 维护者的环境准备shared-utils 细节维护者首次运行前需满足持有 Font Awesome Pro 授权并设置环境变量FONTAWESOME_PACKAGE_TOKEN在src/目录内运行pnpm install安装 FA Pro 包脚本会在src/下临时创建package.json与.npmrc用完后自动清理运行pnpm manifest生成manifest.json运行pnpm vendor生成src/index.gen.js、src/index.gen.ts、dist/index.js提交所有生成文件。依赖版本在 shared-utils.js 的FA_PACKAGES_CONFIG中集中管理Pro regular/solid 为6.6.0Free solid/brands 为7.2.0自定义 Kit 为1.0.44。其中还有一个容易踩坑的类型问题已被脚本处理Pro 包声明的旧版fortawesome/fontawesome-common-types与 Free 包解析的版本不同会导致同一图标在不同包中出现两套IconDefinition类型身份因此脚本通过overrides强制统一为6.7.2shared-utils.js。五、故障排查5.1 图标不显示图标含 Font Awesome Pro 图标已全部预生成并提交进仓库正常情况下无需任何 Token。若图标未显示按 README 建议依次检查peer 依赖是否安装确认fortawesome/fontawesome-svg-core、fortawesome/free-solid-svg-icons、fortawesome/free-brands-svg-icons、fortawesome/react-fontawesome、react、react-dom都已安装且版本满足要求见上文表格导入方式是否正确import { Icon, faCheckCircle } from rivet-gg/icons; Icon icon{faCheckCircle} /若仍不显示可在 Rivet 官方 Discord 反馈仅用于 Rivet 相关产品问题。从源码角度看最可能的原因是 peer 依赖缺失或版本不匹配——Icon组件在运行时依赖FontAwesomeIcon渲染 SVG而fortawesome/fontawesome-svg-core负责注册图标定义缺少任何一环都会导致空白。5.2 维护者报错Could not find package fortawesome/pro-solid-svg-icons该错误发生在没有 Font Awesome Pro 包访问权时运行 vendor 脚本的场景。解决步骤确认已设置FONTAWESOME_PACKAGE_TOKEN环境变量在src/目录下运行pnpm install安装 FA Pro 包脚本会通过临时.npmrc从 Font Awesome 私有 registry 拉取重新运行pnpm vendor。注意README 明确指出此过程仅供拥有 Font Awesome Pro 授权的维护者执行普通使用者完全不需要也不应该执行该流程。六、总结Rivet Icons 的设计思路对“如何在开源项目中安全地复用商业图标资源”给出了一个可复用的范式把授权侧的一次性获取Token、Pro 包封装在维护者脚本里把面向消费者的产物固化为提交进仓库的静态文件从而在许可证合规的前提下实现终端用户的零配置体验。对普通使用者而言你只需要记住三条pnpm add rivet-gg/icons并确保 6 个 peer 依赖就位import { Icon, faXxx } from rivet-gg/icons即可渲染任意含 Pro图标别名自动可用本包仅供 Rivet 产品使用非 Rivet 项目请勿直接引用需要 Pro 图标请自行向 Font Awesome 购买授权。如需深入源码可继续阅读 generate-manifest.js、vendor-icons.js、shared-utils.js 以及生成的 index.gen.ts理解清单生成、图标分包与类型统一背后的完整实现。【免费下载链接】actorsRivet Actors are the primitive for stateful workloads. Built for AI agents, collaborative apps, and durable execution.项目地址: https://gitcode.com/GitHub_Trending/riv/actors创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考