Append title element to SVG component via title prop

[sudkumar]

Fixes #7103 Add title to SVG component.

Native svg element doesn't accept a title prop. It requires a <title> children. Currently in CRA SVG component, we don't have an option to add a title for our SVG components. This PR enable us to add a title element by providing a title prop to SVG components.

import { ReactComponent as Logo } from "./logo.svg"
function App () {
  return <Logo title="Application Logo" />
}

renders

<svg ...>
  <title>Application Logo</title>

We are using svgr's titleProp option to inject a title element for our SVG components. If no title is provided to the SVG component at render time, this SHOULD fallback to svg's title element.

I have tested it on my local machine by creating a new application with yarn create-react-app my-app (after reading contribution instructions) and it is working as expected for logo.svg file in our template.

Why WIP

We are waiting for gregberge/svgr#311 to get merge to avoid affecting existing code bases which might have title element inside there svg files because, the current behaviour of svgr's titleProp option is to render/replace any title in an svg with an element that only renders the title provided by the prop.

For example: Given our svg file

<svg ...>
  <title>Logo</title>
..

if we set titleProp to true, it will return an SVG component as

function SVG ({ title, ...attrs }) {
  return <svg ... {...attrs}><title>{title}</title>....
}

Which is not what we want because it will not fallback to the default title for svg. What we want is, when the above svg file gets processed by svgr, the output should be:

function SVG ({ title, ...attrs }) {
  return <svg ... {...attrs}><title>{typeof title === "undefined" ? 'Logo' : title}</title>....
}

And so we are waiting for that PR (on svgr) to get merged before we proceed on this PR.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[sudkumar]

@mrmckeb Here I made the attempt to fix it.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[sudkumar]

@mrmckeb gregberge/svgr#311 is merged now. Waiting for a new release of @svgr/webpack then I will update the package here too.

[sudkumar]

New version of @svgr/webpack released (https://github.com/smooth-code/svgr/releases/tag/v4.3.0).

Tested it locally and got an issue (gregberge/svgr#314) which causes this to not work in CRA.

Opened a PR (gregberge/svgr#315) to fix this. Will update once resolves.

[mrmckeb]

Thanks for the update, keep us posted!

[sudkumar]

The PR (gregberge/svgr#315) is merged. Waiting for a new release.

[sudkumar]

@mrmckeb PR is ready for review. Please have a look.

[mrmckeb]

This looks great, thanks. I see some template changes snuck into the PR too - which I think are fine.

[mrmckeb]

@sudkumar Thanks for the PR. it might be worth adding this to the docs - https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs

What do you think?

[sudkumar]

@mrmckeb Thank you.

And for docs: Yes. I will make a PR to update the docs as well.

[sudkumar]

@mrmckeb Here goes the PR #7374

[dluc]

do you think you could provide an approx date for this to be released? Thanks

[sudkumar]

@dluc Waiting for the same.

@mrmckeb @iansu Any release plans for this, please ?

[mrmckeb]

This will be in the next release which we're currently working on, I think in the next two weeks or so. I'll confirm with @iansu on Wednesday :)

[sudkumar]

Thank you.