@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
56 lines (54 loc) • 2.25 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { memo } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import { Icon as LegacyIcon } from './icon';
const sizeSpacingMap = {
utility: {
small: 'compact',
medium: 'spacious'
},
core: {
small: 'none',
medium: 'spacious'
}
};
/**
* `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 for core icons and small for utility icons
const size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
const useNewIcon = !props.isFacadeDisabled &&
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
fg('platform-visual-refresh-icons-legacy-facade');
if (useNewIcon && NewIcon && (size === 'small' || size === 'medium')) {
if (props.iconType === 'utility') {
const Icon = NewIcon;
return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
spacing: fg('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][size] : 'none',
color: props.primaryColor || 'currentColor',
type: props.iconType
}));
} else {
const Icon = NewIcon;
return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
spacing: sizeSpacingMap['core'][size],
color: props.primaryColor || 'currentColor',
type: props.iconType
}));
}
}
return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
dangerouslySetGlyph: dangerouslySetGlyph
}, props));
});