如何调整基于 SVG 的 ICON 库粗细度

本文主要记录调整基于 SVG 实现的 ICON 库粗细度的方法，并简单介绍几种主流的 Icon 实现方式。

请指出文中任何不严谨之处，感谢！

---

目录

1. 问题场景
2. Icon 库主流实现方式
3. 结语

---

问题场景

在迁移到基于 SVG 的新组件库时，面临无法直接控制图标粗细的挑战：

• 基于 font：通过 font-weight 控制。
• 基于 SVG：需要修改 stroke 和 stroke-width 属性。

场景示例：

<div class="dad">
  <div class="son">
    <Icon class="icon" />
  </div>
</div>

CSS：

.icon {
  font-weight: bold;
}

对于 SVG 图标，修改 `stroke` 和 `stroke-width` 属性来调整粗细：

.icon svg {
  stroke: black; // 描边颜色
  stroke-width: 2; // 描边粗度
}

---

私货——Icon-库主流实现方式

Icon Fonts

• 优点：
  • 简单易用，兼容性好。
  • 方便使用 `font-size` 等属性修改样式。
• 缺点：
  • 容易导致文件膨胀。
  • 在高分辨率显示上易失真。

SVG Fonts

• 优点：
  • 不失真，可自由缩放。
  • 支持 CSS 和 JS 操作。
• 缺点：
  • 文件大小可能较大。
  • 嵌入 HTML 时代码较长。

SVG Symbol

• 优点：
  • 高可复用性。
• 缺点：
  • 不支持外部引用。
  • 管理大型库时挑战较大。

Unicode Icons

• 优点：
  • 轻量级，兼容性好。
• 缺点：
  • 类型有限，不适合复杂图案。
  • 不同平台表现可能不一致。

---

结语

本文主要记录了如何通过调整 SVG 图标的 stroke 属性来控制粗细度。欢迎在评论区提供反馈！
另外，对于svg标签，他内部还有来构建，将stroke放到path上同样能够起到作用～

• MDN 相关文档
• 其他个人博客