贡献图标
图标从 SVG 源文件单向生成,不直接编辑 icons.json。
流程
- 确认图标来自 YunLeFun 品牌或产品仓库,并找到可追溯的 SVG 源文件。
- 除纯品牌外的产品必须同时提供
<product>-mark与<product>-app-icon;品牌可以只提供-mark。 - 在
packages/icons/metadata.json添加变体角色、检索标签和 GitHub 源链接;产品有独立站点时,在所有变体中设置相同的 HTTPSwebsite。派生资产必须设置source.sync: false并说明derivation。 - 新仓库需要先在
icons.config.ts登记本地 checkout,然后运行pnpm icons:collect收集可直接同步的上游 SVG。 - 运行完整校验。
bash
pnpm build
pnpm test
pnpm lint
pnpm typecheck
pnpm docs:build构建链会执行 SVG 清理与 SVGO 优化,并检查 SVG 文件和元数据是否一一对应。
category 使用以下稳定分类:brand(品牌)、official-site(官方站点)、utility(效率工具)、fun-app(趣味应用)。同一产品的所有变体必须属于同一分类;新增类别时需要同步更新公开类型、目录筛选与测试。
pnpm icons:collect:check 只比较 source.sync: true 的子应用源文件与仓库内 SVG 快照,不写文件。派生变体由本仓库管理 canonical SVG,但仍保留上游 provenance。默认从本仓库的同级目录查找其他 YunLeFun 仓库,可通过 YLF_REPOSITORIES_ROOT 覆盖仓库根目录。普通构建不会访问这些仓库。
视觉规范
YunLeFun 图标以 Apple Human Interface Guidelines 的图标原则和官方生产模板作为视觉参考基线:
Apple 的网格、居中、安全区域和光学校准原则用于指导视觉一致性,不表示 YunLeFun 图标需要复制 Apple 的平台外观。落地到本仓库时遵循以下约定:
- 规范预览以
0 0 64 64作为归一化参考网格;canonical SVG 保留来源仓库的原始 viewBox,构建时不强制重绘坐标。 - 独立主体建议占画布约 80%,优先放在
6 6 52 52参考区域内。 - 圆弧、尖角和视觉重量较轻的部分可以光学越界;非背景关键内容通常不超出
4..60。 - 背景色块可以铺满画布;不要为了模拟系统效果预先裁切圆角,最终遮罩交给使用图标的平台。
-mark的画布保持透明,不嵌入平台底板;-app-icon的背景必须覆盖完整方形画布。-app-icon不得使用透明圆角、外层rx或预烘焙的系统阴影;预览器和操作系统只应用一次遮罩。- 按视觉重量居中,不以几何包围盒完全相同作为目标;比较时需要计入描边宽度和圆角端点。
- 至少在 16、24、32 和 64 px 下检查识别度、视觉大小与同组图标的一致性。
- 应用标记优先保持其来源仓库的品牌配色。品牌规范与参考网格冲突时,保留品牌特征并在元数据中说明例外。
命名
- 仅使用小写 kebab-case。
- 产品使用稳定短名加变体后缀,例如
drive-mark、drive-app-icon。 - 图标名必须严格等于
<product>-<variant>;当前变体仅允许mark和app-icon。 <product>只作为同一产品资产的分组标识,不创建drive.svg这类无后缀 SVG,也不添加指向某个变体的 alias。- 消费方必须根据场景显式选择变体;仓库不定义容易产生歧义的“默认图标”。
- 不为同一图形创建重复文件;多个应用共用品牌标记时使用
brand-mark。 - 不把来源不明或仅用于页面装饰的 SVG 收入产品图标集。