feat(Icons): Allow more complex paths and svgs (#11864)

rebeccaalpert · web-flow · commit fa16a3bd3ac3 · 2025-06-13T13:01:22.000-04:00
Allow for arrays of path data in addition to simple strings. Data can include classNames as well as multiple paths.
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",
diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md
@@ -2,7 +2,7 @@
 
 PatternFly Icons as React Components.
 
-## Usage 
+## Usage
 
 ```jsx
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -18,38 +18,40 @@ All icons from @patternfly/react-icons have the HTML class `pf-v6-svg` applied a
 
 If not using @patternfly/react-icons in conjunction with @patternfly/react-styles, then the following generic styles will need to be applied to the icons: `height="1em", style="vertical-align: -0.125em;" width="1em"`
 
-If using @patternfly/react-icons in conjunction with @patternfly/react-core, icons can be further styled by wrapping an icon from 
+If using @patternfly/react-icons in conjunction with @patternfly/react-core, icons can be further styled by wrapping an icon from
 @patternfly/react-icons in a PatternFly icon component.
 
 ## Adding icons
 
-Icons for this package are generated from the `@fortawesome/free-solid-svg-icons` package. To add more to what is generated, modify the [icons.js](./build/icons.js) file in the build folder.
+Icons for this package are generated from the `@fortawesome/free-solid-svg-icons` package.
+
+If you have some custom icon defined by an SVG path the best way to add such icon to this repository is to add its path definition in the [customIcons.mjs](./scripts/icons/customIcons.mjs) file.
 
-If you have some custom icon defined by svg path the best way to add such icon to this repository is to add its path definition in [pfIcons.js](./build/pfIcons.js) file in the build folder.
 ```JS
-module.exports = {
-  pfIcons: {
+export default {
     // ... other icon defintions
     bigPlus: {width: 1024, height: 1024, svgPathData: 'M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'}
-  }
 }
 ```
 
 ## Tree shaking
 
 Ensure optimization.sideEffects is set to true within your Webpack config:
+
 ```JS
 optimization: {
   sideEffects: true
 }
 ```
 
 Use ESM module imports to enable tree shaking with no additional setup required.
+
 ```JS
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 ```
 
 To enable tree shaking with named imports for CJS modules, utilize [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) and update a babel.config.js file to utilize the plugin:
+
 ```JS
 module.exports = {
   presets: ["@babel/preset-env", "@babel/preset-react"],
@@ -66,4 +68,3 @@ module.exports = {
   ]
 }
 ```
-
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },
diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs
@@ -19,9 +19,10 @@ exports.${jsName}Config = {
   name: '${jsName}',
   height: ${icon.height},
   width: ${icon.width},
-  svgPath: '${icon.svgPathData}',
+  svgPath: ${JSON.stringify(icon.svgPathData)},
   yOffset: ${icon.yOffset || 0},
   xOffset: ${icon.xOffset || 0},
+  svgClassName: ${JSON.stringify(icon.svgClassName)},
 };
 exports.${jsName} = require('../createIcon').createIcon(exports.${jsName}Config);
 exports["default"] = exports.${jsName};
@@ -38,9 +39,10 @@ export const ${jsName}Config = {
   name: '${jsName}',
   height: ${icon.height},
   width: ${icon.width},
-  svgPath: '${icon.svgPathData}',
+  svgPath: ${JSON.stringify(icon.svgPathData)},
   yOffset: ${icon.yOffset || 0},
   xOffset: ${icon.xOffset || 0},
+  svgClassName: ${JSON.stringify(icon.svgClassName)},
 };
 
 export const ${jsName} = createIcon(${jsName}Config);
@@ -57,9 +59,10 @@ export declare const ${jsName}Config: {
   name: '${jsName}',
   height: ${icon.height},
   width: ${icon.width},
-  svgPath: '${icon.svgPathData}',
+  svgPath: ${JSON.stringify(icon.svgPathData)},
   yOffset: ${icon.yOffset || 0},
   xOffset: ${icon.xOffset || 0},
+  svgClassName: ${JSON.stringify(icon.svgClassName)},
 };
 export declare const ${jsName}: ComponentClass<SVGIconProps>;
 export default ${jsName};
diff --git a/packages/react-icons/src/__tests__/createIcon.test.tsx b/packages/react-icons/src/__tests__/createIcon.test.tsx
@@ -8,7 +8,19 @@ const iconDef = {
   svgPath: 'svgPath'
 };
 
+const iconDefWithArrayPath = {
+  name: 'IconName',
+  width: 10,
+  height: 20,
+  svgPath: [
+    { path: 'svgPath1', className: 'class1' },
+    { path: 'svgPath2', className: 'class2' }
+  ],
+  svgClassName: 'test'
+};
+
 const SVGIcon = createIcon(iconDef);
+const SVGArrayIcon = createIcon(iconDefWithArrayPath);
 
 test('sets correct viewBox', () => {
   render(<SVGIcon />);
@@ -18,11 +30,27 @@ test('sets correct viewBox', () => {
   );
 });
 
-test('sets correct svgPath', () => {
+test('sets correct svgPath if string', () => {
   render(<SVGIcon />);
   expect(screen.getByRole('img', { hidden: true }).querySelector('path')).toHaveAttribute('d', iconDef.svgPath);
 });
 
+test('sets correct svgPath if array', () => {
+  render(<SVGArrayIcon />);
+  const paths = screen.getByRole('img', { hidden: true }).querySelectorAll('path');
+  expect(paths).toHaveLength(2);
+  expect(paths[0]).toHaveAttribute('d', iconDefWithArrayPath.svgPath[0].path);
+  expect(paths[1]).toHaveAttribute('d', iconDefWithArrayPath.svgPath[1].path);
+  expect(paths[0]).toHaveClass(iconDefWithArrayPath.svgPath[0].className);
+  expect(paths[1]).toHaveClass(iconDefWithArrayPath.svgPath[1].className);
+});
+
+test('sets correct svgClassName', () => {
+  render(<SVGArrayIcon />);
+  const paths = screen.getByRole('img', { hidden: true });
+  expect(paths).toHaveClass(iconDefWithArrayPath.svgClassName);
+});
+
 test('aria-hidden is true if no title is specified', () => {
   render(<SVGIcon />);
   expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
diff --git a/packages/react-icons/src/createIcon.tsx b/packages/react-icons/src/createIcon.tsx
@@ -1,12 +1,17 @@
 import { Component } from 'react';
 
+export interface SVGPathObject {
+  path: string;
+  className?: string;
+}
 export interface IconDefinition {
   name?: string;
   width: number;
   height: number;
-  svgPath: string;
+  svgPath: string | SVGPathObject[];
   xOffset?: number;
   yOffset?: number;
+  svgClassName?: string;
 }
 
 export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
@@ -25,23 +30,31 @@ export function createIcon({
   yOffset = 0,
   width,
   height,
-  svgPath
+  svgPath,
+  svgClassName
 }: IconDefinition): React.ComponentClass<SVGIconProps> {
   return class SVGIcon extends Component<SVGIconProps> {
     static displayName = name;
 
     id = `icon-title-${currentId++}`;
 
     render() {
-      const { title, className, ...props } = this.props;
-      const classes = className ? `pf-v6-svg ${className}` : 'pf-v6-svg';
+      const { title, className: propsClassName, ...props } = this.props;
 
       const hasTitle = Boolean(title);
       const viewBox = [xOffset, yOffset, width, height].join(' ');
 
+      const classNames = ['pf-v6-svg'];
+      if (svgClassName) {
+        classNames.push(svgClassName);
+      }
+      if (propsClassName) {
+        classNames.push(propsClassName);
+      }
+
       return (
         <svg
-          className={classes}
+          className={classNames.join(' ')}
           viewBox={viewBox}
           fill="currentColor"
           aria-labelledby={hasTitle ? this.id : null}
@@ -52,7 +65,13 @@ export function createIcon({
           {...(props as Omit<React.SVGProps<SVGElement>, 'ref'>)} // Lie.
         >
           {hasTitle && <title id={this.id}>{title}</title>}
-          <path d={svgPath} />
+          {Array.isArray(svgPath) ? (
+            svgPath.map((pathObject, index) => (
+              <path className={pathObject.className} key={`${pathObject.path}-${index}`} d={pathObject.path} />
+            ))
+          ) : (
+            <path d={svgPath} />
+          )}
         </svg>
       );
     }
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
@@ -29,8 +29,8 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@adobe/css-tools": "^4.4.2",
-    "@patternfly/patternfly": "6.3.0-prerelease.24",
+    "@patternfly/patternfly": "6.3.0-prerelease.26",
+    "css": "^3.0.0",
     "fs-extra": "^11.3.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -12,13 +12,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/css-tools@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "@adobe/css-tools@npm:4.4.2"
-  checksum: 10c0/19433666ad18536b0ed05d4b53fbb3dd6ede266996796462023ec77a90b484890ad28a3e528cdf3ab8a65cb2fcdff5d8feb04db6bc6eed6ca307c40974239c94
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -3639,10 +3632,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.3.0-prerelease.24":
-  version: 6.3.0-prerelease.24
-  resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.24"
-  checksum: 10c0/127bc928ebb67c35fb2ab42c91a63a950dfb5f68972acdf8b94aabc48ca13fee164b02f10a632712165d977eb04bc28de562e107db9f9053b68c47c61bdc83cf
+"@patternfly/patternfly@npm:6.3.0-prerelease.26":
+  version: 6.3.0-prerelease.26
+  resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.26"
+  checksum: 10c0/3c5d72a9ed2ded48469f5d385eaf861dbcc0f36e42e0760b05757a40145b2970e71a354da382672cacb962fa1707b604c4342ebfeb9d74059e87049a94a4bd83
   languageName: node
   linkType: hard
 
@@ -3740,7 +3733,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.24"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.26"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -3761,7 +3754,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.5.20"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.24"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.26"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -3801,7 +3794,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.24"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.26"
     fs-extra: "npm:^11.3.0"
     tslib: "npm:^2.8.1"
   peerDependencies:
@@ -3885,7 +3878,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.24"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.26"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
@@ -3926,8 +3919,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
-    "@adobe/css-tools": "npm:^4.4.2"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.24"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.26"
+    css: "npm:^3.0.0"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
   linkType: soft

Original file line number	Diff line number	Diff line change
`@@ -29,8 +29,8 @@`
`29`	`29`	`"clean": "rimraf dist"`
`30`	`30`	`},`
`31`	`31`	`"devDependencies": {`
`32`		`- "@adobe/css-tools": "^4.4.2",`
`33`		`- "@patternfly/patternfly": "6.3.0-prerelease.24",`
	`32`	`+ "@patternfly/patternfly": "6.3.0-prerelease.26",`
	`33`	`+ "css": "^3.0.0",`
`34`	`34`	`"fs-extra": "^11.3.0"`
`35`	`35`	`}`
`36`	`36`	`}`