docs: Updates docs with new rh-icons.#4994
Conversation
bekah-stephens
left a comment
There was a problem hiding this comment.
at a glance, it lgtm! nit picky thing - do we need to update this screenshot to use the new UI icons or does it not matter?
| PatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same). | ||
| <Alert variant="info" title="Migrating to Red Hat icons" isInline> | ||
| <p> | ||
| To automatically migrate your Font Awesome and PatternFly icons to their respective Red Hat UI icons, you can use the |
There was a problem hiding this comment.
@kmcfaul might want to use this alert or this page to highlight the usage of the class she implemented to allow people to migrate easily. I tagged her for review
| <Alert variant="info" title="Migrating to Red Hat icons" isInline> | ||
| <p> | ||
| To automatically migrate your Font Awesome and PatternFly icons to their respective Red Hat UI icons, you can use the | ||
| <a href="https://github.com/patternfly/patternfly-react/blob/main/packages/react-icons/scripts/icons/pfToRhIcons.mjs" target="_blank" rel="noopener noreferrer">pfToRhIcons.mjs script</a>. While you can still use Font Awesome or legacy PatternFly icons manually if necessary, they are no longer our recommended approach and should be replaced with Red Hat icons going forward. |
There was a problem hiding this comment.
pfToRhIcons doesn't automatically update icons to their RH counterpart, though it can be used as a reference to see how PF icons match up to RH icons. The script is used internally to enable the migration class pf-v6-icon-set-rh-ui.
The migration step a user can take in the interim of replacing their icons directly is to leave the PF icons as is and apply pf-v6-icon-set-rh-ui to an outer element (typically on html similarly to how theme classes are applied). This class will automatically update PF icons to render as RH ui icons for icons specified in pfToRhIcons without needing import changes.
There are a couple of disclaimers:
- Not all PF icons are currently mapped to RH icons, so some may not update automatically & will need direct updates
- The mapped icons will update to the "ui" set of RH icons. The two other RH icon sets of "microns" and "standard" are available for some icons and may look more appropriate. (It looks like the other sets are already called out around line 103).
- The current mapping in
pfToRhIconsmay be updated in Q2 based on design feedback as we continue working on the Project Felt theme
There was a problem hiding this comment.
ah ty for this context! I just pushed an update to adjust the way I'm discussing migration. Can you take another look and lmk if there's anything I should add or remove?
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Closes #4973
This PR does a few things:
Still needed: