#第 2 章：在 Figma 里画一个多色图标

这一章回答一个问题：一个 sag-icons 风格的图标是怎么被画出来的。

我们不打算把你培训成设计师。但如果你要做一个图标库，至少要懂几个关键的设计决策——它们决定了你的图标能不能被工程化、能不能保持视觉一致、能不能被 CSS 主题系统驱动。

读完这一章你会知道：

• sag-icons 的"24×24 / 2px stroke"规范具体意味着什么
• 多色调图标怎么用 data-tone 标记语义色块
• 怎么从 Figma 导出 SVG、再到能用的 TS 文件
• 三个真实图标的完整设计过程（home / brand / workbench）

#2.1 为什么先讲设计

你可能觉得"设计"是设计师的事，前端只管搬砖。但做图标库不是这样。

库里的图标必须有视觉一致性——同样的圆角、同样的线宽、同样的视觉重量。如果每个图标是不同人凭感觉画的，放在一起就会显得"杂乱"。

而 sag-icons 这种"多色调"图标库还有额外的约束：每个图标必须能被 CSS 主题系统驱动。这意味着图标作者要在画的时候就把"这块是蓝色、那块是绿色"标记好——不是画完事再补。

下面这些设计规范，sag-icons 都遵循。后面我们讲 Figma 操作时，你会看到这些规范是怎么落到几何里的。

#2.2 设计规范

#网格与画板

• 画板：24 × 24 像素
• 网格：8 像素基础网格，关键对齐点放在 8 的倍数上
• 安全边距：2 像素（图标离画板边至少留 2px）

为什么 24×24？因为它是事实标准——Lucide、Tabler、Heroicons、Phosphor 全是 24×24。一旦换尺寸，你就要给所有下游应用做适配，得不偿失。

#线宽

• stroke-width：2px（圆头圆角）
• stroke-linecap：round
• stroke-linejoin：round

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

24×24 + 2px stroke 是经过验证的"小尺寸可读"组合。再小的画板（如 16×16）就要降到 1.5px stroke，会出现亚像素模糊。

#圆角

• 矩形、矩形变体：rx="2"（图标大小约 7-8px）
• 较大的矩形（>14px）：rx="3" 或 rx="4"
• 小元素（圆点、装饰）：r="1.5" 或 r="2"

这没有标准答案，但所有图标用同一套规则。一旦混用就会出现"这个圆角硬、那个圆角软"的违和感。

#调色板

sag-icons 定义了 5 个语义色：

注意：sag-icons 不用红色。红色通常代表"错误/危险"，会冲淡其他语义色的视觉密度。如果一定要做"错误"图标，琥珀色 + 警告图标本身的语义就够用了。

这套色板映射在 src/css/svg-icon.ts:9-17。

#2.3 一个图标的解剖

我们以 home 为例，看清一个 sag-icons 图标内部结构：

export const home = `<path data-tone="blue" d="M4.5 9V21H19.5V9L12 3 4.5 9Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.5 14.5V21H14.5V14.5H9.5Z" fill="#fff" stroke="#fff" stroke-width="2" stroke-linejoin="round" />
<path data-tone="blue" d="M4.5 21H19.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" />`;

三个 path，分别承担不同角色：

1. 屋顶 + 墙（data-tone="blue"）：语义色块。被 CSS 主题系统接管。
2. 门（无 data-tone）：永远白色。用 fill="#fff" 写死——门不应该跟着主题变。
3. 地面线（data-tone="blue"）：语义色块。

注意第二点：不是所有 path 都需要语义色。像"门"这种功能性固定的元素，直接写死颜色反而更安全——它不会跟着主题切换出错。

对应文件：src/data/icons/base/home.ts

#2.4 在 Figma 里画一个图标

现在我们画一个新图标，从空白画板开始。

#步骤 1：准备画板

1. 新建 Figma 文件，命名 <your-lib-name>-icons
2. 创建一个 24×24 Frame，命名 icon-home（或你想画的图标）
3. 启用 8px 网格（View → Layout Grids → Grid：8）
4. 给 Frame 填一个浅色背景，方便看 stroke

#步骤 2：建组件命名规范

建议在 Figma 里建立这样的目录：

每个图标做成 Figma Component，命名 icon-<kebab-case>。这样导出 SVG 时会自动命名。

#步骤 3：画几何

以 workbench 为例（这是 sag-icons 的真实图标）：

1. 画四个矩形：每个 7×7 圆角 rx="2"
2. 左上：填色 data-tone="blue"
3. 右上：填色 data-tone="cyan"
4. 左下：填色 data-tone="green"
5. 右下：先画一个矩形底，再叠加一个圆角矩形 data-tone="amber"

对应文件：src/data/icons/nav/workbench.ts

上图是占位符。实际教程里你会看到 Figma 截图。

关键设计动作：

• 四个方块尺寸完全相同（7×7）——视觉重量一致
• rx="2" 而不是 rx="0"——保持柔和
• 间距均为 4px——视觉节奏一致
• 第四块（amber）是一个圆角矩形叠加在 7×7 方块上，刻意"溢出"——制造"不规则"感，让图标有活力

#步骤 4：标 data-tone

在 Figma 里，"data-tone"不是 Figma 原生属性。你有两个办法：

办法 A：用图层命名约定

在 Figma 里把每个色块的图层命名为 tone-blue / tone-cyan 等。导出 SVG 后用脚本批量替换为 data-tone 属性（后面第 3 章会讲脚本）。

办法 B：用 Figma 插件

装 Figma Data Tone 插件（如果有），或在 SVG 导出后用 sed 替换。

sag-icons 实际用的是办法 A：图层命名 → 脚本转换。这是最稳的版本控制友好的方式。

#2.5 视觉一致性自查清单

画完一个图标后问这几个问题：

• 画板是不是 24×24？不是的话其它图标和它放一起会大小不一
• stroke-width 是不是 2？不是的话线条粗细会违和
• 关键对齐点是不是在 8 的倍数上？用 Figma 的 Smart Guides 检查
• rx 用的值和其他图标一致吗？同尺寸元素必须用同一 rx
• 色块用的是不是 5 个语义色之一？临时色（紫色、品红）会让换肤失效
• 视觉重量和其他图标相当？把图标缩到 16×16 看是否还能辨认

如果你打算扩到 200+ 图标，一致性比单个图标的美观更重要。

#2.6 类别划分

sag-icons 把 78 个图标分成 7 个类别：

类别不是强约束，但合理分类对：

• 文档站自动生成图标列表
• 用户按场景查找图标
• 团队分工协作（每人负责一个类别）

第 3 章我们会看到，类别直接映射到 src/data/icons/<category>/ 目录。

#2.7 这一章的产出

到这里你应该明白：

• 一个 sag-icons 图标在 Figma 里的样子
• 24×24 / 2px stroke / 5 色板的硬约束
• 怎么把"颜色"映射到 data-tone

下一章我们讲怎么把 Figma 里的图标变成 TS 文件——也就是 sag-icons 的图标数据层。

#对应文件