rsbuild如何配置svg-sprite-loader插件

RSBuild是一款用于构建资源（如SVG、CSS等）的工具，它可以帮助你在Webpack项目中管理和优化SVG图标。SVG-Sprite-Loader是一个Webpack插件，用于提取并处理SVG图标生成精灵图（sprite），以便更好地管理和复用。

要在RSBuild中配置SVG-Sprite-Loader，你需要按照以下步骤操作：

1. 安装依赖：首先确保已经在你的项目中安装了`webpack`, `webpack-cli`, `svg-sprite-loader`和`svgo`（如果需要优化SVG）。可以使用npm或yarn来安装：

npm install webpack webpack-cli svg-sprite-loader svgo --save-dev
# 或者
yarn add webpack webpack-cli svg-sprite-loader svgo --dev

2. 配置Webpack：在项目的`webpack.config.js`文件中，添加SVG-Sprite-Loader到你的loader链中。例如，你可以将它添加到`module.rules`数组里，针对`.svg`文件：

const { SVGSpritemapPlugin } = require('svg-sprite-loader/plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'file-loader',
          {
            loader: 'svg-sprite-loader',
            options: {
              name: '[name].[hash]',
              format: 'css', // 输出结果格式，也可以选择'default'
              symbolId: '[name]', // 标记符ID，默认就是name属性值
              process: svgo({ plugins: ['removeUselessDefs'] }) // 可选，用svgo进行优化
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new SVGSpritemapPlugin({
      filename: 'sprites/[name].svg', // 输出文件名
      spriteFilename: 'sprites/sprites.svg', // 精灵图文件名
      spritemapDataName: 'data-svg-sprites', // 保存数据到js文件
      generate Spritesheet: true // 是否生成CSS spritesheet，如果是true，format应设为'css'
    })
  ],
};

3. 使用生成的精灵图：配置好后，每次构建，Webpack都会创建一个精灵图和（如果选择了`generate Spritesheet`）相应的CSS样式。你可以在CSS中通过引入这个数据文件来引用精灵图。