如何正确向SVGR React组件传递title属性并解决类型报错？

问题原因 #

当启用@svgr/webpack的titleProp: true时，组件会接受title属性并自动生成SVG的<title>子元素，但React的SVGProps<SVGElement>继承自SVGAttributes<T>，其中并未包含title属性（因为原生SVG中<title>是子节点而非元素属性），所以TypeScript会报错。

规范解决方案 #

方案1：使用@svgr官方类型定义 #

1. 安装@svgr的类型包（如果未安装）：

npm install @svgr/types --save-dev
# 或
yarn add @svgr/types --dev

2. 修改SVG模块的类型声明文件（通常是src/types/svg.d.ts）：

declare module '*.svg' {
  import type { FC, SVGProps } from 'react';
  import type { TitleProps } from '@svgr/types';

  const SVG: FC<SVGProps<SVGElement> & TitleProps>;
  export default SVG;
}

TitleProps是@svgr提供的类型，内部定义了title?: string，这样就能正确识别传递的title属性。

方案2：手动扩展SVGProps类型 #

如果不想额外安装依赖，可以直接扩展SVGProps添加title属性：

declare module '*.svg' {
  import { type FC, type SVGProps } from 'react';

  interface SVGIconProps extends SVGProps<SVGElement> {
    title?: string;
  }

  const SVG: FC<SVGIconProps>;
  export default SVG;
}

验证 #

修改类型声明后，重新运行TypeScript检查，使用<HomeIcon title='Home' />时就不会再出现属性不存在的错误。

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