pouncejs/dist/cjs/components/Icon/Icon.js

A collection of UI components from Panther labs

"use strict";

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

exports.__esModule = true;
exports.default = exports.Icon = void 0;

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

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

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

var _Box = _interopRequireDefault(require("../Box"));

var _useTheme2 = _interopRequireDefault(require("../../utils/useTheme"));

/** An simple SVG element exported as a React component. It renders a simple <svg> */
var Icon = /*#__PURE__*/_react.default.forwardRef(function Icon(_ref, ref) {
  var _icons$type;

  var type = _ref.type,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'large' : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'current' : _ref$color,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["type", "size", "color"]);

  var _useTheme = (0, _useTheme2.default)(),
      icons = _useTheme.icons;

  var viewBox = ((_icons$type = icons[type]) == null ? void 0 : _icons$type.viewBox) || '0 0 24 24';
  var sizeInPx;

  switch (size) {
    case 'x-small':
      sizeInPx = 12;
      break;

    case 'small':
      sizeInPx = 16;
      break;

    case 'medium':
      sizeInPx = 20;
      break;

    case 'large':
    default:
      sizeInPx = 24;
  }

  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    as: "svg",
    display: "inline-block",
    verticalAlign: "sub",
    flexShrink: 0,
    width: sizeInPx,
    height: sizeInPx,
    color: color,
    viewBox: viewBox,
    role: "presentation"
  }, rest, {
    ref: ref
  }), icons[type].path);
});

exports.Icon = Icon;
var _default = Icon;
exports.default = _default;