如何正确地将 prop“title”传递给 svgr React 组件？

Question

我需要传递 prop

title

来反应返回 svg 标签的组件。

我的 webpack

@svgr/webpack

加载器设置：

    {
        loader: '@svgr/webpack',
        options: { memo: true, titleProp: true }  // <= titleProp: true allows to pass prop "title" to svgr react component
    }

我的 svg 类型声明：

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

我的组件代码：

<HomeIcon title='Home' />  // <= mistake says that there is no 'title' property

问题是没有

title

属性可以作为 prop 传递。

根据 svg 声明

const SVG: FC<SVGProps<SVGElement>>

，它会导致该接口：

interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {}

如果我们检查

interface SVGAttributes<T>

，它里面没有道具

title

。如果我在

title

中手动写入 prop

interface SVGAttributes<T>

，它可以正常工作。

看起来很奇怪，但我认为我不需要手动完成。所有接口均来自

@types/react: "^18.3.12"

那么如何正确做呢？我需要使用其他声明来

.svg

吗？

Answer 1

找到解决方案。

接口

SVGAttributes<T>

不需要有

title

属性，因为当传递

title

属性时，

@svgr/webpack

在

<title>

标签内创建一个标签

<svg>

，而不是将

title

作为属性。

所以我们需要做的就是通过交集进行正确的声明，以避免错误提示

title

prop 不存在：

declare module '*.svg' {
    import { type FC, type SVGProps } from 'react'
    const SVG: FC<SVGProps<SVGElement> & { title?: string }>
    export default SVG
}