@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
74 lines (72 loc) • 2.53 kB
JavaScript
import React from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
// Import both versions
import IconTileNew from './icon-tile-new';
import IconTileOld from './icon-tile-old';
// Color mapping for size 16 standalone icons that will no longer be tiles
const appearanceToIconColorMap = {
blue: "var(--ds-icon-accent-blue, #357DE8)",
blueBold: "var(--ds-icon-accent-blue, #357DE8)",
gray: "var(--ds-icon-accent-gray, #7D818A)",
grayBold: "var(--ds-icon-accent-gray, #7D818A)",
green: "var(--ds-icon-accent-green, #22A06B)",
greenBold: "var(--ds-icon-accent-green, #22A06B)",
lime: "var(--ds-icon-accent-lime, #6A9A23)",
limeBold: "var(--ds-icon-accent-lime, #6A9A23)",
magenta: "var(--ds-icon-accent-magenta, #CD519D)",
magentaBold: "var(--ds-icon-accent-magenta, #CD519D)",
orange: "var(--ds-icon-accent-orange, #E06C00)",
orangeBold: "var(--ds-icon-accent-orange, #E06C00)",
purple: "var(--ds-icon-accent-purple, #AF59E1)",
purpleBold: "var(--ds-icon-accent-purple, #AF59E1)",
red: "var(--ds-icon-accent-red, #C9372C)",
redBold: "var(--ds-icon-accent-red, #C9372C)",
teal: "var(--ds-icon-accent-teal, #2898BD)",
tealBold: "var(--ds-icon-accent-teal, #2898BD)",
yellow: "var(--ds-icon-accent-yellow, #B38600)",
yellowBold: "var(--ds-icon-accent-yellow, #B38600)"
};
/**
* __IconTile__
*
* An icon with background shape, color, and size properties determined by Tile.
*/
export default function IconTile({
appearance,
icon: Icon,
label,
size,
testId,
shape,
UNSAFE_circleReplacementComponent
}) {
if (UNSAFE_circleReplacementComponent && shape === 'circle' && (fg('platform_dst_icon_tile_circle_replacement') || fg('platform_dst_icon_tile_circle_replacement_stage2'))) {
return UNSAFE_circleReplacementComponent;
}
if (shape !== 'circle' && (fg('platform_dst_new_icon_tile') || fg('platform_dst_new_icon_tile_stage2'))) {
// Handle size 16 - render icon directly without Tile
if (size === '16') {
return /*#__PURE__*/React.createElement(Icon, {
color: appearanceToIconColorMap[appearance],
label: label,
testId: testId
});
}
return /*#__PURE__*/React.createElement(IconTileNew, {
appearance: appearance,
icon: Icon,
label: label,
shape: shape,
size: size,
testId: testId
});
}
return /*#__PURE__*/React.createElement(IconTileOld, {
appearance: appearance,
icon: Icon,
label: label,
shape: shape,
size: size,
testId: testId
});
}