feat(react-icons): added support for SVG symbols

[mcoker]

fixes #8031

This adds support for an SVG <symbol> that can be defined once, then referred to throughout the rest of the document. How does it work?

• @import the icon as you currently would
• Define the symbol somewhere in the rendered code by passing the isSymbol prop. eg, <EllipsisVIcon isSymbol />. This can be anywhere on the page. That creates the SVG code for the icon and hides it visually and will serve as a reference for places you want to use that icon.
• Use the symbol for the icon anywhere you want the SVG to render by passing the isSymbolRef prop. eg, <EllipsisVIcon isSymbolRef />.

Why would you want to do this? If a page has 100 kebab icons (dashboard card actions, table row actions, etc), currently there will be 100 SVG's that are exactly the same repeated code everywhere the icon is used. That's a bunch of kilobits-n-bobs. Using symbols, a dev can instead define the SVG code once by adding <EllipsisVIcon isSymbol /> somewhere on the page, which will render the SVG code once, then using <EllipsisVIcon isSymbolRef /> where they want to render the icon.

This is just a day of learning thing as I was learning about icons, then react and react-icons 🤗 If it's a good idea, maybe we can iterate and improve this and I can DRY this out some and make sure everything works with the existing props.

We may also see if it makes sense to pass multiple icons to build an SVG sprite.

[patternfly-build]

Preview: https://patternfly-react-pr-7998.surge.sh

A11y report: https://patternfly-react-pr-7998-a11y.surge.sh

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.