titleProp options doesn't preserve the existing title if no title prop is passed

[sudkumar]

💬 Questions and Help

When passing the titleProp option, the @svgr/babel-plugin-svg-dynamic-title plugin puts a <title>{title}</title> element inside the svg element. If there is an existing title element inside the svg, it will be replaced with this element only.

My question is: Is there any specific reason for falling back to the content of the existing title element (if present) when the title prop passed to the component is undefined ?

For example, suppose my test.svg has following content:

<svg>
  <title>Default Title</title>
</svg>

When passing this svg through the compiler with titleProp option set to true, the content of React Component is:

<svg>
  <title>{title}</title>
</svg>

Can we not keep the Default Title as fallback when title is not provided ? e.g.

<svg>
-  <title>{title}</title>
+ <title>{title === undefined ? "Default Title" : title}</title>
</svg>

@neoziro Please help.

P.S.: I looked into the babel-plugin-svg-dynamic-title/src/index.js source code but had no clue about the implementation.

[sudkumar]

I am working on an application bootstrapped with create-react-app which usage @svgr/webpack. I have also opened an issue regarding this feature in cra (facebook/create-react-app#7103).

[gregberge]

Hello @sudkumar, I think you are right, if the user don't remove the title, it should remain in the code.