React/Typescript/Webpack5项目无法将SVG作为组件导入问题求助

你当前Webpack配置仅使用url-loader处理SVG文件，仅会将SVG转换为base64格式的字符串作为默认导出，不会生成可直接调用的React组件实例，因此命名导入的ReactComponent值为undefined，与TypeScript类型声明无关。

使用@svgr/webpack处理SVG文件，可同时兼容「作为图片路径导入」和「作为React组件导入」两种使用方式，无需修改现有类型声明。

步骤1：安装依赖 #

npm install @svgr/webpack --save-dev
# 或使用 yarn
yarn add @svgr/webpack --dev
# 或使用 pnpm
pnpm add @svgr/webpack -D

步骤2：修改Webpack配置 #

替换原有webpack.config.js中的SVG处理规则：

module.exports = {
  // ... 其余配置保持不变
  module: {
    rules: [
      // ... 其余规则保持不变
      {
        test: /\.svg$/,
        oneOf: [
          // 从JS/TS/JSX/TSX文件中导入SVG时，作为React组件处理
          {
            issuer: /\.[jt]sx?$/,
            use: [
              {
                loader: '@svgr/webpack',
                options: {
                  // 可选配置：根据需求调整SVG处理规则
                  svgoConfig: {
                    plugins: [
                      // 保留viewBox属性，避免缩放异常
                      { name: 'removeViewBox', active: false },
                      // 可选：移除SVG内置的fill属性，方便外部自定义颜色
                      { name: 'removeAttrs', params: { attrs: 'fill' } }
                    ]
                  }
                }
              },
              'url-loader'
            ],
          },
          // 其他场景导入SVG（比如CSS中引用），仍作为静态资源处理
          { type: 'asset/resource' }
        ]
      }
    ]
  }
}

步骤3：使用方式 #

保持你现有的命名导入方式即可正常使用，支持直接传入SVG属性、绑定事件：

import { ReactComponent as DislikeIcon } from '../../media/icons/dislike.svg';

const Component = () => {
  const handleClick = () => {
    console.log('点击了图标');
  };
  // 可直接传入fill、className、onClick等属性自定义图标
  return <DislikeIcon fill="#f00" width={24} onClick={handleClick} />
};

验证 #

修改配置后重启Webpack开发服务，即可解决ReactComponent为undefined的问题，无需修改现有TypeScript配置与类型声明。

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