Vue+ElementUI使用第三方icon图标（FontClass引用法+SVG引用法）

具体步骤如下

打开阿里icon，注册 >登录>图标管理>我的项目

新建项目

填写项目名称和前缀（前缀不能为：el-icon），点新建

返回首页，点进去你想要的icon库，将想要的图标添加入库

若需要批量添加图标，可在控制台输入如下代码

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };

auto_click(0);

点击购物车

把图标添加到刚才创建的项目里

FontClass引用法

设置fontClass，然后下载到本地

解压后，打开iconfont.css文件，在.iconfont{}类名后面添加如下代码（注意：vue-ele-icon是你之前设置的icon前缀，第二个vue-ele-icon前边有空格的）

[class^="vue-ele-icon"], [class*=" vue-ele-icon"]/*这里有空格*/
{ 
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
 }

设置好以后，打开vue项目，在src-assets下创建了icon-fonts文件夹，将所有的文件复制过来，在main.js里边把css引进来

然后重新npm run dev 一下

打开在阿里icon的项目，复制你想要的图标代码

使用方式，跟element自带的使用方法一样

1 2	<i class="vue-ele-icon-delete"></i> <el-button type="primary" icon="vue-ele-icon-search">搜索</el-button>

SVG（Symbol）引用法

设置Symbol，然后下载到本地

打开vue项目，在src-assets下创建了icon-fonts文件夹，将解压所有的文件复制过来，在main.js里边把js引进来

创建SVG组件，代码如下：

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

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

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