這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個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