官网地址：iconfont-阿里巴巴矢量图标库
一、svg icon引入：安装依赖:svg-sprite-loader
npm i svg-sprite-loader -D
二、下载图标，存入src/icons/svg中（新建文件目录）,修改规则和新增规则（vue.config.js）
// resolve定义一个绝对路径获取函数const path = require('path')function resolve(dir) {return path.join(__dirname, dir)}//修改chainWebpack，配置svg规则排除icons目录中svg文件处理// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()
三、图标自动导入（icons/index.js）
import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg component// 注册组件ponent('svg-icon', SvgIcon)// 批量导入 .svg 文件const req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)
四、创建SvgIcon组件（./components/SvgIcon.vue）
<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :href="iconName" /></svg></template><script>export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return /^(https?:|mailto:|tel:)/.test(this.iconClass)},iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}}</script><style scoped>.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;}</style>
五、使用
<svg-icon icon-class="todo"/>.svg-icon{padding: 0.02rem;font-size: 22px;color:$main;border-radius: 0.04rem;margin-left: 0.06rem;}
六、效果
（如果遇到svg图标无法修改颜色情况，在工具中打开svg图标，将“fill”属性的颜色值去掉就可以了，因为svg源文件中得“fill”属性有默认颜色。）
其他引入方式，可参考：自定义element-ui图标 - 简书
