說明：很多關(guān)于類似的博客或者文檔介紹的第三方庫，由于有文件目錄配置單一或者有webpack 兼容問題，所以都不考慮此等方法，結(jié)合部分博客內(nèi)容，于是博主自己根據(jù)自己推敲和使用來完成 vue 的svg的圖片使用。

1、使用阿里巴巴iconfont

網(wǎng)址：點擊此處進入此網(wǎng)站

1.1、收集圖標(biāo)：

搜索你想要的圖標(biāo).png

在搜索框中搜索你想要的圖標(biāo)，這里博主以home為例。

1.2、登錄并加入購物車：

加入購物車.png

1.3、添加項目并從購物車中加入圖標(biāo)進項目：

點擊購物車.png

在購物車彈出側(cè)滑窗口中添加圖標(biāo)到我的項目中去:

添加到項目.png

1.4、下載源碼：

我的項目.png

在圖標(biāo)管理欄目上面點擊我的項目進入到我的項目管理頁面：

項目管理頁面.png

下載代碼：

點擊下載.png

2、選取源碼進行操作：

2.1、選取下載完成后的兩個文件：

目錄中一定有這兩個文件.png

2.2、導(dǎo)包：

<!-- 當(dāng)前需要使用圖標(biāo)的vue文件 -->
<script>
import '@/assets/icon/iconfont.js';
export default {
      ......
}

3、使用home 圖標(biāo)：

3.1 、書寫樣式：

    .icon {
    width: 18px;
    height:18px;
    fill: currentColor;
    overflow: hidden;
    margin: 5px;
}

注意：fill 就是指定圖標(biāo)當(dāng)前的顏色

3.2、使用svg圖標(biāo)：

....
     <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-home"></use>
     </svg>
              <b>首頁</b>
....

注意：xlink:href后面使用的默認(rèn)名稱為 # 阿里圖標(biāo)項目名稱-圖標(biāo)名稱，此名稱可以在我的項目中進行修改。

4、運行效果：

運行效果.gif