icons引入

svg-sprite-loader引入icon

报错信息

解决办法

1. shimes-vue.d.ts文件加入

declare module "*.svg"{
    const content:string;
    export default content;
}

2. 安装loader

npm install svg-sprite-loader -D
yarn add svg-sprite-loader -D

3. 配置webpack.config.js或者vue.config.js

//webpack.config.js
{
    test:/\.svg$/,
    loaders:[
        `svg-sprite-loader?${JSON.stringify({...})}`,
        'svg-transform-loader',
        'svg0-loader'
    ]
}
//vue.config.js
const path = require('path')
module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'src/assets/icons')
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
  }
}
//如果打印出来还是路径，记得重启服务
//

在每个symbol有个id，直接使用use标签加id就可以使用啦！

如何引入一个目录

let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
  console.log(error);
}

创建一个icons组件

批量删除file(默认颜色样式)

由于有些icon自带颜色，所以需要删除自带颜色，flie="color"

//vue.config.js
const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() // 包含 icons 目录
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
      .use('svgo-loader').loader('svgo-loader')//使用svgo-loader
      .tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()//删除fill属性
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
  }
}

安装loader
yarn add --dev svgo-loader

svg-sprite-loader的bug

用webstorm会触发该bug，下载无bugloader(别人合并后的loader),yarn add --dev svg-sprite-loader-mod,对应的我们也需要修改之前vue.congig.js设置里面的loader的名字