- s
- .toUpperCase()
- .replace('-', '')
- .replace('_', '');
-const toCamel = s => `${s[0].toUpperCase()}${s.substr(1).replace(/([-_][a-z])/gi, removeSnake)}`;
-
-/**
- * @param {string} val possibly undefined value to transform into a string
- */
-function stringify(val) {
- return val ? val : '';
-}
-
-/**
- * Generates src/icons/*.tsx files
- */
-function generateSrc() {
- if (!fs.existsSync(destDir)) {
- fs.mkdirSync(destDir);
- }
-
- const index = [];
- Object.entries(icons).forEach(([iconName, icon]) => {
- const fname = `${iconName}-icon.tsx`;
- const jsName = `${toCamel(iconName)}Icon`;
- fs.writeFileSync(
- path.join(destDir, fname),
- `import * as React from 'react';
-import { SVGIcon, SVGIconProps } from '../SVGIcon';
-
-export const ${jsName}Config = {
- name: '${jsName}',
- height: ${icon.height},
- width: ${icon.width},
- svgPath: '${icon.svgPathData}',
- yOffset: ${icon.yOffset || 0},
- xOffset: ${icon.xOffset || 0},
- transform: '${stringify(icon.transform)}'
-};
-
-export const ${jsName}: React.FunctionComponent
> = (
- props
-) => {
- const newProps = Object.assign({ config: ${jsName}Config }, props) as SVGIconProps;
- return React.createElement(SVGIcon, newProps);
-};
-
-export default ${jsName};\n`
- );
-
- index.push(path.basename(fname, '.tsx'));
- });
-
- fs.writeFileSync(
- path.join(destDir, 'index.ts'),
- `${index
- .sort()
- .map(fname => `export * from './${fname}';`)
- .join('\n')}\n`
- );
-
- // eslint-disable-next-line no-console
- console.log('Generated', index.length, 'icons.');
-}
-
-generateSrc();
diff --git a/packages/react-icons/scripts/helpers.js b/packages/react-icons/scripts/helpers.js
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/react-icons/scripts/icons/index.js b/packages/react-icons/scripts/icons/index.js
deleted file mode 100644
index 94f07092054..00000000000
--- a/packages/react-icons/scripts/icons/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const faIcons = require('./fontawesomeIcons');
-const patternflyIcons = require('./patternflyIcons');
-const customIcons = require('./customIcons');
-
-module.exports = {
- ...faIcons,
- ...patternflyIcons,
- ...customIcons
-};
diff --git a/packages/react-icons/scripts/writeIcons.js b/packages/react-icons/scripts/writeIcons.js
new file mode 100644
index 00000000000..b416a1b501b
--- /dev/null
+++ b/packages/react-icons/scripts/writeIcons.js
@@ -0,0 +1,117 @@
+const { join } = require('path');
+const { outputFileSync } = require('fs-extra');
+const { generateIcons } = require('./generateIcons');
+
+const outDir = join(__dirname, '../dist');
+
+const removeSnake = s =>
+ s
+ .toUpperCase()
+ .replace('-', '')
+ .replace('_', '');
+const toCamel = s => `${s[0].toUpperCase()}${s.substr(1).replace(/([-_][a-z])/gi, removeSnake)}`;
+
+const writeCJSExport = (fname, jsName, icon) => {
+ outputFileSync(
+ join(outDir, 'js/icons', `${fname}.js`),
+ `"use strict"
+exports.__esModule = true;
+exports.${jsName}Config = {
+ name: '${jsName}',
+ height: ${icon.height},
+ width: ${icon.width},
+ svgPath: '${icon.svgPathData}',
+ yOffset: ${icon.yOffset || 0},
+ xOffset: ${icon.xOffset || 0},
+ transform: '${icon.transform || ''}'
+};
+exports.${jsName} = require('../createIcon').createIcon(exports.${jsName}Config);
+exports["default"] = exports.${jsName};
+ `.trim()
+ );
+};
+
+const writeESMExport = (fname, jsName, icon) => {
+ outputFileSync(
+ join(outDir, 'esm/icons', `${fname}.js`),
+ `import { createIcon } from '../createIcon';
+
+export const ${jsName}Config = {
+ name: '${jsName}',
+ height: ${icon.height},
+ width: ${icon.width},
+ svgPath: '${icon.svgPathData}',
+ yOffset: ${icon.yOffset || 0},
+ xOffset: ${icon.xOffset || 0},
+ transform: '${icon.transform || ''}'
+};
+
+export const ${jsName} = createIcon(${jsName}Config);
+
+export default ${jsName};
+ `.trim()
+ );
+};
+
+const writeDTSExport = (fname, jsName, icon) => {
+ outputFileSync(
+ join(outDir, 'js/icons', `${fname}.ts`),
+ `import React from 'react';
+import { SVGIconProps } from '../createIcon';
+export declare const ${jsName}Config: {
+ name: '${jsName}',
+ height: ${icon.height},
+ width: ${icon.width},
+ svgPath: '${icon.svgPathData}',
+ yOffset: ${icon.yOffset || 0},
+ xOffset: ${icon.xOffset || 0},
+ transform: '${icon.transform || ''}'
+};
+export declare const ${jsName}: React.ComponentClass;
+export default ${jsName};
+ `.trim()
+ );
+};
+
+/**
+ * Writes CJS and ESM icons to `dist` directory
+ *
+ * @param {any} icons icons from generateIcons
+ */
+function writeIcons(icons) {
+ const index = [];
+ Object.entries(icons).forEach(([iconName, icon]) => {
+ const fname = `${iconName}-icon`;
+ const jsName = `${toCamel(iconName)}Icon`;
+ writeESMExport(fname, jsName, icon);
+ writeCJSExport(fname, jsName, icon);
+ writeDTSExport(fname, jsName, icon);
+
+ index.push(fname);
+ });
+
+ const esmIndexString = index
+ .sort()
+ .map(file => `export * from './${file}';`)
+ .join('\n');
+ outputFileSync(join(outDir, 'esm', 'icons/index.js'), esmIndexString);
+ outputFileSync(join(outDir, 'js', 'icons/index.ts'), esmIndexString);
+ outputFileSync(
+ join(outDir, 'js', 'icons/index.js'),
+ `"use strict";
+function __export(m) {
+ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+exports.__esModule = true;
+${index
+ .sort()
+ .map(file => `__export(require('./${file}'));`)
+ .join('\n')}
+`.trim()
+ );
+
+ // eslint-disable-next-line no-console
+ console.log('Wrote', index.length * 3 + 3, 'icon files.');
+}
+
+writeIcons(generateIcons());
diff --git a/packages/react-icons/src/SVGIcon.tsx b/packages/react-icons/src/SVGIcon.tsx
deleted file mode 100644
index aac4975b894..00000000000
--- a/packages/react-icons/src/SVGIcon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-
-let currentId = 0;
-
-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;
- height: number;
- svgPath: string;
- xOffset?: number;
- yOffset?: number;
- transform?: string;
-}
-
-export interface SVGIconProps extends Omit, 'size' | 'ref'> {
- config: IconDefinition;
- color?: string;
- size?: IconSize | keyof typeof IconSize;
- title?: string;
- noVerticalAlign?: boolean;
-}
-
-export class SVGIcon extends React.Component {
- static defaultProps = {
- color: 'currentColor',
- size: IconSize.sm,
- noVerticalAlign: false
- };
-
- id = `icon-title-${currentId++}`;
-
- render() {
- const { size, color, title, noVerticalAlign, config, ...props } = this.props;
-
- const hasTitle = Boolean(title);
- const heightWidth = getSize(size);
- const baseAlign = -0.125 * Number.parseFloat(heightWidth);
- const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
- const viewBox = [config.xOffset || 0, config.yOffset || 0, config.width, config.height].join(' ');
-
- return (
-
- {hasTitle && {title} }
-
- );
- }
-}
diff --git a/packages/react-icons/src/__snapshots__/SVGIcon.test.js.snap b/packages/react-icons/src/__snapshots__/createIcon.test.js.snap
similarity index 100%
rename from packages/react-icons/src/__snapshots__/SVGIcon.test.js.snap
rename to packages/react-icons/src/__snapshots__/createIcon.test.js.snap
diff --git a/packages/react-icons/src/SVGIcon.test.js b/packages/react-icons/src/createIcon.test.js
similarity index 67%
rename from packages/react-icons/src/SVGIcon.test.js
rename to packages/react-icons/src/createIcon.test.js
index 0efec3dae2b..da491820869 100644
--- a/packages/react-icons/src/SVGIcon.test.js
+++ b/packages/react-icons/src/createIcon.test.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { SVGIcon, IconSize } from './SVGIcon';
+import { createIcon, IconSize } from './createIcon';
import { shallow } from 'enzyme';
const iconDef = {
@@ -9,57 +9,59 @@ const iconDef = {
svgPath: 'svgPath'
};
+const SVGIcon = createIcon(iconDef);
+
test('sets correct viewBox', () => {
- const view = shallow(, 'size' | 'ref'> {
+ color?: string;
+ size?: IconSize | keyof typeof IconSize;
+ title?: string;
+ noVerticalAlign?: boolean;
+}
+
+let currentId = 0;
+
+// Factory to create Icon class components for consumers
+/**
+ *
+ */
+export function createIcon({
+ name,
+ xOffset = 0,
+ yOffset = 0,
+ width,
+ height,
+ svgPath,
+ transform = ''
+}: IconDefinition): React.ComponentClass {
+ return class SVGIcon extends React.Component {
+ 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 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 (
+
+ {hasTitle && {title} }
+
+ );
+ }
+ };
+}
diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts
index f48f470492a..5d537f2d429 100644
--- a/packages/react-icons/src/index.ts
+++ b/packages/react-icons/src/index.ts
@@ -1,2 +1,2 @@
-export { IconSize } from './SVGIcon';
-export * from './icons';
+export { IconSize } from './createIcon';
+export * from './icons/index';
diff --git a/packages/react-icons/tsconfig.gen-dts.json b/packages/react-icons/tsconfig.gen-dts.json
index e2a3d669154..12109397683 100644
--- a/packages/react-icons/tsconfig.gen-dts.json
+++ b/packages/react-icons/tsconfig.gen-dts.json
@@ -3,7 +3,12 @@
"compilerOptions": {
"declaration": true,
"emitDeclarationOnly": true,
- "outDir": "dist/js"
+ "outDir": "dist/js",
+ "rootDirs": [
+ "src",
+ "src/icons",
+ "dist/js/icons"
+ ]
},
"include": [
"./src/*",
diff --git a/packages/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap b/packages/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
index ffa073a376e..ba2c363eb9e 100644
--- a/packages/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
+++ b/packages/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
@@ -4,6 +4,10 @@ exports[`it renders properly 1`] = `
-
`;
diff --git a/packages/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap b/packages/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
index 28c21f907a5..c9b2014b893 100644
--- a/packages/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
+++ b/packages/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
@@ -4,6 +4,10 @@ exports[`it renders properly 1`] = `
-
`;
diff --git a/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap b/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
index e1fe531d27c..ba079c11340 100644
--- a/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
+++ b/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
@@ -60,43 +60,30 @@ exports[`ConfirmButtons renders correctly 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -124,43 +111,30 @@ exports[`ConfirmButtons renders correctly 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
diff --git a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
index 6f8202bcb10..534337582a6 100644
--- a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -1013,43 +1013,30 @@ exports[`Actions table 1`] = `
-
-
+
-
-
-
+
@@ -4684,43 +4671,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -5535,43 +5509,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -6386,43 +6347,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -7237,43 +7185,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -8088,43 +8023,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -8939,43 +8861,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -9790,43 +9699,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -10641,43 +10537,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -11492,43 +11375,30 @@ exports[`Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -12435,43 +12305,30 @@ exports[`Cell header table 1`] = `
-
-
+
-
-
-
+
@@ -20110,43 +19967,30 @@ exports[`Collapsible nested table 1`] = `
-
-
+
-
-
-
+
@@ -23463,43 +23307,30 @@ exports[`Collapsible nested table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -24029,43 +23860,30 @@ exports[`Collapsible nested table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -25052,43 +24870,30 @@ exports[`Collapsible nested table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -28723,43 +28528,30 @@ exports[`Collapsible table 1`] = `
-
-
+
-
-
-
+
@@ -32064,43 +31856,30 @@ exports[`Collapsible table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -33610,43 +33389,30 @@ exports[`Collapsible table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -42166,43 +41932,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -42227,43 +41980,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -42289,43 +42029,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -43173,43 +42900,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -43234,43 +42948,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -43296,43 +42997,30 @@ exports[`Editable table 1`] = `
tabIndex={null}
type="button"
>
-
-
+
-
-
-
+
@@ -51805,43 +51493,30 @@ exports[`Row click table 1`] = `
-
-
+
-
-
-
+
@@ -59425,43 +59100,30 @@ exports[`Selectable table 1`] = `
-
-
+
-
-
-
+
@@ -68208,43 +67870,30 @@ exports[`Simple Actions table 1`] = `
-
-
+
-
-
-
+
@@ -72481,43 +72130,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -73461,43 +73097,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -74441,43 +74064,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -75421,43 +75031,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -76401,43 +75998,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -77381,43 +76965,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -78361,43 +77932,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -79341,43 +78899,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -80321,43 +79866,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -81310,43 +80842,30 @@ exports[`Simple Actions table 1`] = `
onKeyDown={[Function]}
type="button"
>
-
-
+
-
-
-
+
@@ -104339,43 +103858,30 @@ exports[`Sortable table 1`] = `
-
-
+
-
-
-
+
@@ -111773,43 +111279,30 @@ exports[`Table variants Breakpoint - 1`] = `
-
-
+
-
-
-
+
@@ -119207,43 +118700,30 @@ exports[`Table variants Breakpoint - grid 1`] = `
-
-
+
-
-
-
+
@@ -126641,43 +126121,30 @@ exports[`Table variants Breakpoint - grid-2xl 1`] = `
-
-
+
-
-
-
+
@@ -134075,43 +133542,30 @@ exports[`Table variants Breakpoint - grid-lg 1`] = `
-
-
+
-
-
-
+
@@ -141509,43 +140963,30 @@ exports[`Table variants Breakpoint - grid-md 1`] = `
-
-
+
-
-
-
+
@@ -148943,43 +148384,30 @@ exports[`Table variants Breakpoint - grid-xl 1`] = `
-
-
+
-
-
-
+
@@ -156377,43 +155805,30 @@ exports[`Table variants Size - compact 1`] = `
-
-
+
-
-
-
+
diff --git a/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap b/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
index 89b8e0043de..95019327634 100644
--- a/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
+++ b/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
@@ -21,7 +21,11 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
"callback": null,
"disabled": false,
"hidden": false,
- "icon":
-
+
-
-
-
+
-
-
+
-
-
-
+
-
+
-
-
-
+
-
-
+
-
-
-
+
-
-
+
-
-
-
+
-
-
+
-
-
-
+
-
-
+
-
-
-
+
diff --git a/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap b/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap
index 645a1069a55..ffeb223ab99 100644
--- a/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap
+++ b/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap
@@ -1013,43 +1013,30 @@ exports[`Actions virtualized table 1`] = `
-
-
+
-
-
-
+
@@ -2183,43 +2170,30 @@ exports[`Selectable virtualized table 1`] = `
-
-
+
-
-
-
+
@@ -3683,43 +3657,30 @@ exports[`Simple Actions table 1`] = `
-
-
+
-
-
-
+
@@ -6548,43 +6509,30 @@ exports[`Sortable Virtualized Table 1`] = `
-
-
+
-
-
-
+