1.安装依赖

npm i svg-sprite-loader@4.1.3

2.配置 vue.config.js

  1. const path = require('path')
  2.  function resolve (dir) {
  3.   return path.join(__dirname, dir)
  4. }
  1. 补充一个配置{ }
  1. {
  2.   // 省略其他...
  3.   chainWebpack (config) {
  4.     // set svg-sprite-loader
  5.     config.module
  6.       .rule('svg')
  7.       .exclude.add(resolve('src/icons'))
  8.       .end()
  9.     config.module
  10.       .rule('icons')
  11.       .test(/\.svg$/)
  12.       .include.add(resolve('src/icons'))
  13.       .end()
  14.       .use('svg-sprite-loader')
  15.       .loader('svg-sprite-loader')
  16.       .options({
  17.         symbolId: 'icon-[name]'
  18.       })
  19.       .end()
  20.   }
  21. }

3.复制/创建文件

(1) src/icons

  1. src/icons
  2. -       /svg       # 保存图标
  3. -       /index.js  # 注册全局组件
  1. (2) 组件<br />`componets/SvgIcon/index.vue`
  3. （3）validate.js<br />`utils/validate.j`

4.在main.js中引入

import '@/icons'

5.使用

使用格式 。这里的文件名就是在src/icons/svg下的文件名