Svgr: feature request: provide an easy way to add a title to the SVG icon

[rosenfeld]

It would be awesome if we could easily provide some "title" prop to an icon and get it converted to the title element in order to provide some simple tooltip to the icon. Currently it's hard to extend the component to add such title attribute. Even when using a template I've only seen examples to use the 'code' variable, which makes it a bit complicated to add such a title to it based on props.

Thanks for svgr!

[gregberge]

Good idea! I think it would be great to be able to specify title yes.

[rosenfeld]

lol at "good first issue" here :)

[rosenfeld]

I've just tried to give it a try by modifying the template while this isn't supported built-in. This is how my template looks like:

const TITLE = `{ title && <title>{title}</title> }`;

module.exports = (opts = {}) => (code, state) => {
  code = code.replace(/(<svg .*?>)/, `$1\n  ${TITLE}`);
  return `const ${state.componentName} = (props) => {
  const title = props.title;
  delete props.title;
  return ${code};
}
export default ${state.componentName};`;
}

[gregberge]

Hmm yes it should work! But relying on RegExp is too hacky, the safest way to do it is to use a h2x transformation.

[nrei0]

Hello guys, I started to use svgr in my project and would like to have this feature too.
It makes sense if you want to have different title per project or per usage in different places.
Great to have title property. Thank you!

[gregberge]

v2 is published 🎉