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

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

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { memo } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { fg } from '@atlaskit/platform-feature-flags';

/**
 * We are hiding this props from consumers as it's reserved
 * for use by Icon Tile.
 */

const commonSVGStyles = css({
  overflow: 'hidden',
  pointerEvents: 'none',
  /**
   * Stop-color doesn't properly apply in chrome when the inherited/current color changes.
   * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
   * rule) and then override it with currentColor for the color changes to be picked up.
   */
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  stop: {
    stopColor: 'currentColor'
  }
});
const svgStyles = css({
  color: 'currentColor',
  verticalAlign: 'bottom'
});
const iconStyles = css({
  display: 'inline-block',
  boxSizing: 'border-box',
  flexShrink: 0,
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1,
  paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
  paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
});
const utilityIconStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: "var(--ds-space-150, 12px)"
});
const scaleStyles = css({
  width: 'inherit',
  height: 'inherit'
});

/**
 * For windows high contrast mode
 */
const baseHcmStyles = css({
  '@media screen and (forced-colors: active)': {
    color: 'CanvasText',
    filter: 'grayscale(1)'
  }
});
const scaleSize = css({
  width: 'inherit',
  height: 'inherit'
});
const sizeMap = {
  core: {
    none: css({
      width: "var(--ds-space-200, 16px)",
      height: "var(--ds-space-200, 16px)"
    }),
    spacious: css({
      width: "var(--ds-space-300, 24px)",
      height: "var(--ds-space-300, 24px)"
    })
  },
  utility: {
    none: css({
      width: "var(--ds-space-150, 12px)",
      height: "var(--ds-space-150, 12px)"
    }),
    compact: css({
      width: "var(--ds-space-200, 16px)",
      height: "var(--ds-space-200, 16px)"
    }),
    spacious: css({
      width: "var(--ds-space-300, 24px)",
      height: "var(--ds-space-300, 24px)"
    })
  }
};
const baseSizeMap = {
  core: 16,
  utility: 12
};
const paddingMap = {
  core: {
    none: 0,
    spacious: 4
  },
  utility: {
    none: 0,
    compact: 2,
    spacious: 6
  }
};

/**
 * __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) {
  var _props$type, _props$spacing3, _props$spacing4;
  const {
    color = 'currentColor',
    testId,
    label,
    LEGACY_primaryColor,
    LEGACY_secondaryColor,
    LEGACY_size,
    LEGACY_fallbackIcon: FallbackIcon,
    // Used to set icon dimensions/behaviour in codegen
    // Used to set icon glyphs in codegen
    dangerouslySetGlyph,
    // Used with iconTile to scale icon up and down
    shouldScale,
    LEGACY_margin
  } = props;
  const dangerouslySetInnerHTML = dangerouslySetGlyph ? {
    __html: dangerouslySetGlyph
  } : undefined;

  // Fall back to old icon
  if (FallbackIcon && !fg('platform-visual-refresh-icons')) {
    // parse out unnecessary props
    return jsx(FallbackIcon, {
      primaryColor: LEGACY_primaryColor !== null && LEGACY_primaryColor !== void 0 ? LEGACY_primaryColor : color,
      secondaryColor: LEGACY_secondaryColor,
      size: LEGACY_size,
      label: label,
      testId: testId
      // @ts-ignore-next-line
      ,
      UNSAFE_margin: LEGACY_margin
    });
  }
  const baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
  let viewBoxPadding;
  if (props.type === 'utility') {
    var _props$spacing;
    viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
  } else {
    var _props$spacing2;
    viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
  }
  const viewBoxSize = baseSize + 2 * viewBoxPadding;
  return jsx("span", {
    "data-testid": testId,
    role: label ? 'img' : undefined,
    "aria-label": label ? label : undefined,
    "aria-hidden": label ? undefined : true,
    style: {
      color
    },
    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
  }, jsx("svg", {
    fill: "none"
    // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
    // we want for Icon Tile
    ,
    viewBox: `${0 - viewBoxPadding} ${0 - viewBoxPadding} ${viewBoxSize} ${viewBoxSize}`,
    role: "presentation",
    css: [commonSVGStyles, svgStyles, shouldScale ? scaleSize : props.type === 'utility' ? sizeMap[props.type][(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : sizeMap['core'][(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']],
    dangerouslySetInnerHTML: dangerouslySetInnerHTML
  }));
});
export default Icon;