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

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

/* icon-new.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Icon = void 0;
require("./icon-new.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * We are hiding this props from consumers as it's reserved
 * for use by Icon Tile.
 */

var svgStyles = null;
var iconStyles = null;
var utilityIconStyles = null;
var scaleStyles = null;

/**
 * For windows high contrast mode
 */
var baseHcmStyles = null;
var scaleSize = null;
var coreSizeMedium = {
  none: "_1bsbpxbi _4t3ipxbi",
  compact: "_1bsb1ejb _4t3i1ejb",
  spacious: "_1bsb1ejb _4t3i1ejb"
};
var coreSizeSmall = {
  none: "_1bsbutpp _4t3iutpp",
  compact: "_1bsbpxbi _4t3ipxbi",
  spacious: "_1bsb1ejb _4t3i1ejb"
};
var utilSizes = {
  none: "_1bsbutpp _4t3iutpp",
  compact: "_1bsbpxbi _4t3ipxbi",
  spacious: "_1bsb1ejb _4t3i1ejb"
};
var baseSizeMap = {
  core: 16,
  utility: 12
};
var paddingMap = {
  core: {
    medium: {
      none: 0,
      compact: 4,
      spacious: 4
    },
    small: {
      none: 0,
      compact: 2.66,
      spacious: 8
    }
  },
  utility: {
    medium: {
      none: 0,
      compact: 2,
      spacious: 6
    },
    small: {
      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)
 */
var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
  var _props$type;
  var _ref = props,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
    testId = _ref.testId,
    label = _ref.label,
    LEGACY_primaryColor = _ref.LEGACY_primaryColor,
    LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
    LEGACY_size = _ref.LEGACY_size,
    FallbackIcon = _ref.LEGACY_fallbackIcon,
    dangerouslySetGlyph = _ref.dangerouslySetGlyph,
    shouldScale = _ref.shouldScale,
    LEGACY_margin = _ref.LEGACY_margin,
    _ref$spacing = _ref.spacing,
    spacing = _ref$spacing === void 0 ? 'none' : _ref$spacing;
  var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
    __html: dangerouslySetGlyph
  } : undefined;

  // Fall back to old icon
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
  if (FallbackIcon && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
    // parse out unnecessary props
    return /*#__PURE__*/React.createElement(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
    });
  }
  var type = (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core';
  var size = 'size' in props && props.size !== undefined && (
  // This prevents invalid sizes being passed in, which is required
  // for handling unsupported legacy icon sizes which can
  // cause errors.
  props.size === 'small' || props.size === 'medium') ? props.size : 'medium';
  var baseSize = baseSizeMap[type];
  var viewBoxPadding = paddingMap[type][size][spacing];
  var viewBoxSize = baseSize + 2 * viewBoxPadding;
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": testId,
    role: label ? 'img' : undefined,
    "aria-label": label ? label : undefined,
    "aria-hidden": label ? undefined : true,
    style: {
      color: color
    },
    className: (0, _runtime.ax)(["_1e0c1o8l _vchhusvi _1o9zidpf _vwz4kb7n _y4ti1igz _bozg1mb9", "_12va1onz _jcxd1r8n", shouldScale && "_1bsb1kw7 _4t3i1kw7", (type === 'utility' || size === 'small') && "_vwz4utpp"])
  }, /*#__PURE__*/React.createElement("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: "".concat(0 - viewBoxPadding, " ").concat(0 - viewBoxPadding, " ").concat(viewBoxSize, " ").concat(viewBoxSize),
    role: "presentation",
    dangerouslySetInnerHTML: dangerouslySetInnerHTML,
    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : type === 'utility' ? utilSizes[spacing] : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
  }));
});
var _default = exports.default = Icon;