icon 方案

• 字体图标
• svg 图标

字体图标

unicode 通过设置 @font-face 加载字体库，字体库是这个 unicode 的图形描述。字体图标实际上就是长相奇怪的文字

优点：可以设置字体大小、颜色，矢量放大不失真 缺点：只能单色。

svg 图标

先用工具把 svg 合并为一个 svg 文件，再使用图标的地方使用

<svg>
  <use xlink:href="#icon-xx" />
  <svg></svg>
</svg>

优点是：矢量、可以多色。

参考文章：

• 想学 svg 图标，看这个教程  https://jirengu.github.io/svg-you-should-know/zh-cn/chapter1/svg_icon.html