这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个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