步骤1下载配合svg图标的包

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. }
  5. module.exports = {
  6.   configureWebpack: (config) => {
  7.     // 在webpack的配置对象 config的 optimization属性的minimizer数组的第一个元素的options中设置....
  8.     // 在打包之后的js中去掉console.log
  9.     config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  10.   },
  11.   // https://cli.vuejs.org/zh/config/#publicpath
  12.   // 设置打包后访问资源方式，以是相对路径来访问
  13.   // dist目录下的index.html就可以直接双击打开
  14.   publicPath: './',
  15.   chainWebpack (config) {
  16.     // set svg-sprite-loader
  17.     config.module
  18.       .rule('svg')
  19.       .exclude.add(resolve('src/icons'))
  20.       .end()
  21.     config.module
  22.       .rule('icons')
  23.       .test(/\.svg$/)
  24.       .include.add(resolve('src/icons'))
  25.       .end()
  26.       .use('svg-sprite-loader')
  27.       .loader('svg-sprite-loader')
  28.       .options({
  29.         symbolId: 'icon-[name]'
  30.       })
  31.       .end()
  32.   }
  33. }

第3步把人资项目中的icons文件夹和components中的Svglcon文件夹放到自己项目中的src文件夹下

image.png

第4步在项目中把icons文件引入到main.js中

image.png

新步骤
image.png

在vue.config.js中补充下面的代码

  1. // 省略其他...
  2.   chainWebpack (config) {
  3.     // set svg-sprite-loader
  4.     config.module
  5.       .rule('svg')
  6.       .exclude.add(resolve('src/icons'))
  7.       .end()
  8.     config.module
  9.       .rule('icons')
  10.       .test(/\.svg$/)
  11.       .include.add(resolve('src/icons'))
  12.       .end()
  13.       .use('svg-sprite-loader')
  14.       .loader('svg-sprite-loader')
  15.       .options({
  16.         symbolId: 'icon-[name]'
  17.       })
  18.       .end()
  19.   }

image.png

从网上下载自己需要的svg图标

https://www.iconfont.cn/
image.png
image.png
image.png

然后放到icons文件夹下的svg文件夹中 （新建一个.svg的文件，把自己从网上复制的svg代码放到如图自己建一个.svg的文件中）

image.png

最后一步使用svg图

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