reactjstypescriptsvgtypessvgr

How do I pass prop "title" to svgr react component properly?


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?


Solution

  • 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
    }