OpenMetadata 图标库Icon Library完全指南从 SVG 到类型化 React 组件的自动化流水线【免费下载链接】OpenMetadataThe Open Context Layer for Data and AI , OpenMetadata is the open platform for building trusted data context and business semantics for humans, AI assistants, and agents.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMetadataOpenMetadata 在openmetadata/ui-core-components包中内置了一套第一方first-party图标库以 SVG 为唯一事实来源通过yarn icons:generate自动生成带类型的 React 组件并提交入库。本文以仓库文档 ICONS.md 为主体结合 generate-icons.mjs 生成器源码完整讲解目录结构、导入与 Props 规范、新增图标的四步工作流、Storybook 可视化验证以及底层 SVGO SVGR 的生成原理。读完你将能独立为 OpenMetadata 添加一个图标、理解常规图标与自定义彩色图标两条管线的差异并掌握在不改动构建配置的前提下让新图标自动进入产物与文档的方法。目录结构与文件职责图标库位于仓库的 openmetadata-ui-core-components/src/main/resources/ui 目录整体分为“源 SVG”与“生成产物”两层icons/ ← 常规图标的源 SVGkebab-case 命名已提交 icons-custom/ ← 自定义/渐变图标的源 SVG保留原始颜色 src/icons/ ← 生成的 TSX 组件已提交禁止手改 AddAlert.tsx Memories.tsx Gold.tsx ← 由 icons-custom/gold.svg 生成 index.ts src/icons-static/ types.ts ← IconProps 接口手写不参与生成两个关键设计约束SVG 源文件与生成的 TSX 文件都提交到 git。生成器yarn icons:generate是开发者工具只在 SVG 变化时显式运行并提交结果yarn build是纯粹的vite build不包含生成步骤因此构建保持快速。产物目录中的手写文件受保护。生成器只覆盖.tsx文件types.ts等手写文件永远不会被触碰详见下文生成器源码分析。从当前仓库实际内容看icons/目录收录了约 180 个常规 SVG如data-quality.svg、api-collection.svg、ml-model-2.svg、memories.svg等icons-custom/目录收录了 4 个品牌彩色图标bronze.svg、gold.svg、silver.svg、none.svg覆盖了数据质量、数据资产、实体类型、测试套件等 OpenMetadata 核心领域。导入语法与 Props 规范统一导入路径无论图标来自icons/还是icons-custom/都从同一个入口导入import { Memories, AddAlert, Domain } from openmetadata/ui-core-components/icons;这一行为由 package.json 的exports字段中的./icons子路径导出保证类型、ESM、CJS 三个入口分别指向dist/types/src/icons/index.d.ts、dist/icons/index.es.js与dist/icons/index.cjs.js。Props 与untitledui/icons保持一致图标组件的 Props 形状与untitledui/icons相同Prop类型默认值说明sizenumber24宽高px同时作用于 width 与 heightcolorstringcurrentColorSVG 描边颜色classNamestring—附加 CSS 类名...propsSVGPropsSVGSVGElement—其他任意 SVG 属性对应的类型定义是手写的 src/icons-static/types.ts其中IconProps extends SVGPropsSVGSVGElement并补充了color?: string与size?: number。用法示例Memories size{20} color#667085 / AddAlert size{16} classNametw:text-brand-600 /以实际生成的 Memories.tsx 为例可以看到默认参数、aria-hidden、strokeLinecapround、strokeLinejoinround等属性都由模板统一注入使用方只需关心size与color。新增图标的四步工作流第 1 步从 Figma 导出 SVG在 Figma 中选择图标 frame导出格式必须选SVG而非 PNG/PDF确保不包含画板artboard背景。第 2 步命名并放置文件文件名使用kebab-case放入包根目录的icons/目录openmetadata-ui-core-components/src/main/resources/ui/icons/my-new-icon.svg合法命名示例及其对应的组件名映射规则data-quality.svg→DataQualityapi-collection.svg→ApiCollectionml-model-2.svg→MlModel2数字和连字符都是允许的空格、等特殊字符会在生成时被剔除——因此务必用连字符作为单词分隔符。这一规则在生成器源码的toComponentName()中实现见 generate-icons.mjs先按非字母数字字符切分再对每个片段首字母大写后拼接成 PascalCase。第 3 步运行生成器并提交产物cd openmetadata-ui-core-components/src/main/resources/ui yarn icons:generate该命令在 package.json 中定义为node scripts/generate-icons.mjs。运行后会发生三件事用 SVGO 优化 SVG生成src/icons/MyNewIcon.tsx更新src/icons/index.ts将其导出。SVG 与生成的.tsx必须在同一个 PR 中一起提交。因为生成产物被 git 跟踪yarn build保持为纯vite build不依赖运行时生成。第 4 步在 Storybook 中验证yarn storybook打开 http://localhost:6006进入Icons → Library新图标应出现在可搜索的网格中。注意 package.json 中storybook与build-storybook脚本都会先执行yarn icons:generate再启动/构建保证文档与最新图标同步。使用 Storybook 浏览图标库cd openmetadata-ui-core-components/src/main/resources/ui yarn storybook # dev server on http://localhost:6006 yarn build-storybook # static build to storybook-static/在左侧边栏进入Icons → Library后可用的交互能力功能使用方法搜索在搜索框中输入图标名跨所有类别过滤大小调节使用屏幕底部 Controls 面板中的size滑块复制导入语句点击任意图标单元格import 语句即复制到剪贴板生成器工作原理SVGO SVGR 双管线文件角色一览文件角色icons/*.svg源 SVG——kebab-case、已提交、唯一事实来源scripts/generate-icons.mjs读取icons/执行 SVGO SVGR写出src/icons/templates/component.cjsSVGR 模板产出每个.tsx文件src/icons/index.ts由模板逻辑生成的统一导出入口src/icons-static/types.tsIconProps接口手写Vite 库构建配置vite.config.ts会自动发现src/icons/index.ts作为入口——新增图标无需修改任何构建配置。两条管线常规图标 vs 自定义图标生成器将icons/常规与icons-custom/自定义视为两个源目录、同一输出目录、同一导入路径。核心差异体现在 SVGO 配置与 SVGR 配置上常规图标管线svgoRegularConfig见 generate-icons.mjs使用preset-default保留viewBox、cleanupIds、removeDimensions、removeAttrs剔除xmlns、data-name、style等共享插件额外剔除stroke-linecap/stroke-linejoin根节点会统一重新注入通过自定义replaceHardcodedColors插件把硬编码十六进制颜色替换为currentColorfillnone、fillwhite、fillurl(...)除外从而让图标完全可通过colorprop 主题化。自定义图标管线svgoCustomConfig见 generate-icons.mjs跳过颜色替换保留品牌色与渐变用prefixIds给 ID 添加图标名前缀防止多个自定义图标同页渲染时渐变/mask ID 冲突在 SVGR 阶段不注入stroke/fill覆盖只注入width/height与aria-hidden见buildSvgrConfig中isCustom分支。组件模板templates/component.cjs对两条管线做了统一处理常规图标直接绑定color自定义图标将color重命名为_color以满足 ESLint 未使用变量规则同时保持两侧 Props 接口一致。每个生成的组件都会设置displayName。增量更新与产物自洁main()执行时还包含一个容易被忽略的关键逻辑见 generate-icons.mjs删除过期产物。当某个 SVG 从icons/或icons-custom/移除后重新运行生成器会把对应的陈旧.tsx一并清理——清理范围严格限定为.tsx绝不动types.ts等手写文件。随后重新生成index.ts导出IconProps类型与全部组件并对生成代码依次执行本包 ESLint--fix与 Prettier 格式化保证产物与 CI 的 ui-checkstyle 规范一致。完整重新生成yarn icons:generate # 重新读取 icons/ 下所有 SVG覆盖 src/icons/*.tsx 与 index.ts该命令可随时安全运行——它只会触碰生成文件绝不修改types.ts或其他手写文件。实践要点小结新增图标时把 SVG 放入 icons/常规或 icons-custom/彩色/渐变文件名用 kebab-case运行yarn icons:generate后将源 SVG 与生成的 TSX 一起提交组件默认size24、colorcurrentColor与untitledui/icons生态保持一致常规图标颜色跟随colorprop 主题化icons-custom/下的品牌图标保留原始颜色仅暴露尺寸控制新增图标无需改动vite.config.ts构建入口自动发现用yarn storybook打开 Icons → Library 做可视化验收与导入语句复制。【免费下载链接】OpenMetadataThe Open Context Layer for Data and AI , OpenMetadata is the open platform for building trusted data context and business semantics for humans, AI assistants, and agents.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMetadata创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenMetadata 图标库（Icon Library）完全指南：从 SVG 到类型化 React 组件的自动化流水线
OpenMetadata 图标库Icon Library完全指南从 SVG 到类型化 React 组件的自动化流水线【免费下载链接】OpenMetadataThe Open Context Layer for Data and AI , OpenMetadata is the open platform for building trusted data context and business semantics for humans, AI assistants, and agents.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMetadataOpenMetadata 在openmetadata/ui-core-components包中内置了一套第一方first-party图标库以 SVG 为唯一事实来源通过yarn icons:generate自动生成带类型的 React 组件并提交入库。本文以仓库文档 ICONS.md 为主体结合 generate-icons.mjs 生成器源码完整讲解目录结构、导入与 Props 规范、新增图标的四步工作流、Storybook 可视化验证以及底层 SVGO SVGR 的生成原理。读完你将能独立为 OpenMetadata 添加一个图标、理解常规图标与自定义彩色图标两条管线的差异并掌握在不改动构建配置的前提下让新图标自动进入产物与文档的方法。目录结构与文件职责图标库位于仓库的 openmetadata-ui-core-components/src/main/resources/ui 目录整体分为“源 SVG”与“生成产物”两层icons/ ← 常规图标的源 SVGkebab-case 命名已提交 icons-custom/ ← 自定义/渐变图标的源 SVG保留原始颜色 src/icons/ ← 生成的 TSX 组件已提交禁止手改 AddAlert.tsx Memories.tsx Gold.tsx ← 由 icons-custom/gold.svg 生成 index.ts src/icons-static/ types.ts ← IconProps 接口手写不参与生成两个关键设计约束SVG 源文件与生成的 TSX 文件都提交到 git。生成器yarn icons:generate是开发者工具只在 SVG 变化时显式运行并提交结果yarn build是纯粹的vite build不包含生成步骤因此构建保持快速。产物目录中的手写文件受保护。生成器只覆盖.tsx文件types.ts等手写文件永远不会被触碰详见下文生成器源码分析。从当前仓库实际内容看icons/目录收录了约 180 个常规 SVG如data-quality.svg、api-collection.svg、ml-model-2.svg、memories.svg等icons-custom/目录收录了 4 个品牌彩色图标bronze.svg、gold.svg、silver.svg、none.svg覆盖了数据质量、数据资产、实体类型、测试套件等 OpenMetadata 核心领域。导入语法与 Props 规范统一导入路径无论图标来自icons/还是icons-custom/都从同一个入口导入import { Memories, AddAlert, Domain } from openmetadata/ui-core-components/icons;这一行为由 package.json 的exports字段中的./icons子路径导出保证类型、ESM、CJS 三个入口分别指向dist/types/src/icons/index.d.ts、dist/icons/index.es.js与dist/icons/index.cjs.js。Props 与untitledui/icons保持一致图标组件的 Props 形状与untitledui/icons相同Prop类型默认值说明sizenumber24宽高px同时作用于 width 与 heightcolorstringcurrentColorSVG 描边颜色classNamestring—附加 CSS 类名...propsSVGPropsSVGSVGElement—其他任意 SVG 属性对应的类型定义是手写的 src/icons-static/types.ts其中IconProps extends SVGPropsSVGSVGElement并补充了color?: string与size?: number。用法示例Memories size{20} color#667085 / AddAlert size{16} classNametw:text-brand-600 /以实际生成的 Memories.tsx 为例可以看到默认参数、aria-hidden、strokeLinecapround、strokeLinejoinround等属性都由模板统一注入使用方只需关心size与color。新增图标的四步工作流第 1 步从 Figma 导出 SVG在 Figma 中选择图标 frame导出格式必须选SVG而非 PNG/PDF确保不包含画板artboard背景。第 2 步命名并放置文件文件名使用kebab-case放入包根目录的icons/目录openmetadata-ui-core-components/src/main/resources/ui/icons/my-new-icon.svg合法命名示例及其对应的组件名映射规则data-quality.svg→DataQualityapi-collection.svg→ApiCollectionml-model-2.svg→MlModel2数字和连字符都是允许的空格、等特殊字符会在生成时被剔除——因此务必用连字符作为单词分隔符。这一规则在生成器源码的toComponentName()中实现见 generate-icons.mjs先按非字母数字字符切分再对每个片段首字母大写后拼接成 PascalCase。第 3 步运行生成器并提交产物cd openmetadata-ui-core-components/src/main/resources/ui yarn icons:generate该命令在 package.json 中定义为node scripts/generate-icons.mjs。运行后会发生三件事用 SVGO 优化 SVG生成src/icons/MyNewIcon.tsx更新src/icons/index.ts将其导出。SVG 与生成的.tsx必须在同一个 PR 中一起提交。因为生成产物被 git 跟踪yarn build保持为纯vite build不依赖运行时生成。第 4 步在 Storybook 中验证yarn storybook打开 http://localhost:6006进入Icons → Library新图标应出现在可搜索的网格中。注意 package.json 中storybook与build-storybook脚本都会先执行yarn icons:generate再启动/构建保证文档与最新图标同步。使用 Storybook 浏览图标库cd openmetadata-ui-core-components/src/main/resources/ui yarn storybook # dev server on http://localhost:6006 yarn build-storybook # static build to storybook-static/在左侧边栏进入Icons → Library后可用的交互能力功能使用方法搜索在搜索框中输入图标名跨所有类别过滤大小调节使用屏幕底部 Controls 面板中的size滑块复制导入语句点击任意图标单元格import 语句即复制到剪贴板生成器工作原理SVGO SVGR 双管线文件角色一览文件角色icons/*.svg源 SVG——kebab-case、已提交、唯一事实来源scripts/generate-icons.mjs读取icons/执行 SVGO SVGR写出src/icons/templates/component.cjsSVGR 模板产出每个.tsx文件src/icons/index.ts由模板逻辑生成的统一导出入口src/icons-static/types.tsIconProps接口手写Vite 库构建配置vite.config.ts会自动发现src/icons/index.ts作为入口——新增图标无需修改任何构建配置。两条管线常规图标 vs 自定义图标生成器将icons/常规与icons-custom/自定义视为两个源目录、同一输出目录、同一导入路径。核心差异体现在 SVGO 配置与 SVGR 配置上常规图标管线svgoRegularConfig见 generate-icons.mjs使用preset-default保留viewBox、cleanupIds、removeDimensions、removeAttrs剔除xmlns、data-name、style等共享插件额外剔除stroke-linecap/stroke-linejoin根节点会统一重新注入通过自定义replaceHardcodedColors插件把硬编码十六进制颜色替换为currentColorfillnone、fillwhite、fillurl(...)除外从而让图标完全可通过colorprop 主题化。自定义图标管线svgoCustomConfig见 generate-icons.mjs跳过颜色替换保留品牌色与渐变用prefixIds给 ID 添加图标名前缀防止多个自定义图标同页渲染时渐变/mask ID 冲突在 SVGR 阶段不注入stroke/fill覆盖只注入width/height与aria-hidden见buildSvgrConfig中isCustom分支。组件模板templates/component.cjs对两条管线做了统一处理常规图标直接绑定color自定义图标将color重命名为_color以满足 ESLint 未使用变量规则同时保持两侧 Props 接口一致。每个生成的组件都会设置displayName。增量更新与产物自洁main()执行时还包含一个容易被忽略的关键逻辑见 generate-icons.mjs删除过期产物。当某个 SVG 从icons/或icons-custom/移除后重新运行生成器会把对应的陈旧.tsx一并清理——清理范围严格限定为.tsx绝不动types.ts等手写文件。随后重新生成index.ts导出IconProps类型与全部组件并对生成代码依次执行本包 ESLint--fix与 Prettier 格式化保证产物与 CI 的 ui-checkstyle 规范一致。完整重新生成yarn icons:generate # 重新读取 icons/ 下所有 SVG覆盖 src/icons/*.tsx 与 index.ts该命令可随时安全运行——它只会触碰生成文件绝不修改types.ts或其他手写文件。实践要点小结新增图标时把 SVG 放入 icons/常规或 icons-custom/彩色/渐变文件名用 kebab-case运行yarn icons:generate后将源 SVG 与生成的 TSX 一起提交组件默认size24、colorcurrentColor与untitledui/icons生态保持一致常规图标颜色跟随colorprop 主题化icons-custom/下的品牌图标保留原始颜色仅暴露尺寸控制新增图标无需改动vite.config.ts构建入口自动发现用yarn storybook打开 Icons → Library 做可视化验收与导入语句复制。【免费下载链接】OpenMetadataThe Open Context Layer for Data and AI , OpenMetadata is the open platform for building trusted data context and business semantics for humans, AI assistants, and agents.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMetadata创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考