Icons - make react-icons the single source of truth for patternfly icons #280
Description
Intro
Core and react are currently on different icon systems. PF core currently ships with an old version of a Font Awesome icon font and a custom built pficon icon font as its icon system. These icons can be used by consumers, and are used as the default icons in the core docs.
PF react uses the @patternfly/react-icons package, which renders inline SVGs, and includes many more Font Awesome icons than are in the core webfont, all of the custom "pficons", plus a bunch of custom icons.
Some problems we have currently
- react-icons contains a bunch of icons (FA and others) that are not available in core
- since core renders icons with an icon font, they don't render the same as inline SVGs from react-icons, and there are discrepancies, albeit minor, with sizing/spacing between some core and react layouts due to the icon differences.
- since core uses a FA font for some icons and a custom built font for others, icons between the two fonts render slightly differently
- if we want to style parts of icons using tokens, so they can respond to themes/var changes on the fly, an icon font can't do that, so core would have to have its own version of one-off icons to be able to use them since we can't currently consume anything from react-icons
- maintaining 2 separate systems is a pain
- there is no single source of truth for patternfly icons
A path forward
Update core to use the same icons as react
We just updated @patternfly/react-icons to render all of its icons as static SVGs in /dist/static - patternfly/patternfly-react#12154. Those icons can now be used in core examples/docs, which will fix the issue of core and react being on different icon systems. Core and react should render the exact same SVG source on the page.
Core can go ahead and consume these now in the docs. We can leave the icon fonts in core so we don't break anyone using them.
Make react-icons the single source of truth for patternfly icons
Instead of core defining custom SVG defs, then react consuming those defs to make them available in react-icons, react-icons can own that file, and core can consume the resulting SVGs. At that point, all icons should be defined and generated in react-icons, making it the SSoT for pf icons.
We can then remove the pf core dependency in react-icons. I think that also means we may not need to bump react-icons versions every time there is a new core/react version?
Mark the FA/pficon icon fonts as deprecated
We could go ahead and update our docs to communicate the FA and pficon icon fonts will be deprecated, and in our next breaking change release, we can remove them.
Longer term stuff
Remove the FA/pficon icon fonts and associated stuff
In a breaking change release, we can
- Remove patternfly-fa-icons.scss and patternfly-pf-icons.scss, along with all other styles and files associated with the icon fonts.
- Update react-core/scripts/copyStyles.mjs to no longer strip out FA/pficon styles. Need to check for any other scripts/jobs like that.
- Clean up our icons docs - https://www.patternfly.org/design-foundations/icons. Remove all of the references to FA and any associated
<i class="fa...">docs, remove all of the HTML/core specific stuff (or update it with instructions on how to use static SVGs)
Update the react-icons package name/repo
Possibly rename the react-icons package to @patternfly/icons or something like that, and maybe move it to it's own repo? @kmcfaul mentioned that.
Consider adding SVG sprites/symbols as alternate ways for non-react users to use our fonts, similar to the delivery methods FA and other icon systems offer. I imagine there will be non-react users that want an easy way to include icons without having to include inline SVGs for every icon.