vue 使用 svg

说明：很多关于类似的博客或者文档介绍的第三方库，由于有文件目录配置单一或者有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