@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
84 lines (80 loc) • 4.03 kB
JavaScript
/* icon.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./icon.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { memo } from 'react';
/**
* We are hiding these props from consumers as they're used to
* hack around icon sizing specifically for icon-file-type.
*/
var iconStyles = null;
var sizeStyles = {
small: "_1bsb7vkz _4t3i7vkz _5fdi7vkz _zbji7vkz",
medium: "_1bsb1tcg _4t3i1tcg _5fdi1tcg _zbji1tcg",
large: "_1bsbzwfg _4t3izwfg _5fdizwfg _zbjizwfg",
xlarge: "_1bsbckbl _4t3ickbl _5fdickbl _zbjickbl"
};
/**
* For windows high contrast mode
*/
var baseHcmStyles = null;
var primaryEqualsSecondaryHcmStyles = null;
var secondaryTransparentHcmStyles = null;
/**
* __Icon__
*
* @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
*
* An icon is used as a visual representation of common actions and commands to provide context.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
* - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
*/
export var Icon = /*#__PURE__*/memo(function Icon(props) {
var _ref = props,
Glyph = _ref.glyph,
dangerouslySetGlyph = _ref.dangerouslySetGlyph,
_ref$primaryColor = _ref.primaryColor,
primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
secondaryColor = _ref.secondaryColor,
size = _ref.size,
testId = _ref.testId,
label = _ref.label,
width = _ref.width,
height = _ref.height,
UNSAFE_margin = _ref.UNSAFE_margin;
var glyphProps = dangerouslySetGlyph ? {
dangerouslySetInnerHTML: {
__html: dangerouslySetGlyph
}
} : {
children: Glyph ? /*#__PURE__*/React.createElement(Glyph, {
role: "presentation"
}) : null
};
var customDimensions = width && height ? {
width: width + 'px',
height: height + 'px'
} : null;
return /*#__PURE__*/React.createElement("span", _extends({
"data-testid": testId,
"data-vc": "icon-".concat(testId),
role: label ? 'img' : undefined,
"aria-label": label ? label : undefined,
"aria-hidden": label ? undefined : true,
style: _objectSpread(_objectSpread({}, customDimensions), {}, {
'--icon-primary-color': primaryColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--icon-secondary-color': secondaryColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
margin: UNSAFE_margin
})
}, glyphProps, {
className: ax(["_1e0c1o8l _1o9zidpf _vyfuvuon _vwz4kb7n _1szv15vq _1tly15vq _rzyw1osq _17jb1osq _1ksvoz0e _3se1x1jp _re2rglyw _1veoyfq0 _1kg81r31", "_jcxd1r8n _gq0g1onz _1trkwc43", primaryColor === secondaryColor && "_18hbwc43", secondaryColor === 'transparent' && "_4fyi1j28", size && sizeStyles[size]])
}));
});
export default Icon;