参看一篇博客：《使用SVG symbols建立图标系统完整指南》

一、svg symbol 的大概逻辑

svg symbol 的大概逻辑是这样的，先建立一个 svg 图形模板对象，然后使用 svg 的 use 方法引用图标

  1. // 建立 svg 图形模板对象
  2. // 一个 symbol 就是一个图标
  3. <svg>
  4.   <symbol id="xxx">
  5.     <path></path>
  6.   </symbol>
  7.   <symbol id="yyy">
  8.     <path></path>
  9.   </symbol>
  10.   <symbol id="zzz">
  11.     <path></path>
  12.   </symbol>
  13. </svg>
  15. // 使用图标
  16. // svg 中使用 use 方法
  17. <svg>
  18.     <use xlink:href="#heart"/>
  19. </svg>

建立 svg 图形模板不是我们手动生成的，一般都是通过模块化工具或 JavaScript 自动生成

二、阿里的 IconFont 网站

官网：https://www.iconfont.cn/

这个网站非常贴心，我们可以在上面批量选择一群 svg 图标并制作成一个单独的 svg 图形模板对象，我在这里就简称为「svg 图标库」吧。我们怎么把这个「svg 图标库」引入进我们的项目里呢？

网站的强大之处就来了，它已经帮我们生成好了代码，并提供两种引入方式供我们选择。

  1. 方式一：把整个「svg 图标库」的代码下载本地，然后引入其中的 js 代码
  2. 方式二：网站贴心地为「svg 图标库」提供免费的在线 js，我们点击生成在线 js，直接引入即可

三、一些使用细节

  1. 我们一般把 js 代码放到项目中靠前的位置，常常放在 head 标签里，因为后面我们就要使用到它了
  2. 这段 js 代码会在 body 标签的开头生成「svg 标签」，其中包裹着「symbol 标签」→「use 标签」
  3. 在需要用到图标的地方，使用「svg 标签」包裹「use 标签」的形式引入 svg

「@浪里淘沙的小法师」