在ice.js项目中集成@svgr/webpack的正确方式

背景介绍

ice.js是阿里巴巴开源的一款基于React的企业级前端应用框架。在实际开发中，我们经常需要处理SVG图标资源。@svgr/webpack是一个流行的Webpack插件，可以将SVG文件转换为React组件，方便在项目中直接使用。

常见问题

许多开发者在ice.js项目中尝试集成@svgr/webpack时会遇到各种问题，主要是因为：

1. ice.js默认已经配置了SVG文件的处理规则
2. 直接添加新的SVG处理规则会导致冲突
3. 不了解如何正确修改ice.js的Webpack配置

解决方案

要在ice.js 3.x版本中正确集成@svgr/webpack，我们需要通过自定义插件的方式来实现。以下是详细步骤：

1. 创建自定义插件

首先创建一个自定义插件文件，例如svgr-plugin.ts：

import type { Plugin } from '@ice/app/esm/types';

const plugin: Plugin = () => {
  return {
    name: 'svgr-plugin',
    setup({ onGetConfig }) {
      onGetConfig((config) => {
        config.configureWebpack ??= [];
        config.configureWebpack.push((webpackConfig) => {
          // 移除默认的SVG处理规则
          webpackConfig.module.rules = webpackConfig.module.rules.filter((rule) => {
            const isSvgRule = 
              rule &&
              rule !== '...' &&
              rule.test instanceof RegExp &&
              rule.test.test('.svg');
            return !isSvgRule;
          });
          
          // 添加新的SVG处理规则
          webpackConfig.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack', 'url-loader'],
          });
          
          return webpackConfig;
        });
      });
    },
  };
};

export default plugin;

2. 在ice配置中引入插件

然后在你的ice.config.mts或build.json中引入这个插件：

import svgrPlugin from './svgr-plugin';

export default defineConfig({
  plugins: [svgrPlugin()],
});

实现原理

这个解决方案的核心在于：

1. 移除默认规则：ice.js默认会配置SVG文件的处理规则，我们需要先移除这些规则
2. 添加自定义规则：然后添加我们自己的规则，使用@svgr/webpack来处理SVG文件
3. 使用url-loader：同时保留url-loader作为备用方案，处理那些不需要转换为React组件的SVG文件

进阶配置

如果需要更精细的控制，可以进一步定制规则：

webpackConfig.module.rules.push({
  test: /\.svg$/,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgo: false, // 禁用SVGO优化
        titleProp: true, // 允许传递title属性
      },
    },
  ],
});

注意事项

1. 确保已经安装了@svgr/webpack和url-loader依赖
2. 如果项目中有特殊的SVG处理需求，可以调整过滤条件
3. 测试时注意检查不同使用场景下的SVG处理结果

通过这种方式，我们可以在ice.js项目中安全、高效地集成@svgr/webpack，享受SVG作为React组件带来的便利。