说明：很多关于类似的博客或者文档介绍的第三方库，由于有文件目录配置单一或者有webpack 兼容问题，所以都不考虑此等方法，结合部分博客内容，于是博主自己根据自己推敲和使用来完成 vue 的svg的图片使用。
1、使用阿里巴巴iconfont
网址：点击此处进入此网站
1.1、收集图标：
搜索你想要的图标.png
在搜索框中搜索你想要的图标，这里博主以home为例。
1.2、登录并加入购物车：
加入购物车.png
1.3、添加项目并从购物车中加入图标进项目：
点击购物车.png
在购物车弹出侧滑窗口中添加图标到我的项目中去:
添加到项目.png
1.4、下载源码：
我的项目.png
在图标管理栏目上面点击我的项目进入到我的项目管理页面：
项目管理页面.png
下载代码：
点击下载.png
2、选取源码进行操作：
2.1、选取下载完成后的两个文件：
目录中一定有这两个文件.png
2.2、导包：
<!-- 当前需要使用图标的vue文件 -->
<script>
import '@/assets/icon/iconfont.js';
export default {
......
}
3、使用home 图标：
3.1 、书写样式：
.icon {
width: 18px;
height:18px;
fill: currentColor;
overflow: hidden;
margin: 5px;
}
注意：fill 就是指定图标当前的颜色
3.2、使用svg图标：
....
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<b>首页</b>
....
注意：xlink:href后面使用的默认名称为 # 阿里图标项目名称-图标名称，此名称可以在我的项目中进行修改。
4、运行效果：
运行效果.gif
