icons

图标

这项技能会按照项目图标集自身的风格，绘制该图标集中缺少的图标。每个新字形都要对照整个图标集进行测量，并以便于动画和变形的方式绘制，最后展示在一张图纸上。

测量图标集之前，不会绘制任何内容

规范必须精确。图纸会根据图标集中已有的每个图标测量规范，每个新字形都必须遵循规范。猜测描边、半径或网格都算一项问题。

当用户说 draw an icon for、we need a ... icon、custom icons 或 the set doesn't have a 时运行此技能。当用户说 match our icons、filled version、animate this icon、morph、icon sheet 或 this icon looks off next to the others 时，也运行此技能。

要绘制哪些字形属于 scope。先搜索图标集属于 reuse。光学微调属于 alignment。任何图标动画的曲线、时长和减少动态效果时的后备方案属于 motion。可访问名称属于 defaults。可见标签属于 copy。对比度属于 color。

1. 只绘制图标集中缺少的内容

先运行 reuse。搜索图标包、图标文件夹或存放内联图标的映射，仅在图标不存在时绘制字形。重复绘制图标集中已有的字形属于 icons-only-missing。

将字形添加到图标集所在位置，与同组图标放在一起。把新图标留在功能文件中属于 icons-in-the-package。在该位置添加缺失字形不属于 reuse 中的问题。

2. 测量整个图标集

将 sheet.html 复制到 .icons/<set>/index.html，该文件夹会被忽略，绝不能放进源代码树。在同一目录下编写 sheet.js，按其头部注释所示列出所有现有图标，然后打开它。

将徽标和品牌标记标为 brand: true。绝不测量、重绘或重新设置它们的样式。

图纸会根据最常见 viewBox 中的每个现有图标推导规范。它会按类型记录描边、端点、连接处、半径、网格步长、内边距、圆形溢出量和墨迹覆盖率。点击 Copy Spec 会生成 icon-spec.md，并将其保存在图标旁边。

在 icon-spec.md 尚不存在时绘制，或依据手工测量、样本或记忆中的规范绘制，属于 icons-measure-the-spec。如果同一 viewBox 中的图标少于 3 个，请停止并索取参考图标集。

偏离规范的现有图标会显示为异常值。在报告中列出它们并保持原样，因为重绘属于 scope 下的另一项请求。

3. 按照图标集的网格绘制

将每个锚点放在规范的网格步长上，曲线控制柄则不受限制。使用 currentColor，绝不使用字面颜色。坐标未对齐步长或描边使用十六进制颜色，都属于 icons-on-the-grid。

在步长范围内，让直线描边边缘落在整像素上。宽度为 2 的描边以整像素为中心，宽度为 1 的描边以半像素为中心。宽度为 1.5 的描边以四分之一像素为中心，因此其外边缘会落在整像素上。

如果图标集为不同尺寸分别提供图稿，则绘制所有尺寸，并为每个尺寸分别运行一张图纸。

如果图标集的图标仅由整像素上的矩形构成，则该图标集属于像素风格。先将每个字形绘制为文本网格，再将网格转换为矩形。以平滑路径开始绘制像素图标属于 icons-pixel-grid-first。像素风格图标集跳过第 5 步，并在 motion 中改用交叉淡入淡出。

4. 修正视觉效果

不同部分之间至少间隔一个描边宽度，且绝不能小于 1px。两个描边在 16px 尺寸下合并成一个色块，属于 icons-open-gaps。

圆形可以超出内边距，但不得超过规范中的圆形溢出量。箭头和播放图形应按照 alignment 中的要求进行微调，并将调整应用到坐标中。圆形尺寸与正方形相同属于 alignment-visual-weight；播放图标在其边界框内居中属于 alignment-optical-glyph。

5. 以 Morph Form 编写每个新图标

每个新图标都会动效化，并变形为同类的其他新图标。每个图标都包含相同数量的 path 元素，且每条路径都是一个绝对 M 命令，后跟相同数量的显式 C 段。

图集根据最复杂的新图标设定这两个数量，并将其显示为 Morph Form。较短的路径应在末尾补上零长度段。

两个仅形状方向不同的图标（例如后退和前进）共用同一份绘图。切换时旋转整个图标，而不移动锚点；图集会将这对图标标记为 Spins。

直线段是一个控制柄位于自身两端的三次曲线。闭合描边应回到起点，而不是使用 Z。未使用的路径应收缩为另一条描边上的一个点，并保持隐藏。

每条路径都从最靠上的锚点开始；若有多个，则从最靠左的锚点开始。按路径长度从长到短排序，让较大的描边变形为较大的描边。若要变形为现有图标，请将该图标的 Morph Form 作为使用相同墨色的新图标添加。

会合并路径或转换形状的优化器会破坏这种形式，因此请对这些文件关闭 mergePaths 和 convertShapeToPath。出现 circle、rect、line、Z、相对命令，或路径数量偏离 Morph Form 时，问题标记为 icons-morph-form。

