React + TypeScript 项目中导入的.svg图标应该使用什么类型？

你用React.FC不加泛型约束时，默认仅支持children属性，没有声明可以接收className等SVG元素原生属性，所以会出现属性不存在的报错。

你需要给React.FC指定泛型为SVG元素的属性集合，写法如下：

// 可以提前定义通用的SVG组件类型别名，复用更方便
type SVGComponent = React.FC<React.SVGProps<SVGSVGElement>>

interface LogosProps {
  firstLogo: SVGComponent
  secondLogo: SVGComponent
  thirdLogo: SVGComponent
}

• React.ReactElement：是已经被渲染生成的JSX元素实例，不是可调用的组件类型，不能通过<Logo />的方式使用
• React.ReactNode：是所有可直接渲染的内容集合（字符串、数字、JSX元素、null等），不属于组件类型
• React.SVGProps<SVGSVGElement>：是SVG元素的属性类型，不是组件本身的类型

如果修改类型后导入SVG仍然报错，需要检查项目全局类型声明文件中是否有正确的SVG导入类型定义，以Vite项目为例，在vite-env.d.ts中添加如下声明即可：

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

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