Skip to content

feat(react-icons): add rhds icons#12143

Merged
nicolethoen merged 8 commits into
patternfly:mainfrom
mcoker:add-rhds-icons
Nov 20, 2025
Merged

feat(react-icons): add rhds icons#12143
nicolethoen merged 8 commits into
patternfly:mainfrom
mcoker:add-rhds-icons

Conversation

@mcoker

@mcoker mcoker commented Nov 17, 2025

Copy link
Copy Markdown
Contributor

fixes #12144

You can see them on https://pf-react-pr-12143.surge.sh/icons by looking for "rhds"

  • Added parseRHDSIcons.mjs which reads the @rhds/icons package
  • There are 4 types of icons - ui, social, standard, and micron. You can see them on the rhds icon demo
  • Added an array that defines the types we want to include. Right now I've listed them all.
  • That script yoinks the xoffset, yoffset, width, height, and the svg data (<path d="{this}">) out of the rhds icons and adds them in JSON to scripts/icons/rhdsIcons[type].mjs for each of the icon types. The key for each icon is in the format of "rhds-[type]-[icon name]"
  • Added the icon JSON to generateIcons to build with react-icons.
  • Prettier really doesn't like the SVG path data and that line being over/under 120 chars. Cursor wanted to do the image below, which seems unnecessary, so I added a .prettierignore and added these files to it. I dunno if there's a better/different way to handle that?
Screenshot 2025-11-17 at 6 05 54 PM

Right now you need to run node scripts/parseRHDSIcons.mjs to generate new icons if there is a new version of @rhds/icons. Is that preferred or would we want it to run automatically somehow?

Assisted-by: Compass

@patternfly-build

patternfly-build commented Nov 17, 2025

Copy link
Copy Markdown
Collaborator

@mcoker mcoker requested a review from nicolethoen November 17, 2025 23:25
@mcoker mcoker marked this pull request as ready for review November 17, 2025 23:25
@mcoker mcoker requested a review from kmcfaul November 18, 2025 18:13
@mcoker

mcoker commented Nov 18, 2025

Copy link
Copy Markdown
Contributor Author

@kmcfaul @nicolethoen do you know why the build is failing? I tried clearing the gh action cache. It all works locally - the react repo builds and running npm run generate in packages/react-icons works.

@nicolethoen

Copy link
Copy Markdown
Contributor

I'll take a look at it in a bit - for our reference, this is the error i'm seeing in the logs:

> @patternfly/react-core:generate

@patternfly/react-icons: node:internal/modules/esm/resolve:274
@patternfly/react-icons:     throw new ERR_MODULE_NOT_FOUND(
@patternfly/react-icons:           ^
@patternfly/react-icons: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/runner/work/patternfly-react/patternfly-react/packages/react-icons/scripts/icons/rhIconsMicrons.mjs' imported from /home/runner/work/patternfly-react/patternfly-react/packages/react-icons/scripts/generateIcons.mjs
@patternfly/react-icons:     at finalizeResolution (node:internal/modules/esm/resolve:274:11)
@patternfly/react-icons:     at moduleResolve (node:internal/modules/esm/resolve:859:10)
@patternfly/react-icons:     at defaultResolve (node:internal/modules/esm/resolve:983:11)
@patternfly/react-icons:     at #cachedDefaultResolve (node:internal/modules/esm/loader:731:20)
@patternfly/react-icons:     at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
@patternfly/react-icons:     at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:310:38)
@patternfly/react-icons:     at ModuleJob._link (node:internal/modules/esm/module_job:182:49) {
@patternfly/react-icons:   code: 'ERR_MODULE_NOT_FOUND',
@patternfly/react-icons:   url: 'file:///home/runner/work/patternfly-react/patternfly-react/packages/react-icons/scripts/icons/rhIconsMicrons.mjs'
@patternfly/react-icons: }

@andrew-ronaldson andrew-ronaldson self-requested a review November 19, 2025 18:57

@andrew-ronaldson andrew-ronaldson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Future us will want to add a filter and/or search to this page.

@kmcfaul kmcfaul left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@bekah-stephens bekah-stephens left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

icons woo!!

@nicolethoen nicolethoen merged commit 606f717 into patternfly:main Nov 20, 2025
13 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.17
  • @patternfly/react-core@6.5.0-prerelease.17
  • @patternfly/react-docs@7.5.0-prerelease.18
  • @patternfly/react-drag-drop@6.5.0-prerelease.17
  • @patternfly/react-icons@6.5.0-prerelease.7
  • demo-app-ts@6.5.0-prerelease.17
  • @patternfly/react-table@6.5.0-prerelease.17
  • @patternfly/react-templates@6.5.0-prerelease.17

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

React icons - update to include brand icons Icon: Add AI experience icon to PatternFly

6 participants