如何在Rspack中使用SVG Sprite？Webpack迁移兼容问题求解

一、内联SVG Sprite方案 #

该方案会将SVG Sprite直接注入页面DOM，无需额外网络请求。

1. 自定义模块+Rspack资源加载器 #

• 配置Rspack将SVG转为字符串格式：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/source',
      },
    ],
  },
};

• 创建svg-sprite.js统一管理并构建Sprite：

import iconUser from './icons/user.svg';
import iconSettings from './icons/settings.svg';

// 解析SVG内容并生成Sprite结构
const buildSprite = (icons) => {
  const symbols = Object.entries(icons).map(([id, svgContent]) => {
    // 移除SVG根标签，保留内部图形元素
    const innerContent = svgContent.replace(/^<svg[^>]*>(.*)<\/svg>$/s, '$1');
    return `<symbol id="${id}" viewBox="0 0 24 24">${innerContent}</symbol>`;
  }).join('');
  return `<svg xmlns="http://www.w3.org/2000/svg" style="display: none">${symbols}</svg>`;
};

const sprite = buildSprite({ iconUser, iconSettings });

// 注入Sprite到页面
const injectSprite = () => {
  if (!document.querySelector('#svg-sprite')) {
    const container = document.createElement('div');
    container.innerHTML = sprite;
    container.id = 'svg-sprite';
    document.body.appendChild(container);
  }
};

injectSprite();

• 在项目入口文件中导入svg-sprite.js，页面加载后即可通过<svg><use href="#iconUser"></use></svg>调用图标。

2. 社区适配插件 #

使用社区维护的rspack-plugin-svg-sprite，配置更简洁：

const SvgSpritePlugin = require('rspack-plugin-svg-sprite');

module.exports = {
  plugins: [
    new SvgSpritePlugin({
      iconDirs: [path.resolve(__dirname, './src/icons')],
      symbolId: 'icon-[name]',
    }),
  ],
};

配置完成后直接导入SVG文件，插件会自动生成并注入内联Sprite，调用方式同上。

二、提取式SVG Sprite方案 #

该方案会将所有SVG合并为单独的sprite.svg文件，通过静态资源引用使用。

1. Rspack资源打包+自定义构建脚本 #

• 配置Rspack将SVG打包到指定目录：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/sprites/[name].[hash].svg',
        },
      },
    ],
  },
};

• 编写build-sprite.js脚本，在Rspack构建完成后合并SVG为Sprite：

const fs = require('fs');
const path = require('path');

const spriteDir = path.resolve(__dirname, './dist/assets/sprites');
const outputPath = path.resolve(__dirname, './dist/assets/sprite.svg');

const buildSprite = () => {
  const svgFiles = fs.readdirSync(spriteDir);
  const symbols = svgFiles.map(file => {
    const svgContent = fs.readFileSync(path.join(spriteDir, file), 'utf8');
    const iconId = path.basename(file, '.svg');
    const innerContent = svgContent.replace(/^<svg[^>]*>(.*)<\/svg>$/s, '$1');
    return `<symbol id="${iconId}" viewBox="0 0 24 24">${innerContent}</symbol>`;
  }).join('');
  const finalSprite = `<svg xmlns="http://www.w3.org/2000/svg" style="display: none">${symbols}</svg>`;
  fs.writeFileSync(outputPath, finalSprite);
};

buildSprite();

• 在package.json中更新构建命令："build": "rspack build && node build-sprite.js"
• 在HTML中引用Sprite并调用图标：

<svg style="display: none">
  <use href="/assets/sprite.svg#iconUser"></use>
</svg>

2. 配合HtmlRspackPlugin #

若使用HtmlRspackPlugin，可在HTML模板中直接添加Sprite的引用路径，或通过插件配置自动注入预加载标签。

注意事项 #

• 所有SVG文件需包含viewBox属性，避免缩放异常。
• 如需动态修改图标颜色，不要在SVG内部写死fill属性，改用CSS控制。

内容的提问来源于stack exchange，提问作者Yichen Zhu