I need to pass prop title
to react component which returns svg tag.
My webpack @svgr/webpack
loader settings:
{
loader: '@svgr/webpack',
options: { memo: true, titleProp: true } // <= titleProp: true allows to pass prop "title" to svgr react component
}
My type declaration of svg:
declare module '*.svg' {
import { type FC, type SVGProps } from 'react'
const SVG: FC<SVGProps<SVGElement>>
export default SVG
}
My component code:
<HomeIcon title='Home' /> // <= mistake says that there is no 'title' property
Problem is that there is no title
property which you can pass as prop.
According to svg declaration const SVG: FC<SVGProps<SVGElement>>
, it leads to that interface:
interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {}
and if we check interface SVGAttributes<T>
, it doesn't have prop title
inside. If I write prop title
manually in interface SVGAttributes<T>
, it works correctly.
Seems strange, but I don't think I need to do it manually. All interfaces are from @types/react: "^18.3.12"
So how to do it properly? Do I need to use other declaration for .svg
?
Found a solution.
interface SVGAttributes<T>
doesn't need to have title
prop, becuase when title
prop is passed, @svgr/webpack
creates a tag <title>
inside <svg>
tag, not put title
as an attribute.
So all we need is to make proper declaration through intersection to avoid mistake which says that title
prop doesn't exist:
declare module '*.svg' {
import { type FC, type SVGProps } from 'react'
const SVG: FC<SVGProps<SVGElement> & { title?: string }>
export default SVG
}