svg-sprite-loader的使用

config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons"))
      .add(resolve("src/styles/formGenerator/icons"))
      .end();

    config.module
      .rule("svg-sprite-loader")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .add(resolve("src/styles/formGenerator/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });

这段 vue.config.js 配置的作用是为特定目录下的 SVG 文件设置专门的处理规则，使这些文件通过 svg-sprite-loader 进行处理，而不是通过默认的 SVG 文件处理规则。具体步骤如下：

详细解释

1. 排除默认的 SVG 处理规则

config.module
  .rule("svg")
  .exclude.add(resolve("src/assets/icons"))
  .add(resolve("src/styles/formGenerator/icons"))
  .end();

这段代码的目的是排除 src/assets/icons 和 src/styles/formGenerator/icons 目录下的 SVG 文件，使它们不被默认的 SVG 规则处理。

• config.module.rule("svg"):

  • 获取 Webpack 配置中的名为 svg 的规则，这通常是用于处理 SVG 文件的默认规则。

• exclude.add(resolve("src/assets/icons")).add(resolve("src/styles/formGenerator/icons")).end():

  • exclude 方法用于指定要排除在规则之外的目录或文件。
  • resolve("src/assets/icons") 和 resolve("src/styles/formGenerator/icons") 分别将 src/assets/icons 和 src/styles/formGenerator/icons 目录添加到排除列表中，确保这些目录下的 SVG 文件不被默认规则处理。
  • end() 方法结束当前链式调用，返回到上一级配置链。

2. 为特定目录添加 svg-sprite-loader 规则

config.module
  .rule("svg-sprite-loader")
  .test(/\.svg$/)
  .include.add(resolve("src/assets/icons"))
  .add(resolve("src/styles/formGenerator/icons"))
  .end()
  .use("svg-sprite-loader")
  .loader("svg-sprite-loader")
  .options({
    symbolId: "icon-[name]",
  });

这段代码的目的是为被排除的特定目录下的 SVG 文件设置专门的处理规则，使它们通过 svg-sprite-loader 进行处理。

• config.module.rule("svg-sprite-loader"):

  • 定义一个新的模块规则，命名为 svg-sprite-loader。

• test(/\.svg$/):

  • 指定该规则的适用文件类型，使用正则表达式匹配所有 .svg 文件。

• include.add(resolve("src/assets/icons")).add(resolve("src/styles/formGenerator/icons")).end():

  • include 方法用于指定只包含某些目录下的文件。
  • resolve("src/assets/icons") 和 resolve("src/styles/formGenerator/icons") 将 src/assets/icons 和 src/styles/formGenerator/icons 目录添加到包含列表中，确保这些目录下的 SVG 文件被此规则处理。

• use("svg-sprite-loader").loader("svg-sprite-loader"):

  • use 方法指定在匹配的文件上使用的加载器。
  • loader("svg-sprite-loader") 明确使用 svg-sprite-loader 作为加载器。

• options({ symbolId: "icon-[name]" }):

  • options 方法用于配置加载器的选项。
  • symbolId 选项定义生成的 SVG 符号 ID 的命名格式，"icon-[name]" 表示生成的符号 ID 将以 icon- 为前缀，后跟 SVG 文件的文件名。

综上所述

通过这段配置，src/assets/icons 和 src/styles/formGenerator/icons 目录下的 SVG 文件不会被默认的 SVG 处理规则处理，而是通过 svg-sprite-loader 进行处理。这样做的目的是将这些 SVG 文件处理成 SVG 精灵（sprite），并且每个图标都有一个唯一的符号 ID，可以在项目中方便地引用这些图标。

完整示例

以下是一个完整的 vue.config.js 示例，包括解释和自动引入所有 SVG 图标的代码：

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    // 排除特定目录，使它们不被默认的 SVG 规则处理
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons"))
      .add(resolve("src/styles/formGenerator/icons"))
      .end();

    // 添加新的 svg-sprite-loader 规则
    config.module
      .rule("svg-sprite-loader")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .add(resolve("src/styles/formGenerator/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
  }
};

自动引入 SVG 图标

在 main.js 中添加代码，自动引入所有 SVG 图标：

// src/main.js
import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon.vue'; // 引入 SvgIcon 组件

Vue.component('svg-icon', SvgIcon);

// 自动引入所有的 SVG 图标
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./assets/icons', false, /\.svg$/);
requireAll(req);

const reqFormIcons = require.context('./styles/formGenerator/icons', false, /\.svg$/);
requireAll(reqFormIcons);

创建 SvgIcon 组件

<!-- src/components/SvgIcon.vue -->
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    svgClass() {
      return 'svg-icon ' + this.className;
    }
  }
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
</style>

使用 SVG 图标

<template>
  <div>
    <svg-icon iconName="icon-icon1" class="my-icon"></svg-icon>
    <svg-icon iconName="icon-iconA" class="my-icon"></svg-icon>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

<style>
.my-icon {
  width: 24px;
  height: 24px;
  fill: #000;
}
</style>

通过这些配置，你可以在 Vue 项目中方便地使用 svg-sprite-loader 来处理特定目录下的 SVG 文件，并在项目中使用 SVG 精灵图标。