這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與其他兩種方法相比具有如下特點：

• 支援多色圖示了，不再受單色限制。
• 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
• 相容性較差，支援 ie9+,及現代瀏覽器。
• 瀏覽器渲染svg的效能一般，還不如png。

使用步驟如下：

過程

第一步：建立一個自定義元件component：

建立一個自定義元件component svg-icon,
其程式碼如下:

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

<script>
export default {
    name: 'icon-svg',
    props: {
        iconname: {
            type: String,
            required: true
        }
    },
    computed: {
        iconName() {
            return `#${this.iconname}`
        }
    }
}
</script>

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

第二步：匯入程式碼（引入一次就行）：

進入iconfont 頁面。註冊賬號，可以選擇GitHub關聯登陸，先新建個專案.

然後點選圖示管理---->我的專案----》點選+號 新建專案----》名字自己取

1.FontClass/Symbol字首這個很重要，一定不要寫成：el-icon-***這樣的形式。如果寫成這樣的字首，會和element-ui框架所帶的圖示（icon）衝突，導致你圖示顯示不出來.

​ 2.fontFamily隨便起一個名字，能記住就行

​專案建立完了，你可以往專案裡面新增自己想要的圖示了, 找到想要的圖示新增到購物車，可以通過瀏覽或者搜尋找到自己想要的圖示，然後新增到自己的專案.這裡用的是本地引入，點選下載到本地，解壓出來

只有後面的六個檔案是有用的，拷貝一份匯入到專案的靜態檔案中,
引入js檔案,可以將其引入在main.js中(也可以在其他檔案中引入,比如在index.html靜態頁面),在main.js中註冊全域性元件
其程式碼如下:

//引入 iconfont
import "./assets/iconfont/iconfont.js";

//全域性註冊元件
import SvgIcon from "@/components/svg-icon.vue";
Vue.component("svg-icon", SvgIcon);

第三步：挑選相應圖示並獲取類名，應用於頁面：

選擇Symbol,複製對應的圖示名,
在需要使用圖示的地方使用該語法即可

<svg-icon iconname="對應的圖示名">
</svg-icon>

最後

十分感謝原博主的部落格,原部落格地址如下:
https://blog.csdn.net/jackshijin/article/details/83057092
https://zhuanlan.zhihu.com/p/72335279