@atlaskit/icon 22.7.0 → 22.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/icon
 
+## 22.8.0
+
+### Minor Changes
+
+- [#124884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124884)
+  [`3108a1a229e07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3108a1a229e07) - -
+  Icons in `@atlaskit/icon/glyph` can now switch to updated designs behind a feature flag.
+  - SVGs in `/svgs`, used by icons in `@atlaskit/icon/glyph`, have been re-optimised with the latest
+    version of SVGO; some slight changes to SVG code or subpixel aliasing may occur
+
 ## 22.7.0
 
 ### Minor Changes

package/afm-post-office/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../../tsconfig.entry-points.post-office.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__icon/app",
+    "composite": true,
+    "rootDir": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-post-office/tsconfig.json"
+    }
+  ]
+}

package/build/index.tsx

@@ -1,6 +1,10 @@
 import path from 'path';
-import { UNSAFE_buildNew as buildIconsNew, UNSAFE_createIconDocsNew } from '@af/icon-build-process';
-import type { UNSAFE_NewIconBuildConfig } from '@af/icon-build-process';
+import buildIcons, {
+	UNSAFE_buildNew as buildIconsNew,
+	UNSAFE_createIconDocsNew,
+	createIconDocs,
+} from '@af/icon-build-process';
+import type { UNSAFE_NewIconBuildConfig, IconBuildConfig } from '@af/icon-build-process';
 import pkgDir from 'pkg-dir';
 import fs from 'fs-extra';
 import synonyms from '../utils/synonyms';
@@ -22,22 +26,21 @@ if (!root) {
  * To avoid unnecessary churn, this step is switched off, and any updates to the old icon set can be done piecemeal.
  */
 
-// const config: IconBuildConfig = {
-//   srcDir: path.resolve(root, 'svgs_raw'),
-//   processedDir: path.resolve(root, 'svgs'),
-//   destDir: path.resolve(root, 'glyph'),
-//   maxWidth: 24,
-//   maxHeight: 24,
-//   glob: '**/*.svg',
-//   baseIconEntryPoint: '@atlaskit/icon/base',
-// };
-// buildIcons(config).then((icons) => {
-//   const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, [
-//     'icon',
-//     'core',
-//   ]);
-//   return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
-// });
+const config: IconBuildConfig = {
+	srcDir: path.resolve(root, 'svgs_raw'),
+	processedDir: path.resolve(root, 'svgs'),
+	destDir: path.resolve(root, 'glyph'),
+	maxWidth: 24,
+	maxHeight: 24,
+	glob: '**/*.svg',
+	baseIconEntryPoint: '@atlaskit/icon/base',
+	newIconsDir: path.resolve(root, 'icons_raw'),
+	migrationMap,
+};
+buildIcons(config).then((icons) => {
+	const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, ['icon', 'core']);
+	return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
+});
 
 /**
  * The updated icon build process for the new icons under `@atlaskit/icon/core/*`

package/dist/cjs/components/icon-facade.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconFacade = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _icon = _interopRequireDefault(require("./icon"));
+var _excluded = ["dangerouslySetGlyph"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+var IconFacade = exports.IconFacade = /*#__PURE__*/(0, _react.memo)(function IconFacade(_ref) {
+  var _props$size;
+  var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  var spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var useNewIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/_react.default.createElement(NewIcon, (0, _extends2.default)({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+var _default = exports.default = IconFacade;

package/dist/cjs/entry-points/base.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Icon", {
     return _icon.Icon;
   }
 });
+Object.defineProperty(exports, "UNSAFE_IconFacade", {
+  enumerable: true,
+  get: function get() {
+    return _iconFacade.IconFacade;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -17,5 +23,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _icon = _interopRequireWildcard(require("../components/icon"));
+var _iconFacade = require("../components/icon-facade");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/migration-map.js

@@ -122,19 +122,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  'app-switcher': {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'top-nav',
-      medium: 'top-nav',
-      large: 'top-nav',
-      xlarge: 'top-nav'
-    }
-  },
+  // 'app-switcher': {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'top-nav',
+  // 		medium: 'top-nav',
+  // 		large: 'top-nav',
+  // 		xlarge: 'top-nav',
+  // 	},
+  // },
   archive: {
     newIcon: {
       name: 'archive-box',
@@ -1043,19 +1039,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  download: {
-    newIcon: {
-      name: 'cloud-arrow-down',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // download: {
+  // 	newIcon: { name: 'cloud-arrow-down', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'drag-handler': {
     newIcon: {
       name: 'drag-handle',
@@ -2878,32 +2870,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'menu-expand': {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  menu: {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'menu-expand': {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // menu: {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   mobile: {
     newIcon: {
       name: 'device-mobile',
@@ -2951,32 +2935,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'notification-direct': {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-slight-visual-change',
-      medium: 'swap-slight-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  notification: {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'notification-direct': {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-slight-visual-change',
+  // 		medium: 'swap-slight-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // notification: {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'office-building-filled': {
     newIcon: {
       name: 'office-building',
@@ -3604,19 +3580,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  switcher: {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'not-recommended',
-      xlarge: 'not-recommended'
-    }
-  },
+  // switcher: {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'not-recommended',
+  // 		xlarge: 'not-recommended',
+  // 	},
+  // },
   table: {
     newIcon: {
       name: 'grid',

package/dist/es2019/components/icon-facade.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import LegacyIcon from './icon';
+const sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+export const IconFacade = /*#__PURE__*/memo(function IconFacade({
+  dangerouslySetGlyph,
+  ...props
+}) {
+  var _props$size;
+  const NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  const size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  const spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+export default IconFacade;

package/dist/es2019/entry-points/base.js

@@ -1 +1,2 @@
-export { default, Icon } from '../components/icon';
+export { default, Icon } from '../components/icon';
+export { IconFacade as UNSAFE_IconFacade } from '../components/icon-facade';

package/dist/es2019/migration-map.js

@@ -116,19 +116,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  'app-switcher': {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'top-nav',
-      medium: 'top-nav',
-      large: 'top-nav',
-      xlarge: 'top-nav'
-    }
-  },
+  // 'app-switcher': {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'top-nav',
+  // 		medium: 'top-nav',
+  // 		large: 'top-nav',
+  // 		xlarge: 'top-nav',
+  // 	},
+  // },
   archive: {
     newIcon: {
       name: 'archive-box',
@@ -1037,19 +1033,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  download: {
-    newIcon: {
-      name: 'cloud-arrow-down',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // download: {
+  // 	newIcon: { name: 'cloud-arrow-down', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'drag-handler': {
     newIcon: {
       name: 'drag-handle',
@@ -2872,32 +2864,24 @@ const migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'menu-expand': {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  menu: {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'menu-expand': {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // menu: {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   mobile: {
     newIcon: {
       name: 'device-mobile',
@@ -2945,32 +2929,24 @@ const migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'notification-direct': {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-slight-visual-change',
-      medium: 'swap-slight-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  notification: {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'notification-direct': {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-slight-visual-change',
+  // 		medium: 'swap-slight-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // notification: {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'office-building-filled': {
     newIcon: {
       name: 'office-building',
@@ -3598,19 +3574,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  switcher: {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'not-recommended',
-      xlarge: 'not-recommended'
-    }
-  },
+  // switcher: {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'not-recommended',
+  // 		xlarge: 'not-recommended',
+  // 	},
+  // },
   table: {
     newIcon: {
       name: 'grid',

package/dist/esm/components/icon-facade.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["dangerouslySetGlyph"];
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import LegacyIcon from './icon';
+var sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+export var IconFacade = /*#__PURE__*/memo(function IconFacade(_ref) {
+  var _props$size;
+  var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  var spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+export default IconFacade;

package/dist/esm/entry-points/base.js

@@ -1 +1,2 @@
-export { default, Icon } from '../components/icon';
+export { default, Icon } from '../components/icon';
+export { IconFacade as UNSAFE_IconFacade } from '../components/icon-facade';