Webpack5+React+TS项目导入SVG遇ValidationError问题求助

问题1：SVG导入时的Webpack配置错误 #

错误原因 #

asset/inline类型的资源会被转成base64嵌入代码，不会生成独立文件，因此generator.filename配置完全无效，这就是触发ValidationError的原因。同时你当前的配置把SVG和字体混在一起，不符合各自的资源处理需求。

解决方案 #

1. 安装SVG转React组件的loader：

npm install @svgr/webpack --save-dev
# 或
yarn add @svgr/webpack --dev

2. 修改webpack.common.js的模块规则，拆分SVG和字体的处理逻辑：

module.exports = {
  // ...其他配置不变
  module: {
    rules: [
      // ...原有规则保留
      // --------- Webpack 5 rule for images ---------
      {
          test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
          type: "asset/resource",
          generator: {
              filename: "assets/images/[name][ext][query]",
          },
      },
      // --------- 单独处理SVG（转为React组件） ---------
      {
          test: /\.svg$/,
          use: ['@svgr/webpack'],
      },
      // --------- 处理字体文件 ---------
      {
          test: /\.(woff(2)?|eot|ttf|otf)$/,
          type: "asset/resource",
          generator: {
              filename: "assets/fonts/[name][ext][query]",
          },
      },
    ],
  },
};

3. 在组件中导入并使用SVG：

import DeleteIcon from './path-to-your-delete-icon.svg';

// 在Chip组件中使用
<Chip
  label="示例标签"
  deleteIcon={<DeleteIcon />}
  onDelete={() => {}}
/>

问题2：PNG图标作为deleteIcon只显示alt文本 #

原因分析 #

• Material UI的deleteIcon属性需要接收React元素，直接传入图片路径字符串无效
• 需确保Webpack对PNG的处理配置正确，且导入路径被正确解析

解决方案 #

1. 正确导入并包裹PNG为img元素：

import deletePng from './path-to-your-delete-icon.png';

// 在Chip组件中使用
<Chip
  label="示例标签"
  deleteIcon={<img src={deletePng} alt="删除" style={{ width: 20, height: 20 }} />}
  onDelete={() => {}}
/>

2. 验证Webpack配置：
   确保output.publicPath设置为"/"（你当前配置已正确设置），这样开发/生产环境下图片路径能被正确解析。如果是生产部署，需确保静态资源的部署路径与publicPath匹配。

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