@evg-b/evg-ui/dist/SvgIcon/SvgIcon.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';

var svgSizeNumberAndTemplate = function svgSizeNumberAndTemplate(size) {
  if (typeof size === 'number') {
    return "".concat(size, "px");
  } else {
    return MapSize[size] ? MapSize[size] : MapSize['medium'];
  }
};

var MapSize = {
  'small': '18px',
  'medium': '24px',
  'large': '36px',
  'extra': '48px'
};
var styles = {
  base: {
    display: 'inline-flex',
    boxSizing: 'content-box',
    justifyContent: 'center',
    userSelect: 'none',
    width: '1em',
    height: '1em',
    fill: 'currentColor',
    color: function color(props) {
      return props.color === 'default' ? 'currentColor' : props.Color.Base();
    },
    fontSize: function fontSize(props) {
      return svgSizeNumberAndTemplate(props.size);
    }
  }
};
/**
 * Компонент обертка над path svg который реализует функционал color и size.
*/

var SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children;
      props.color;
      props.size;
      var viewBox = props.viewBox,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "color", "size", "viewBox"]);

  return /*#__PURE__*/React.createElement("svg", _extends({
    ref: ref,
    className: classNames(classes.base, className),
    viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox)
  }, otherProps), children);
});
SvgIcon.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Размер компонента. Так же принимает положительное число.
  */
  size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'medium', 'large', 'extra']), PropTypes.number]),

  /**
   * Название цвета в разных форматах.
  */
  color: PropTypes.string,

  /**
   * Размер viewBox. Применяется к width и height.
  */
  viewBox: PropTypes.number
};
SvgIcon.defaultProps = {
  color: 'default',
  size: 'medium',
  viewBox: 24
};
SvgIcon.displayName = 'SvgIconEVG';
var SvgIcon$1 = withStyles(styles)(SvgIcon);

export default SvgIcon$1;