vue项目中自定义图标的使用

此篇博客以使用Iconfont-阿里巴巴为例：

Iconfont-阿里巴巴字体图标库

Step1：选择自己想要的图标，加入购物车

可以新建一个项目，也可以就用之前有的项目：


然后在图标管理中找到我的项目：

直接下载到本地：

就会出现这样的一个包：

将压缩包打开，将里面的文件的文件复制到项目的文件下，然后在文件的main.js中引入

方法一：
将样式iconfont.css文件引入之后就可以直接使用

//使用方法1：
<span class="iconfont">&#xe7c2;</span>
//使用方法2：
 <span class="iconfont icon-address"></span>

最后效果：


由于使用的是Unicode 和 font-class 引用，只能显示单色

方法二：
Symbol引用，只需将里面的JS文件引入到main.js中，然后将通用CSS代码从main.js引入

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

import "./assets/iconfont/iconfont"

然后就可以在所有的页面使用这个图标了
使用方法：

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

最后效果