@storybook/design-system/dist/components/Icon.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Icon = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _icons = require("./shared/icons");

var _excluded = ["icon"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Svg = (0, _theming.styled)("svg", process.env.NODE_ENV === "production" ? {
  target: "e82dnwa0"
} : {
  target: "e82dnwa0",
  label: "Svg"
})(process.env.NODE_ENV === "production" ? {
  name: "zmb90n",
  styles: "display:inline-block;shape-rendering:inherit;transform:translate3d(0, 0, 0);vertical-align:middle;path{fill:currentColor;}"
} : {
  name: "zmb90n",
  styles: "display:inline-block;shape-rendering:inherit;transform:translate3d(0, 0, 0);vertical-align:middle;path{fill:currentColor;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
/**
 * An Icon is a piece of visual element, but we must ensure its accessibility while using it.
 * It can have 2 purposes:
 *
 * - *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon icon="check" aria-hidden />`)
 * - *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon icon="print" aria-label="Print this document" />`)
 */

var Icon = function Icon(_ref) {
  var icon = _ref.icon,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Svg, (0, _extends2["default"])({
    viewBox: "0 0 14 14",
    width: "14px",
    height: "14px"
  }, props), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _icons.icons[icon]));
};

exports.Icon = Icon;