@patternfly/react-icons 5.0.0-alpha.2 → 5.0.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.20 (2023-05-31)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.19 (2023-05-19)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.18 (2023-05-18)
+
+### Features
+
+- **Flex:** add plain gap spacing ([#9143](https://github.com/patternfly/patternfly-react/issues/9143)) ([eceb265](https://github.com/patternfly/patternfly-react/commit/eceb265a5318d4c533a4c54484311bbd9810aa7d))
+
+# 5.0.0-alpha.17 (2023-05-18)
+
+### Features
+
+- **Table:** added class names for table elements ([#9133](https://github.com/patternfly/patternfly-react/issues/9133)) ([51d6d2b](https://github.com/patternfly/patternfly-react/commit/51d6d2b1a92af7bbfb0075361b375a4d881e110b))
+
+# 5.0.0-alpha.16 (2023-05-18)
+
+### Features
+
+- **FormControls:** updated logic for rendering icons ([#9132](https://github.com/patternfly/patternfly-react/issues/9132)) ([9f4863f](https://github.com/patternfly/patternfly-react/commit/9f4863f3251e365142c44aace2c1aeba57ba6b3a))
+
+# 5.0.0-alpha.15 (2023-05-16)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# [5.0.0-alpha.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@5.0.0-alpha.13...@patternfly/react-icons@5.0.0-alpha.14) (2023-05-05)
+
+### Bug Fixes
+
+- **deps:** updated Core for v5 versioning ([#9075](https://github.com/patternfly/patternfly-react/issues/9075)) ([3879fc7](https://github.com/patternfly/patternfly-react/commit/3879fc757aefeed80b0694365aa20d5ca856a797))
+
+# 5.0.0-alpha.13 (2023-05-05)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.12 (2023-04-27)
+
+### Bug Fixes
+
+- **createIcon:** Spread className to svg to fix broken images ([#8954](https://github.com/patternfly/patternfly-react/issues/8954)) ([8073115](https://github.com/patternfly/patternfly-react/commit/80731151f6d91299330f580262cb7e0d2ee670b8))
+
+# 5.0.0-alpha.11 (2023-04-25)
+
+### Bug Fixes
+
+- bump dependencies and remove ssl option ([#8984](https://github.com/patternfly/patternfly-react/issues/8984)) ([f8f77d2](https://github.com/patternfly/patternfly-react/commit/f8f77d232b386ad8676af609273d9adff5a5feae))
+
+# 5.0.0-alpha.10 (2023-04-11)
+
+### Bug Fixes
+
+- **icons:** fixed pficons naming overrides ([#8932](https://github.com/patternfly/patternfly-react/issues/8932)) ([1c9c9cb](https://github.com/patternfly/patternfly-react/commit/1c9c9cb7909a26d3bc4ad340d0656c0ec31d9e58))
+
+# 5.0.0-alpha.9 (2023-04-06)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.8 (2023-04-03)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.7 (2023-03-27)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.6 (2023-03-18)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.5 (2023-03-17)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+# 5.0.0-alpha.4 (2023-03-02)
+
+### Bug Fixes
+
+- **core:** update core to alpha.24 ([#8768](https://github.com/patternfly/patternfly-react/issues/8768)) ([6dd5e01](https://github.com/patternfly/patternfly-react/commit/6dd5e01e16bc94fe4b954b79ba67adaaab9c7135))
+
+# 5.0.0-alpha.3 (2023-02-15)
+
+### Bug Fixes
+
+- **deps:** updated to the latest core alpha ([#8688](https://github.com/patternfly/patternfly-react/issues/8688)) ([5f81928](https://github.com/patternfly/patternfly-react/commit/5f819288d7baaa3806b23c0da8fb26dd4ec12d6b))
+
 # 5.0.0-alpha.2 (2023-02-08)
 
 **Note:** Version bump only for package @patternfly/react-icons

package/dist/esm/createIcon.d.ts

@@ -1,11 +1,4 @@
 import * as React from 'react';
-export declare enum IconSize {
-    sm = "sm",
-    md = "md",
-    lg = "lg",
-    xl = "xl"
-}
-export declare const getSize: (size: IconSize | keyof typeof IconSize) => "1em" | "1.5em" | "2em" | "3em";
 export interface IconDefinition {
     name?: string;
     width: number;
@@ -14,11 +7,9 @@ export interface IconDefinition {
     xOffset?: number;
     yOffset?: number;
 }
-export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'size' | 'ref'> {
-    color?: string;
-    size?: IconSize | keyof typeof IconSize;
+export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
     title?: string;
-    noVerticalAlign?: boolean;
+    className?: string;
 }
 /**
  * Factory to create Icon class components for consumers

package/dist/esm/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,QAAQ;IAClB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,eAAO,MAAM,OAAO,SAAU,QAAQ,GAAG,MAAM,eAAe,oCAa7D,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAsCrD"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA6BrD"}

package/dist/esm/createIcon.js

@@ -1,26 +1,5 @@
 import { __rest } from "tslib";
 import * as React from 'react';
-export var IconSize;
-(function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-export const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
-};
 let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
@@ -33,23 +12,16 @@ export function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgP
                 this.id = `icon-title-${currentId++}`;
             }
             render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const _a = this.props, { title, className } = _a, props = __rest(_a, ["title", "className"]);
+                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
                 const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
                     hasTitle && React.createElement("title", { id: this.id }, title),
                     React.createElement("path", { d: svgPath })));
             }
         },
         _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
         _a;
 }
 //# sourceMappingURL=createIcon.js.map

package/dist/esm/createIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAN,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;AACX,CAAC,EALW,QAAQ,KAAR,QAAQ,QAKnB;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAsC,EAAE,EAAE;IAChE,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,OAAO,CAAC;QACjB,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAkBF,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAQL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YA4BnC,CAAC;YA1BC,MAAM;gBACJ,MAAM,KAAoD,IAAI,CAAC,KAAK,EAA9D,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,OAAyB,EAApB,KAAK,cAA/C,6CAAiD,CAAa,CAAC;gBAErE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;gBAC1D,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,SAAS,IAAI,EAAE,CAAC;gBAC3E,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,qBACC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QAnCQ,cAAW,GAAG,IAAK;QACnB,eAAY,GAAG;YACpB,KAAK,EAAE,cAAc;YACrB,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,eAAe,EAAE,KAAK;SACtB;WA8BF;AACJ,CAAC"}
+{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YAwBnC,CAAC;YAtBC,MAAM;gBACJ,MAAM,KAAiC,IAAI,CAAC,KAAK,EAA3C,EAAE,KAAK,EAAE,SAAS,OAAyB,EAApB,KAAK,cAA5B,sBAA8B,CAAa,CAAC;gBAClD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;gBAEnE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QA1BQ,cAAW,GAAG,IAAK;WA0B1B;AACJ,CAAC"}

package/dist/esm/icons/index.d.ts

@@ -919,6 +919,7 @@ export { MountainIcon, MountainIconConfig } from './mountain-icon';
 export { MouseIcon, MouseIconConfig } from './mouse-icon';
 export { MousePointerIcon, MousePointerIconConfig } from './mouse-pointer-icon';
 export { MugHotIcon, MugHotIconConfig } from './mug-hot-icon';
+export { MulticlusterIcon, MulticlusterIconConfig } from './multicluster-icon';
 export { MusicIcon, MusicIconConfig } from './music-icon';
 export { NamespacesIcon, NamespacesIconConfig } from './namespaces-icon';
 export { NapsterIcon, NapsterIconConfig } from './napster-icon';

package/dist/esm/icons/index.js

@@ -919,6 +919,7 @@ export { MountainIcon, MountainIconConfig } from './mountain-icon';
 export { MouseIcon, MouseIconConfig } from './mouse-icon';
 export { MousePointerIcon, MousePointerIconConfig } from './mouse-pointer-icon';
 export { MugHotIcon, MugHotIconConfig } from './mug-hot-icon';
+export { MulticlusterIcon, MulticlusterIconConfig } from './multicluster-icon';
 export { MusicIcon, MusicIconConfig } from './music-icon';
 export { NamespacesIcon, NamespacesIconConfig } from './namespaces-icon';
 export { NapsterIcon, NapsterIconConfig } from './napster-icon';

package/dist/esm/icons/multicluster-icon.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SVGIconProps } from '../createIcon';
+export declare const MulticlusterIconConfig: {
+  name: 'MulticlusterIcon',
+  height: 1024,
+  width: 896,
+  svgPath: 'M768,768 C732.654,768 704,739.346 704,704 C704,668.654 732.654,640 768,640 C803.346,640 832,668.654 832,704 C832,739.346 803.346,768 768,768 L768,768 Z M768,576 C697.308,576 640,633.308 640,704 C640,774.692 697.308,832 768,832 C838.692,832 896,774.692 896,704 C896,633.308 838.692,576 768,576 L768,576 Z M128,384 C92.654,384 64,355.346 64,320 C64,284.654 92.654,256 128,256 C163.346,256 192,284.654 192,320 C192,355.346 163.346,384 128,384 L128,384 Z M128,192 C57.308,192 0,249.308 0,320 C0,390.692 57.308,448 128,448 C198.692,448 256,390.692 256,320 C256,249.308 198.692,192 128,192 L128,192 Z M658.229,769.862 L448,896 L128,704 L128,448 C151.315,448 173.172,441.763 192,430.872 L192,665.7 L448,819.2 L640.001,704.074 C640.015,728.135 646.671,750.64 658.229,769.862 L658.229,769.862 Z M704,358.7 L551.526,267.275 C564.619,249.299 573.145,227.788 575.397,204.438 L768,320 L768,576 C744.685,576 722.828,582.237 704,593.128 L704,358.7 Z M237.771,254.138 L320.603,204.438 C322.855,227.788 331.381,249.3 344.474,267.275 L255.996,320.328 C255.996,320.218 256,320.109 256,320 C256,295.911 249.341,273.38 237.771,254.138 L237.771,254.138 Z M448,256 C412.654,256 384,227.346 384,192 C384,156.654 412.654,128 448,128 C483.346,128 512,156.654 512,192 C512,227.346 483.346,256 448,256 L448,256 Z M448,64 C377.308,64 320,121.308 320,192 C320,262.692 377.308,320 448,320 C518.692,320 576,262.692 576,192 C576,121.308 518.692,64 448,64 L448,64 Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+export declare const MulticlusterIcon: React.ComponentClass<SVGIconProps>;
+export default MulticlusterIcon;

package/dist/esm/icons/multicluster-icon.js

@@ -0,0 +1,14 @@
+import { createIcon } from '../createIcon';
+
+export const MulticlusterIconConfig = {
+  name: 'MulticlusterIcon',
+  height: 1024,
+  width: 896,
+  svgPath: 'M768,768 C732.654,768 704,739.346 704,704 C704,668.654 732.654,640 768,640 C803.346,640 832,668.654 832,704 C832,739.346 803.346,768 768,768 L768,768 Z M768,576 C697.308,576 640,633.308 640,704 C640,774.692 697.308,832 768,832 C838.692,832 896,774.692 896,704 C896,633.308 838.692,576 768,576 L768,576 Z M128,384 C92.654,384 64,355.346 64,320 C64,284.654 92.654,256 128,256 C163.346,256 192,284.654 192,320 C192,355.346 163.346,384 128,384 L128,384 Z M128,192 C57.308,192 0,249.308 0,320 C0,390.692 57.308,448 128,448 C198.692,448 256,390.692 256,320 C256,249.308 198.692,192 128,192 L128,192 Z M658.229,769.862 L448,896 L128,704 L128,448 C151.315,448 173.172,441.763 192,430.872 L192,665.7 L448,819.2 L640.001,704.074 C640.015,728.135 646.671,750.64 658.229,769.862 L658.229,769.862 Z M704,358.7 L551.526,267.275 C564.619,249.299 573.145,227.788 575.397,204.438 L768,320 L768,576 C744.685,576 722.828,582.237 704,593.128 L704,358.7 Z M237.771,254.138 L320.603,204.438 C322.855,227.788 331.381,249.3 344.474,267.275 L255.996,320.328 C255.996,320.218 256,320.109 256,320 C256,295.911 249.341,273.38 237.771,254.138 L237.771,254.138 Z M448,256 C412.654,256 384,227.346 384,192 C384,156.654 412.654,128 448,128 C483.346,128 512,156.654 512,192 C512,227.346 483.346,256 448,256 L448,256 Z M448,64 C377.308,64 320,121.308 320,192 C320,262.692 377.308,320 448,320 C518.692,320 576,262.692 576,192 C576,121.308 518.692,64 448,64 L448,64 Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+export const MulticlusterIcon = createIcon(MulticlusterIconConfig);
+
+export default MulticlusterIcon;

package/dist/esm/index.d.ts

@@ -1,3 +1,2 @@
-export { IconSize } from './createIcon';
 export * from './icons/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/esm/index.js

@@ -1,3 +1,2 @@
-export { IconSize } from './createIcon';
 export * from './icons/index';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/js/createIcon.d.ts

@@ -1,11 +1,4 @@
 import * as React from 'react';
-export declare enum IconSize {
-    sm = "sm",
-    md = "md",
-    lg = "lg",
-    xl = "xl"
-}
-export declare const getSize: (size: IconSize | keyof typeof IconSize) => "1em" | "1.5em" | "2em" | "3em";
 export interface IconDefinition {
     name?: string;
     width: number;
@@ -14,11 +7,9 @@ export interface IconDefinition {
     xOffset?: number;
     yOffset?: number;
 }
-export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'size' | 'ref'> {
-    color?: string;
-    size?: IconSize | keyof typeof IconSize;
+export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
     title?: string;
-    noVerticalAlign?: boolean;
+    className?: string;
 }
 /**
  * Factory to create Icon class components for consumers

package/dist/js/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,QAAQ;IAClB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,eAAO,MAAM,OAAO,SAAU,QAAQ,GAAG,MAAM,eAAe,oCAa7D,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAsCrD"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA6BrD"}

package/dist/js/createIcon.js

@@ -1,30 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createIcon = exports.getSize = exports.IconSize = void 0;
+exports.createIcon = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-var IconSize;
-(function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
-})(IconSize = exports.IconSize || (exports.IconSize = {}));
-const getSize = (size) => {
-    switch (size) {
-        case IconSize.sm:
-            return '1em';
-        case IconSize.md:
-            return '1.5em';
-        case IconSize.lg:
-            return '2em';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
-};
-exports.getSize = getSize;
 let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
@@ -37,23 +15,16 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
                 this.id = `icon-title-${currentId++}`;
             }
             render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = tslib_1.__rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+                const _a = this.props, { title, className } = _a, props = tslib_1.__rest(_a, ["title", "className"]);
+                const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
                 const hasTitle = Boolean(title);
-                const heightWidth = (0, exports.getSize)(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
                 const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
+                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
                     hasTitle && React.createElement("title", { id: this.id }, title),
                     React.createElement("path", { d: svgPath })));
             }
         },
         _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
         _a;
 }
 exports.createIcon = createIcon;

package/dist/js/createIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;IACT,qBAAS,CAAA;AACX,CAAC,EALW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAKnB;AAEM,MAAM,OAAO,GAAG,CAAC,IAAsC,EAAE,EAAE;IAChE,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,OAAO,CAAC;QACjB,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ,CAAC,EAAE;YACd,OAAO,KAAK,CAAC;QACf;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAbW,QAAA,OAAO,WAalB;AAkBF,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAQL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YA4BnC,CAAC;YA1BC,MAAM;gBACJ,MAAM,KAAoD,IAAI,CAAC,KAAK,EAA9D,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,OAAyB,EAApB,KAAK,sBAA/C,6CAAiD,CAAa,CAAC;gBAErE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;gBAC1D,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,SAAS,IAAI,EAAE,CAAC;gBAC3E,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,qBACC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QAnCQ,cAAW,GAAG,IAAK;QACnB,eAAY,GAAG;YACpB,KAAK,EAAE,cAAc;YACrB,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,eAAe,EAAE,KAAK;SACtB;WA8BF;AACJ,CAAC;AA7CD,gCA6CC"}
+{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAgB/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YAwBnC,CAAC;YAtBC,MAAM;gBACJ,MAAM,KAAiC,IAAI,CAAC,KAAK,EAA3C,EAAE,KAAK,EAAE,SAAS,OAAyB,EAApB,KAAK,sBAA5B,sBAA8B,CAAa,CAAC;gBAClD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;gBAEnE,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QA1BQ,cAAW,GAAG,IAAK;WA0B1B;AACJ,CAAC;AApCD,gCAoCC"}

package/dist/js/icons/index.d.ts

@@ -919,6 +919,7 @@ export { MountainIcon, MountainIconConfig } from './mountain-icon';
 export { MouseIcon, MouseIconConfig } from './mouse-icon';
 export { MousePointerIcon, MousePointerIconConfig } from './mouse-pointer-icon';
 export { MugHotIcon, MugHotIconConfig } from './mug-hot-icon';
+export { MulticlusterIcon, MulticlusterIconConfig } from './multicluster-icon';
 export { MusicIcon, MusicIconConfig } from './music-icon';
 export { NamespacesIcon, NamespacesIconConfig } from './namespaces-icon';
 export { NapsterIcon, NapsterIconConfig } from './napster-icon';

package/dist/js/icons/index.js

@@ -924,6 +924,7 @@ __export(require('./mountain-icon'));
 __export(require('./mouse-icon'));
 __export(require('./mouse-pointer-icon'));
 __export(require('./mug-hot-icon'));
+__export(require('./multicluster-icon'));
 __export(require('./music-icon'));
 __export(require('./namespaces-icon'));
 __export(require('./napster-icon'));

package/dist/js/icons/multicluster-icon.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SVGIconProps } from '../createIcon';
+export declare const MulticlusterIconConfig: {
+  name: 'MulticlusterIcon',
+  height: 1024,
+  width: 896,
+  svgPath: 'M768,768 C732.654,768 704,739.346 704,704 C704,668.654 732.654,640 768,640 C803.346,640 832,668.654 832,704 C832,739.346 803.346,768 768,768 L768,768 Z M768,576 C697.308,576 640,633.308 640,704 C640,774.692 697.308,832 768,832 C838.692,832 896,774.692 896,704 C896,633.308 838.692,576 768,576 L768,576 Z M128,384 C92.654,384 64,355.346 64,320 C64,284.654 92.654,256 128,256 C163.346,256 192,284.654 192,320 C192,355.346 163.346,384 128,384 L128,384 Z M128,192 C57.308,192 0,249.308 0,320 C0,390.692 57.308,448 128,448 C198.692,448 256,390.692 256,320 C256,249.308 198.692,192 128,192 L128,192 Z M658.229,769.862 L448,896 L128,704 L128,448 C151.315,448 173.172,441.763 192,430.872 L192,665.7 L448,819.2 L640.001,704.074 C640.015,728.135 646.671,750.64 658.229,769.862 L658.229,769.862 Z M704,358.7 L551.526,267.275 C564.619,249.299 573.145,227.788 575.397,204.438 L768,320 L768,576 C744.685,576 722.828,582.237 704,593.128 L704,358.7 Z M237.771,254.138 L320.603,204.438 C322.855,227.788 331.381,249.3 344.474,267.275 L255.996,320.328 C255.996,320.218 256,320.109 256,320 C256,295.911 249.341,273.38 237.771,254.138 L237.771,254.138 Z M448,256 C412.654,256 384,227.346 384,192 C384,156.654 412.654,128 448,128 C483.346,128 512,156.654 512,192 C512,227.346 483.346,256 448,256 L448,256 Z M448,64 C377.308,64 320,121.308 320,192 C320,262.692 377.308,320 448,320 C518.692,320 576,262.692 576,192 C576,121.308 518.692,64 448,64 L448,64 Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+export declare const MulticlusterIcon: React.ComponentClass<SVGIconProps>;
+export default MulticlusterIcon;

package/dist/js/icons/multicluster-icon.js

@@ -0,0 +1,12 @@
+"use strict"
+exports.__esModule = true;
+exports.MulticlusterIconConfig = {
+  name: 'MulticlusterIcon',
+  height: 1024,
+  width: 896,
+  svgPath: 'M768,768 C732.654,768 704,739.346 704,704 C704,668.654 732.654,640 768,640 C803.346,640 832,668.654 832,704 C832,739.346 803.346,768 768,768 L768,768 Z M768,576 C697.308,576 640,633.308 640,704 C640,774.692 697.308,832 768,832 C838.692,832 896,774.692 896,704 C896,633.308 838.692,576 768,576 L768,576 Z M128,384 C92.654,384 64,355.346 64,320 C64,284.654 92.654,256 128,256 C163.346,256 192,284.654 192,320 C192,355.346 163.346,384 128,384 L128,384 Z M128,192 C57.308,192 0,249.308 0,320 C0,390.692 57.308,448 128,448 C198.692,448 256,390.692 256,320 C256,249.308 198.692,192 128,192 L128,192 Z M658.229,769.862 L448,896 L128,704 L128,448 C151.315,448 173.172,441.763 192,430.872 L192,665.7 L448,819.2 L640.001,704.074 C640.015,728.135 646.671,750.64 658.229,769.862 L658.229,769.862 Z M704,358.7 L551.526,267.275 C564.619,249.299 573.145,227.788 575.397,204.438 L768,320 L768,576 C744.685,576 722.828,582.237 704,593.128 L704,358.7 Z M237.771,254.138 L320.603,204.438 C322.855,227.788 331.381,249.3 344.474,267.275 L255.996,320.328 C255.996,320.218 256,320.109 256,320 C256,295.911 249.341,273.38 237.771,254.138 L237.771,254.138 Z M448,256 C412.654,256 384,227.346 384,192 C384,156.654 412.654,128 448,128 C483.346,128 512,156.654 512,192 C512,227.346 483.346,256 448,256 L448,256 Z M448,64 C377.308,64 320,121.308 320,192 C320,262.692 377.308,320 448,320 C518.692,320 576,262.692 576,192 C576,121.308 518.692,64 448,64 L448,64 Z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.MulticlusterIcon = require('../createIcon').createIcon(exports.MulticlusterIconConfig);
+exports["default"] = exports.MulticlusterIcon;

package/dist/js/index.d.ts

@@ -1,3 +1,2 @@
-export { IconSize } from './createIcon';
 export * from './icons/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/js/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/js/index.js

@@ -1,8 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSize = void 0;
 const tslib_1 = require("tslib");
-var createIcon_1 = require("./createIcon");
-Object.defineProperty(exports, "IconSize", { enumerable: true, get: function () { return createIcon_1.IconSize; } });
 tslib_1.__exportStar(require("./icons/index"), exports);
 //# sourceMappingURL=index.js.map

package/dist/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,2CAAwC;AAA/B,sGAAA,QAAQ,OAAA;AACjB,wDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-icons",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.20",
   "description": "PatternFly 4 Icons as React Components",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -25,23 +25,23 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "generate": "rimraf dist/esm/icons dist/js/icons && node scripts/writeIcons.js",
+    "generate": "rimraf dist/esm/icons dist/js/icons && node scripts/writeIcons.mjs",
     "clean": "rimraf dist src/icons src/index.js src/index.d.ts"
   },
   "devDependencies": {
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "5.0.0-alpha.12",
-    "fs-extra": "^6.0.1",
+    "@patternfly/patternfly": "5.0.0-alpha.69",
+    "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
-    "tslib": "^2.0.0",
+    "tslib": "^2.5.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
-  "gitHead": "dd91c73c726d471205cc7ce2cf463fa8c1a6e593"
+  "gitHead": "0f4a1d04e19c94a00f2174fb5e063e4cc516819f"
 }

package/scripts/generateIcons.mjs

@@ -0,0 +1,14 @@
+import faIcons from './icons/fontawesomeIcons.js';
+import patternflyIcons from './icons/patternflyIcons.mjs';
+import customIcons from './icons/customIcons.js';
+
+/**
+ * Generates icons from FontAwesome, PatternFly CSS, and custom icons in this repo.
+ */
+export function generateIcons() {
+  return {
+    ...faIcons,
+    ...patternflyIcons,
+    ...customIcons
+  };
+}

package/scripts/icons/{patternflyIcons.js → patternflyIcons.mjs}

@@ -1,4 +1,4 @@
-const pfIcons = require('@patternfly/patternfly/icons/pf-icons.json');
+import { pfIcons } from '@patternfly/patternfly/icons/pficons.mjs';
 
 const renaming = {
   save: 'save-alt',
@@ -29,4 +29,5 @@ function convertIcons(icons) {
   return icons;
 }
 
-module.exports = convertIcons(pfIcons);
+const patternflyIcons = convertIcons(pfIcons)
+export default patternflyIcons;

package/scripts/{writeIcons.js → writeIcons.mjs}

@@ -1,6 +1,9 @@
-const { join } = require('path');
-const { outputFileSync } = require('fs-extra');
-const { generateIcons } = require('./generateIcons');
+import { join } from 'path';
+import { outputFileSync } from 'fs-extra/esm';
+import { generateIcons } from './generateIcons.mjs';
+
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 const outDir = join(__dirname, '../dist');
 

package/src/__tests__/createIcon.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { createIcon, IconSize } from '../createIcon';
+import { createIcon } from '../createIcon';
 
 const iconDef = {
   name: 'IconName',
@@ -28,14 +28,6 @@ test('sets correct svgPath', () => {
   ).toHaveAttribute('d', iconDef.svgPath);
 });
 
-test('height and width are set from size', () => {
-  render(<SVGIcon size={IconSize.sm} />);
-
-  const svg = screen.getByRole('img', { hidden: true });
-  expect(svg).toHaveAttribute('width', '1em');
-  expect(svg).toHaveAttribute('height', '1em');
-});
-
 test('aria-hidden is true if no title is specified', () => {
   render(<SVGIcon />);
   expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
@@ -63,7 +55,7 @@ test('aria-labelledby matches title id', () => {
 
   const svg = screen.getByRole('img', { hidden: true });
   const labelledby = svg.getAttribute('aria-labelledby');
-  const titleId = svg.querySelector('title').getAttribute('id');
+  const titleId = svg.querySelector('title')?.getAttribute('id');
 
   expect(labelledby).toEqual(titleId);
 });

package/src/createIcon.tsx

@@ -1,27 +1,5 @@
 import * as React from 'react';
 
-export enum IconSize {
-  sm = 'sm',
-  md = 'md',
-  lg = 'lg',
-  xl = 'xl'
-}
-
-export const getSize = (size: IconSize | keyof typeof IconSize) => {
-  switch (size) {
-    case IconSize.sm:
-      return '1em';
-    case IconSize.md:
-      return '1.5em';
-    case IconSize.lg:
-      return '2em';
-    case IconSize.xl:
-      return '3em';
-    default:
-      return '1em';
-  }
-};
-
 export interface IconDefinition {
   name?: string;
   width: number;
@@ -31,11 +9,9 @@ export interface IconDefinition {
   yOffset?: number;
 }
 
-export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'size' | 'ref'> {
-  color?: string;
-  size?: IconSize | keyof typeof IconSize;
+export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
   title?: string;
-  noVerticalAlign?: boolean;
+  className?: string;
 }
 
 let currentId = 0;
@@ -53,30 +29,21 @@ export function createIcon({
 }: IconDefinition): React.ComponentClass<SVGIconProps> {
   return class SVGIcon extends React.Component<SVGIconProps> {
     static displayName = name;
-    static defaultProps = {
-      color: 'currentColor',
-      size: IconSize.sm,
-      noVerticalAlign: false
-    };
 
     id = `icon-title-${currentId++}`;
 
     render() {
-      const { size, color, title, noVerticalAlign, ...props } = this.props;
+      const { title, className, ...props } = this.props;
+      const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
 
       const hasTitle = Boolean(title);
-      const heightWidth = getSize(size);
-      const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-      const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
       const viewBox = [xOffset, yOffset, width, height].join(' ');
 
       return (
         <svg
-          style={style}
-          fill={color}
-          height={heightWidth}
-          width={heightWidth}
+          className={classes}
           viewBox={viewBox}
+          fill="currentColor"
           aria-labelledby={hasTitle ? this.id : null}
           aria-hidden={hasTitle ? null : true}
           role="img"

package/src/index.ts

@@ -1,2 +1 @@
-export { IconSize } from './createIcon';
 export * from './icons/index';

package/scripts/generateIcons.js

@@ -1,18 +0,0 @@
-const faIcons = require('./icons/fontawesomeIcons');
-const patternflyIcons = require('./icons/patternflyIcons');
-const customIcons = require('./icons/customIcons');
-
-/**
- * Generates icons from FontAwesome, PatternFly CSS, and custom icons in this repo.
- */
-function generateIcons() {
-  return {
-    ...faIcons,
-    ...patternflyIcons,
-    ...customIcons
-  };
-}
-
-module.exports = {
-  generateIcons
-};