React+Webpack中使用SVGR遇SVG字体加载错误的排查与解决

报错的核心原因是：你配置的@svgr/webpack loader仅对从JS/TSX文件中导入的SVG生效（通过issuer: /\.[jt]sx?$/限定了加载器的触发场景），但Font Awesome的CSS文件中引用的SVG字体文件（如fa-regular-400.svg）不在这个规则的覆盖范围内，Webpack找不到对应的加载器处理这类SVG，因此抛出解析错误。

你需要补充针对CSS中引用的SVG文件的加载规则，或者调整现有SVG规则的范围，区分项目业务SVG和第三方字体SVG：

方案1：添加独立的字体SVG处理规则 #

在Webpack的rules数组中新增一条规则，专门处理第三方库（如Font Awesome）中的SVG字体文件，用file-loader输出到字体目录：

{
  test: /\.svg$/i,
  issuer: /\.(css|scss)$/, // 匹配从CSS/SCSS中导入的SVG
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/',
      },
    },
  ],
  include: [/node_modules\/@fortawesome/], // 仅处理Font Awesome的SVG字体
}

方案2：调整现有SVG规则，区分业务SVG和第三方SVG #

如果希望项目中自己的SVG用SVGR，第三方的SVG用file-loader，可以修改原有的SVG规则，通过exclude排除第三方目录，同时新增一条规则处理第三方SVG：

// 处理项目中从JS/TSX导入的业务SVG
{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: ['@svgr/webpack'],
  exclude: [/node_modules/], // 排除第三方库的SVG
},
// 处理所有其他SVG（包括CSS中引用的字体SVG）
{
  test: /\.svg$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: ({ resourcePath }) => {
          // 根据文件路径决定输出目录，字体SVG到fonts，其他到images
          return resourcePath.includes('webfonts') ? 'fonts/' : 'images/';
        },
      },
    },
  ],
  exclude: [/your-project-svg-dir/], // 替换为你的业务SVG目录，避免重复处理
}

额外注意 #

• 确保file-loader已安装，未安装则执行npm install file-loader --save-dev
• 原有的字体规则（woff/woff2/eot/ttf）可保留，新增的SVG规则会专门处理Font Awesome的SVG字体文件

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