@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
76 lines (74 loc) • 2.34 kB
JavaScript
/* icon-tile.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./icon-tile.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { fg } from '@atlaskit/platform-feature-flags';
const sizeMap = {
'16': "_1bsb7vkz _4t3i7vkz",
'24': "_1bsb1tcg _4t3i1tcg",
'32': "_1bsbzwfg _4t3izwfg",
'40': "_1bsb1ylp _4t3i1ylp",
'48': "_1bsbckbl _4t3ickbl"
};
const appearanceMap = {
grayBold: "_bfhk1t1b _syaz5w2r",
limeBold: "_bfhktde4 _syaz5w2r",
greenBold: "_bfhk1e5c _syaz5w2r",
blueBold: "_bfhkc8cv _syaz5w2r",
redBold: "_bfhkuibq _syaz5w2r",
purpleBold: "_bfhkygwo _syaz5w2r",
magentaBold: "_bfhkc3uk _syaz5w2r",
tealBold: "_bfhk2c8p _syaz5w2r",
orangeBold: "_bfhkjgng _syaz5w2r",
yellowBold: "_bfhk1vop _syaz5w2r",
gray: "_bfhk1v33 _syaz16ni",
lime: "_bfhkz2ec _syaz8645",
orange: "_bfhkf2vu _syaz7r97",
magenta: "_bfhkv9ra _syazv8hk",
green: "_bfhk1wnw _syaz17hp",
blue: "_bfhk4v9p _syaz1ov1",
red: "_bfhk1rtt _syaznbxb",
purple: "_bfhk1jkz _syaz5yjc",
teal: "_bfhk1a17 _syaz8uof",
yellow: "_bfhk3fv2 _syaz1oqg"
};
const shapeMap = {
square: "_2rkoiti9",
circle: "_2rko14q2"
};
const iconTileStyles = null;
/**
* __IconTile__ -- ⚠️ Experimental ⚠️
*
* An icon tile is used to present an icon with a background color.
* Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
*
* This component is currently in an experimental state and is subject to change in minor or patch releases.
*
*/
export default function IconTile(props) {
const {
icon: Icon,
label,
appearance,
size = '24',
shape = 'square',
LEGACY_fallbackComponent,
testId
} = props;
const ExpandedIcon = Icon;
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
return LEGACY_fallbackComponent;
} else {
return /*#__PURE__*/React.createElement("span", {
"data-testid": testId,
className: ax(["_1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1wybidpf", appearanceMap[appearance], sizeMap[size], shapeMap[shape]])
}, /*#__PURE__*/React.createElement(ExpandedIcon, {
color: "currentColor",
label: label,
spacing: "spacious",
shouldScale: true
}));
}
}