@atlaskit/icon/dist/es2019/components/icon.js

An icon is a symbol representing a command, device, directory, or common action.

/* icon.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./icon.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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.
 */

const iconStyles = null;
const 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
 */
const baseHcmStyles = null;
const primaryEqualsSecondaryHcmStyles = null;
const secondaryTransparentHcmStyles = null;

/**
 * __Icon__
 *
 * 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 const Icon = /*#__PURE__*/memo(function Icon(props) {
  const {
    glyph: Glyph,
    dangerouslySetGlyph,
    primaryColor = 'currentColor',
    secondaryColor,
    size,
    testId,
    label,
    width,
    height,
    UNSAFE_margin
  } = props;
  const glyphProps = dangerouslySetGlyph ? {
    dangerouslySetInnerHTML: {
      __html: dangerouslySetGlyph
    }
  } : {
    children: Glyph ? /*#__PURE__*/React.createElement(Glyph, {
      role: "presentation"
    }) : null
  };
  const customDimensions = width && height ? {
    width: width + 'px',
    height: height + 'px'
  } : null;
  return /*#__PURE__*/React.createElement("span", _extends({
    "data-testid": testId,
    "data-vc": `icon-${testId}`,
    role: label ? 'img' : undefined,
    "aria-label": label ? label : undefined,
    "aria-hidden": label ? undefined : true,
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      ...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;