记录在 Web 端使用矢量图标的步骤，工具：iconfont - 阿里巴巴矢量图标库。
添加图标
在图标库中挑选需要的图标，点击 “购物车” 添加入库。
选择完毕后，打开 “购物车”，将所有图标 “添加至项目”。
生成 JS 文件
在项目中查看，选择 Symbol 方式，打开在线链接，然后在下方生成 “链接代码”。
此处的代码是一个 js 文件，可以用浏览器打开，然后右键保存文件。
观察这个 js 文件，发现它保存了每个图标的 id 和 path 等信息。
<symbol id="icon-xiaoxi-zhihui" viewBox="0 0 1024 1024">
<path d="M523.946667 85.333333C802.773333 85.333333 982.826667 307.541333 982.826667 511.338667c0 242.837333-197.397333 448-458.837334 448-84.16 0-150.464-16.597333-221.610666-55.402667l-88.618667 50.197333c-27.797333 8.426667-50.474667 5.162667-68.010667-9.834666-17.557333-14.997333-25.130667-34.730667-22.72-59.2a19570.688 19570.688 0 0 0 29.653334-106.368C123.008 741.76 64 656.426667 64 511.338667 64 307.541333 245.141333 85.333333 523.946667 85.333333z m-1.28 64C304.064 149.333333 128 317.12 128 522.666667c0 77.354667 24.874667 151.125333 70.634667 213.184l5.397333 7.125333 18.218667 23.509333-36.970667 128.746667a0.32 0.32 0 0 0 0.490667 0.384l113.408-63.829333 26.752 14.592C385.237333 878.72 452.544 896 522.666667 896 741.269333 896 917.333333 728.213333 917.333333 522.666667S741.269333 149.333333 522.666667 149.333333z m-192 320a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.848 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.869333 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z" fill="#111111" ></path>
</symbol>
于是，在 Web 端，可以通过 id 来使用这些图标。
更多详细内容，可以查看官方文档，官方提供了 3 种方式。
文中使用的 Symbol 引用，是一种全新的使用方式，本质上是做了一个 svg 的集合，具有如下优点：
- 支持多色图标，不再受单色限制。
- 支持像字体那样，通过
font-size，color来调整样式。
在 HTML 中应用
- 引入刚才下载的
js文件； - 给图标设置
CSS样式； - 挑选相应图标并获取类名，应用于页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>icon-use</title>
<!-- font.js 引入刚才下载的 js 文件 -->
<script src="font.js"></script>
<!-- 给图标设置 CSS 样式 -->
<style type="text/css">
.icon {
width: 5em;
height: 5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 挑选相应图标并获取类名，应用于页面 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi-zhihui"></use>
</svg>
</body>
</html>