阿里图标库的使用

vue项目使用阿里图标库的图标

1.打开阿里图标库的首页，登录注册一下，搜索需要的图标，加入购物车

2.点击首页右上角的购物车，将刚刚加入购物车的图标添加到项目，如果还没有项目就新建一个

![在这里插入图片描述](https://img-blog.csdnimg.cn/ada8af1ca51b41a2b45adbeeb4cef32f.png

前置工作完成了，接下来是如何在vue项目中使用图标，这里我使用的是symol引用

symbol 引用

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。

第一步：拷贝项目下面生成的symbol代码：

vue项目中根目录下public/index.html 文件下引入symbol代码

第二步：app.js加入通用css代码（引入一次就行）：

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

第三步：挑选相应图标并获取类名，应用于页面：

复制以下通用代码，填入图标具体的id

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

应用于vue页面上

完成！！