升级Vite及vite-plugin-svgr后React项目SVG导入报错求助

升级vite到5.0.2、vite-plugin-svgr到4.2.0后出现这个报错，是因为svgr插件v4版本调整了导出逻辑——默认不再把ReactComponent作为具名导出，而是默认导出SVG文件的URL，React组件需要通过特定方式导入。

给你两种可行的解决思路：

1. 修改导入语句（无需调整配置） #

把原来的具名导入改成默认导入，同时在SVG路径后添加?react查询参数，明确指定要导入React组件：

// 原写法
// import { ReactComponent as NewIcon } from '@shared/assets/icons/new.svg';

// 修改后
import NewIcon from '@shared/assets/icons/new.svg?react';

2. 修改vite配置，保留原有导入写法 #

如果项目里有大量类似导入语句不想逐一修改，可以在vite配置中给svgr插件设置exportAsDefault: true，让它默认导出ReactComponent：

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    svgr({
      exportAsDefault: true,
    }),
    // 其他项目插件...
  ],
});

如果你的项目使用TypeScript，还需要更新类型定义文件（比如vite-env.d.ts或自定义的types.d.ts）：

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

补充（针对第一种方法的类型定义） #

如果选择第一种添加?react的导入方式，对应的TypeScript类型定义要改成：

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

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