当你的产品需要 50 个图标，但只剩两天：SVG 资产的工程化生成思路

问题背景

很多独立开发者和小型团队都会遇到一个尴尬的时间点：产品功能已经完成，设计稿也基本定型，但资产（icons、插画、引导图）还停留在"先用占位图顶上"的阶段。等到上线前两天，PM 在群里说"图标统一一下吧"，设计师说"排期满了"，最后这个活往往落在工程师自己头上。

如果走传统流程：用 Figma 画、导出 PNG、再逐个替换，工作量随图标数量线性增长。更麻烦的是，设计师给到的 PNG 之后想改颜色或加 hover 状态，只能再让设计师改一次。

这篇文章记录一个更轻量的思路：用可编辑的 SVG 资产作为产物的图形层，让前端可以自己维护一份"图标族"，在产品迭代中持续可用。

核心思路

把图标当作"代码资产"而非"图片资源"来管理。SVG 在这一点上有天然优势：

• 文本可编辑：颜色、描边、填充都是属性，改起来不需要重出图
• 可被脚本批量处理：比如统一调整所有图标的描边宽度
• 体积小：相同视觉密度下，SVG 通常比 PNG 小一个数量级
• 可访问性友好：可以加 `