vue cli3+项目中基于svg-sprite-loader依赖实现字体图标

1. 在开发环境安装svg-sprite-loader依赖：

npm i svg-sprite-loader -D    //-D开发依赖

2. 在vue.config.js中配置：

// vue ui 可视化界面管理配置/eslint/依赖。
const path = require('path')
function resolve (dir) { // 传值相对路径dir，返回绝对路径
  return path.join(__dirname, dir)
}
module.exports = { // 导出配置模块
  chainWebpack (config) { // 链式webpack配置
    config.module.rule('svg') // svg规则配置，排除src/icons文件夹
      .exclude.add(resolve('src/icons'))
      .end() // 回到上一级
    config.module.rule('icons') // 新增icons规则，设置svg-sprite-loader
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ // 使用图标的名称
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3. src/icons文件夹下创建svg文件夹（存放iconfont中下载的.svg格式的图片，如qq.svg，注意iconfont上的一些字体图标不能修改颜色）和index.js文件：

4. src/icons/index.js：

import Vue from 'vue'
import NewSvgIcon from './new-svg-icon.vue'
Vue.component('new-svg-icon', NewSvgIcon)
const req = require.context('./svg', false, /\.svg$/) // 匹配当前目录下svg文件下的.svg结尾的文件
req.keys().map(req) // 自动加载svg下面的文件

5. 在main.js全局引入src/icons/index.js：

import './icons'

6. 封装new-svg-icon.vue组件：

7. 在任意组件中使用：