icon-set-generator

图标集生成器

生成专为特定项目量身打造、视觉风格统一的自定义 SVG 图标集。每组图标都基于统一的样式规范构建，确保所有图标看起来浑然一体——线条粗细一致、转角处理一致、视觉密度一致。

这为什么很重要

通用图标库（Lucide、Heroicons）固然不错，但所有使用它们的网站看起来都很相似。自定义图标集能赋予项目独特的视觉形象。难点在于保持一致性——单独绘制 20 多个图标很容易导致风格偏移。此技能通过一次性定义样式规则，并在每个图标中贯彻这些规则，解决了这个问题。

工作流

步骤 1：了解项目

询问项目相关信息。你需要充分了解项目，才能推荐图标并选择风格：

• 业务／项目是什么？（行业、名称、氛围）
• 是否有品牌指南或配色方案？（虽然 SVG 使用 currentColor，但这些信息有助于选择风格）
• 想要什么感觉？（现代、友好、企业风、简约、大胆）
• 大约需要多少个图标？（小型网站通常需要 15–25 个）

像“纽卡斯尔的一家水管工，风格现代”这样的简介就足以继续。不要问得太细。

步骤 2：推荐图标

阅读 references/industry-icons.md，了解针对不同行业的建议。按以下类别整理：

• 导航 — 菜单、关闭、箭头、搜索
• 沟通 — 电话、电子邮件、位置、时钟
• 信任 — 星形、盾牌、奖项、用户
• 操作 — 下载、分享、日历、表单
• 行业专属 — 此类业务独有的图标

展示列表。生成前，让用户添加、删除或重命名图标。

步骤 3：定义样式规范

阅读 references/style-presets.md，了解完整的预设定义。选择一个预设作为起点：

预设	适用于	线条粗细	端点／连接处	转角
简洁	大多数企业网站	1.5px	圆形／圆形	2px
锐利	企业／技术类	1.5px	方形／斜接	0px
柔和	友好／亲切	2px	圆形／圆形	4px
极简	优雅／编辑类	1px	圆形／圆形	0px
醒目	强烈视觉效果／易于识别	2.5px	圆形／圆形	2px

告诉用户你推荐哪个预设以及原因，然后征求确认。

步骤 4：生成图标

按照下方的 SVG 规则生成每个图标。输出到项目根目录下的 icons/ 目录（或用户指定的位置）。

生成前阅读 references/svg-examples.md——其中包含参考实现，展示了合适的复杂度，以及如何处理常见的图标形状。

每批生成约 5 个图标。每批完成后，先直观检查风格一致性，再继续生成。所有图标完成后，创建预览页面和 style-spec.json。

步骤 5：交付

输出结构：

icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...

先展示 preview.html，让用户直观看到完整的图标集。

---

SVG 规则

一组中的每个图标都必须遵循以下所有规则。即使是细微的不一致——例如线条粗细略有不同，或其他图标都是锐角却出现一个圆角——也会让整组图标显得不专业。

SVG 模板

每个图标都使用以下精确的外层结构：

<svg xmlns="http://www.w3.org/2000/svg"
  width="{grid}" height="{grid}"
  viewBox="0 0 {grid} {grid}"
  fill="none"
  stroke="currentColor"
  stroke-width="{strokeWidth}"
  stroke-linecap="{strokeLinecap}"
  stroke-linejoin="{strokeLinejoin}">
  
</svg>

硬性规则

1. 仅使用 currentColor — 切勿硬编码颜色。SVG 从 CSS 继承颜色。不要使用 fill="#000" 或 stroke="blue"。如果形状需要填充，请使用 fill="currentColor"。

2. viewBox 完全一致 — 每个图标都使用相同的 viewBox，无一例外。

3. 根元素描边属性完全一致 — 所有图标的 <svg> 元素上的 stroke-width、stroke-linecap、stroke-linejoin 必须一致。只有确有必要时，才在单个元素上进行覆盖。

4. 根元素上不使用变换 — 不要使用 translate、rotate、scale。将位置调整融入坐标中。

5. 不使用 ID 或类名 — 保持 SVG 简洁，以便外部设置样式。

6. 坐标精度 — 最多保留 2 位小数。对齐到半像素网格（例如 12、12.5，而非 12.333）。

7. 内边距一致 — 保持配置的内边距与 viewBox 边缘的距离。对于内边距为 2px 的 24px 网格，绘制范围应在 2–22 坐标之间。

8. 尽量减少元素 — 在实际可行的前提下，尽可能减少 <path>、<circle>、<rect>、<line> 元素。越简单，文件越小，渲染越快。

9. 视觉居中 — 图标应在视觉上居中，而不只是数学意义上居中。向左的箭头应略微右移。带烟囱的房屋应针对不对称进行调整。

视觉校正

细微但对专业效果至关重要：

• 曲线描边补偿：相同描边宽度下，曲线看起来比直线更细。对于主要由曲线构成的图标（电话、地球仪），应略微放大路径，而不是改变描边宽度。
• 尖角形状的超出量：箭头、折角和三角形应比方形的边界多延伸约 0.5px，才能看起来尺寸相同。
• 视觉重量平衡：简单图标（单个折角）看起来会比复杂图标（齿轮）更轻。应在网格中略微放大简单图标，或使用稍粗实的路径。任何图标都不应明显比其他图标更轻或更重。

---

style-spec.json

{
  "name": "project-name-icons",
  "preset": "clean",
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true,
  "iconCount": 20,
  "icons": ["home", "phone", "email"],
  "generated": "2026-02-15"
}

---

预览页面

生成一个独立的 HTML 文件，展示所有图标以供视觉检查。模板请参阅 references/preview-template.md。要求：

• 以原始尺寸（24px）和标签展示所有图标的网格
• 以 2 倍尺寸（48px）展示相同网格，以便检查细节
• 深色背景区域（深色背景上的白色图标），用于检查对比度
• 顶部显示样式规范摘要
• 使用内联 CSS，不依赖任何外部内容——只需在浏览器中打开即可
• 将所有 SVG 直接内联到 HTML 中（不要引用外部文件）

---

质量检查清单

交付前逐项核实：

• 所有 SVG 的 viewBox、stroke-width、stroke-linecap、stroke-linejoin 完全一致
• 所有 SVG 仅使用 currentColor
• 整组图标的视觉重量均衡
• 内边距一致（没有内容触及 viewBox 边缘）
• 所有图标在视觉上居中
• 文件名使用小写 kebab-case（arrow-right.svg）
• 预览 HTML 能正确渲染所有图标
• style-spec.json 内容准确，并列出所有图标

---

参考文件

生成前请先阅读：

• references/style-presets.md — 详细的预设定义和选择指南
• references/industry-icons.md — 行业专用图标建议
• references/preview-template.md — 预览页面的 HTML 模板
• references/svg-examples.md — 展示不同复杂度下规范构造方式的 SVG 示例