过去使用图标主要有三种方案：

• PNG 小图（配合雪碧图）

• Iconfont

• SVG

到了今天，我司大部分项目都把图标系统全面迁移到 SVG。

对比PNG/JPG

PNG/JPG 是位图，只能按像素存图。

SVG 是矢量图，数学计算绘制：

• 任意缩放不糊

• 任意清晰度场景都不怕

• 深色模式也不会变形

这点直接解决了长期存在的一个痛点：适配成本太高。

同样一个图标：

• PNG 做 1x/2x/3x 需要三份资源

• SVG 只要一份

PNG 改颜色很麻烦：

• 设计师改

• 重新导出

• 重新上传/构建

Iconfont 的颜色只能统一，只能覆盖轮廓颜色，多色很麻烦。

SVG 则非常灵活：

.icon {   fill: currentColor; }