从Webpack迁移到Vite后，SVG组件无法设置className属性的问题

问题根源 #

Vite默认的vite/client类型声明将SVG文件识别为字符串路径，但你使用SVGR插件将SVG转为了React组件，两者类型定义冲突，导致TypeScript认为你在给字符串路径传递className属性，从而抛出错误。

1. 覆盖SVG的类型声明 #

在项目中创建自定义类型声明文件（比如src/types/svg.d.ts），内容如下：

declare module '*.svg' {
  import type React from 'react';
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

该声明会将所有*.svg模块的默认导出定义为React函数组件，支持SVG元素的所有Props（包括className），直接覆盖vite/client中的默认声明。

2. 确保TypeScript识别自定义类型文件 #

检查tsconfig.json，确保include数组包含自定义类型文件所在目录：

{
  "compilerOptions": {
    // 其他配置项...
  },
  "include": [
    "src/**/*",
    "src/types/**/*.d.ts" // 若类型文件在src/types目录下
  ]
}

3. 确认SVGR插件的Vite配置 #

确保已正确配置Vite的SVGR插件（以vite-plugin-svgr为例）：

• 安装插件：

  npm install vite-plugin-svgr --save-dev
  

• 在vite.config.ts中配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import svgr from 'vite-plugin-svgr';
  
  export default defineConfig({
    plugins: [
      react(),
      svgr({
        // 可选配置：比如开启icon模式、自定义SVG处理规则等
        svgrOptions: {
          icon: true,
        },
      }),
    ],
  });
  

完成以上步骤后，TypeScript就能正确识别SVG组件的类型，className属性的报错将消失。

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