React+TypeScript中作为prop传入的SVG组件(含react-icons)正确类型声明

适配react-icons的类型声明 #

react-icons 导出的所有图标都是标准React函数组件，你可以直接用React.ElementType声明startIcon的类型：

import type { ElementType } from 'react';

interface ButtonProps {
   startIcon?: ElementType;
}

如果需要更严格的类型校验，限定只能传入SVG类型的组件，可以收窄类型为ElementType<React.SVGProps<SVGSVGElement>>，避免误传入非SVG组件。

传入原生SVG元素的类型差异 #

如果你需要支持直接传入已经写好的原生SVG节点（也就是<svg>...</svg>这种已实例化的JSX内容），类型和渲染逻辑都要对应调整：

import type { ReactNode } from 'react';

interface ButtonProps {
   startIcon?: ReactNode;
}

const Button = ({startIcon}) => {
   return <button>{startIcon}</button>
}

// 调用示例
// 传react-icons时需要先实例化
<Button startIcon={<SomeIcon/>}/>
// 直接传原生SVG节点
<Button startIcon={<svg width="16" height="16">...</svg>}/>

两种类型的核心差异：

• ElementType 接收的是未实例化的组件本身，需要在Button内部把它当成标签调用渲染，写法为<StartIcon/>
• ReactNode 接收的是已经生成的JSX节点，直接引用渲染即可，不需要额外加尖括号

如果需要同时兼容两种传参方式，可以把类型设为ElementType | ReactNode，只需在渲染层加逻辑区分两种类型处理即可。

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