使用svgo-loader只对部分文件生效

svgo-loader配合svg-sprite-loader使用，网上教程很多，不赘述

  const svgRule = config.module.rule("svg-sprite");
  svgRule.uses.clear();

  svgRule
    .test(/\.(svg)(\?.*)?$/)
    .include.add([resolve("src/icons")])
    .end()
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]"
    })
    .end()
    .use("svgo-loader")
    .loader("svgo-loader")
    .tap(options => ({
      ...options,
      plugins: [{ name: "removeAttrs", params: { attrs: "fill" } }]
    }))
    .end();

那么问题来了，并不是所有的svg都需要去除颜色样式。有些不用自己改色，或者本身很复杂多颜色的svg，前端自己上色肯定是有问题的

那这种链式操作如何解决呢，我把链式操作分了两步（笑哭）

第一步使用svg-sprite解析所有的icons文件夹下的svg文件

第二步使用svgo-loader去除除了‘original’文件夹下的svg文件

  // 第一步
  const svgRule = config.module.rule("svg-sprite");
  svgRule.uses.clear();
  svgRule
    .test(/\.(svg)(\?.*)?$/)
    .include.add([resolve("src/icons")])
    .end()
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]"
    })
    .end();

  // 第二步
  const svgoRule = config.module.rule("svgo");
  svgoRule
    .test(/\.(svg)(\?.*)?$/)
    .exclude.add([resolve("src/icons/common/original")])
    .end()
    .use("svgo-loader")
    .loader("svgo-loader")
    .tap(options => ({
      ...options,
      plugins: [{ name: "removeAttrs", params: { attrs: "fill" } }]
    }))
    .end();

到此解决了original文件夹下svg不删除fill的逻辑

那么在前端架构时，公共的svg放在common下，每个项目用到的svg放到每个子文件夹下，就会存在多个文件夹不需要去修改svg

在icons文件夹下拿到所有的original文件，exclude掉

    const findFileFolder = (dir, filename) => {
    const files = fs.readdirSync(resolve(dir));
    const result = [];
    files.map(file => {
      const filePath = `${dir}/${file}`;
      if (fs.statSync(filePath).isDirectory()) {
        if (file === filename) {
          result.push(filePath);
        } else {
          result.push(...findFileFolder(filePath, filename));
        }
      }
    });
    return result;
  };

  // svgo-loader 去除svg文件中的fill属性，方便前端更改颜色
  // 对于不需要更改颜色的svg，
  // 在对应文件夹（common/（项目名1）/（项目名2）/...）中创建子文件夹
  // 命名为“original”(!!必须!!)
  // 将不会更改颜色（多颜色）的svg放入original文件夹，默认不loader此文件夹文件
  const svgoRule = config.module.rule("svgo");
  const svgoExcludePaths = findFileFolder("src/icons", "original");
  svgoRule
    .test(/\.(svg)(\?.*)?$/)
    .exclude.add([...svgoExcludePaths.map(path => resolve(path))])
    .end()
    .use("svgo-loader")
    .loader("svgo-loader")
    .tap(options => ({
      ...options,
      plugins: [{ name: "removeAttrs", params: { attrs: "fill" } }]
    }))
    .end();