6. 基于同一骨架构建描边版和填充版

描边版和填充版共用同一骨架和 Morph Form。填充版填充描边版自身的路径，并保留其轮廓。内部细节应形成至少 1px 宽的负形，更窄的负形则应移除。从头重绘填充图标会触发 icons-one-skeleton。填充图标无法变形，因此描边版和填充版应使用 motion 中的交叉淡入淡出进行切换。

7. 根据规范检查每个图标

图集会检查每个新图标的 viewBox、描边、开放端点处的端帽、拐角处的连接方式、网格、留白、圆角，以及小数位是否超过 3 位。它还会拒绝变换、id、class、内联样式、蒙版和剪切路径。

墨色覆盖率会在该图集已有的范围内，分别比较描边版与描边版、填充版与填充版。若图集中缺少某种类型，则会显示 Not Verified，并在图集中人工评估。每项未通过都会标记为 icons-lint-the-spec。

8. 在同一张图集中查看整个图标集

图集会按名称排序，因此新字形会排列在旧字形之间，并为每个新字形添加标记。顶部的 Style、Size 和 Dark Tiles 设置会决定网格的显示方式。

Pixels 会以图标的原生尺寸光栅化每个图标，即每个单位对应一个设备像素，然后将其放大 3 倍。若边缘模糊或出现重影，则说明网格有问题。

Weight 会将 48px 图标模糊处理 2px，让画面只剩下粗细差异。若新字形看起来比相邻图标更深或更浅，则说明它太密或太细。

Morph 会按照 motion 中的曲线，让每个新图标变形为同类的下一个图标。若变形时出现扭曲、自交或闪烁的点，则说明路径顺序错误。

点击图标会打开其对话框。其 Morph 选项卡会将舞台下的任意图标（包括粘贴的图标）串联起来，并说明每一步是旋转、按原样变形，还是需要转换。

转换后的预览是图集自行推测的结果，并非最终交付的形式。Prompts 会复制修复说明、重绘要求或 Morph Form 请求，供 Agent 应用。

从头编写的图集，或逐个检查的图标，会触发 icons-one-sheet。修复所有问题并重新打开图集，直到 Findings 为空。

9. 匹配项目的图标组件

请使用项目现有的图标 API 生成组件，包括其属性和文件结构。每条路径都应保留为独立元素，以便调用方为 d 添加动效或绘制描边。使用自定义属性的一次性组件，或缺少 aria-hidden 的装饰性图标，会触发 icons-match-the-api。

只有在用户提出要求时，才添加悬停、激活或切换动效，并通过 motion 实现。若图标是控件中的唯一内容，请注明 defaults-name-icon-buttons。对比度问题请注明 color-ui-contrast。

配对

每项检查都是一组配对：有问题的行旁边就是替换它的行。

规则	有问题	替换为
icons-only-missing	图标集中已有 SearchIcon，却又新增一个	图标集中的 SearchIcon
icons-in-the-package	将 ReceiptIcon 放在功能文件夹中	将 ReceiptIcon 放在图标集中，与同组图标并列
icons-measure-the-spec	手动根据 3 个图标测量规格	从图纸复制 icon-spec.md，再复制路径
icons-on-the-grid	使用 M5 2.3，并设置 stroke="#111"，但步长为 0.25	使用 M5 2.25，并设置 stroke="currentColor"
icons-pixel-grid-first	用平滑路径绘制像素图标	将文本网格转换为矩形
icons-open-gaps	两条间距为 0.5 的 1.5 描边	将描边间距设为 1.5
icons-morph-form	<circle r="4.5" /> 旁边是 <path d="M10.5 10.5l3 3" />	3 条路径，每条都包含 M 和 5 段 C
icons-one-skeleton	将填充图标画成一条新路径	填充轮廓图标的路径
icons-lint-the-spec	在 2px 描边上使用 transform="translate(0.5 0.5)"	使用规格中的描边和内边距，不添加变换
icons-one-sheet	单独以 24px 截取新图标的屏幕截图	复制 sheet.html，只编写 sheet.js
icons-match-the-api	功能文件中的 svg 自带尺寸属性	使用项目的图标组件；装饰性图标设置 aria-hidden

报告

严重性。 HIGH 表示未参照规格绘制的图标，或图标集已有图标的重复项。MEDIUM 表示图标未对齐网格、像素图标集被绘制成路径、间隙封闭、Lint 未通过、图标不符合变形形态，或出现第二套骨架。缺少图纸、文件不在图标集中，或组件不符合项目 API，也属于 MEDIUM。LOW 表示图纸上的变形会扭曲或闪烁。

格式。 每个根本原因列出一项发现：

file:line - [rule-id] what is wrong

然后提供 Rule | Count | Severity 汇总，并将已有的例外项另列为清单。仍有任何 HIGH 时选择 Block，否则选择 Approve。如果问题在于工作本身而非文件，请注明 request 2 - [rule-id]。无法渲染的图纸标记为 Not verified。