使用vite-plugin-svgr添加ReactComponent props遇TS类型错误求助

以下是针对你遇到的「类型无法赋值给类型‘IntrinsicAttributes’」错误的几种可行解决方法：

• 修正tsconfig.json的types配置
  确保types字段是数组格式（而非单个字符串），正确配置应为：

  {
    "compilerOptions": {
      "types": ["vite-plugin-svgr/client"]
    }
  }
  

  单个字符串格式可能导致TS无法正确识别插件提供的类型定义。

• 显式指定组件类型
  由于默认导出的类型推导可能存在问题，手动为导入的SVG组件指定正确的React组件类型：

  import React from "react";
  import Icon from "./path";
  
  // 断言为支持SVG所有原生props的React函数组件
  const TypedIcon = Icon as React.FC<React.SVGProps<SVGSVGElement>>;
  
  // 使用时直接传props即可
  function App() {
    return <TypedIcon width={24} color="#fff" />;
  }
  

• 改用命名导入方式
  修改vite.config.ts中的exportAsDefault为false：

  svgr({
    exportAsDefault: false,
    svgrOptions: {
      icon: true,
    },
  })
  

  然后用命名导入获取React组件，TS会自动识别正确类型：

  import { ReactComponent as Icon } from "./path";
  
  // 直接使用并传递props
  <Icon height={32} fill="blue" />
  

• 手动添加全局类型声明
  如果上述方法都无效，在项目根目录新建src/svg.d.ts文件，添加自定义SVG类型声明：

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

  确保该文件被TS编译器识别（可在tsconfig.json的include字段中添加"src/**/*.d.ts"）。

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