vue&webpack 集成SvgIcon组件

[wuyuedefeng]

• 安装依赖包

  $ npm install svg-sprite-loader svgo -D

  配置: package.json

  {
  "scripts": {
  "svgo": "svgo -f src/components/shared/SvgIcon/svg --config=src/components/shared/SvgIcon/svgo.yml"
  },
  }

  配置 vue.config.js

  module.exports = {
  chainWebpack: (config) => {
  // eg: 更改编译忽略某些svg文件的加载
  config.module.rule('svg').exclude.add(resolve('src/components/shared/SvgIcon')).end()
  config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/components/shared/SvgIcon')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({ symbolId: 'icon-[name]' }).end()
  },
  }

• 将下面附件内容解压到src/components/shared目录下 SvgIcon.zip