@vtex/styleguide/lib/icon/IconBase.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Svg = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var Use = function Use(_ref) {
  var id = _ref.id;
  return _react2.default.createElement("use", {
    href: "#" + id,
    xlinkHref: "#" + id
  });
};

Use.propTypes = {
  id: _propTypes2.default.string.isRequired
};

var Svg = exports.Svg = function Svg(props) {
  var size = props.size,
      block = props.block,
      children = props.children,
      name = props.name,
      variation = props.variation,
      svgProps = _objectWithoutPropertiesLoose(props, ["size", "block", "children", "name", "variation"]);

  var id = variation ? "icon-" + name + "-" + variation : "icon-" + name;
  var element = typeof document !== 'undefined' && document && document.getElementById(id) ? _react2.default.createElement(Use, {
    id: id
  }) : children;
  return _react2.default.createElement("svg", _extends({
    className: (0, _utils.baseClassname)(name, variation) + " " + (block ? 'db' : ''),
    width: size.width,
    height: size.height
  }, svgProps), element);
};

Svg.propTypes = {
  name: _propTypes2.default.string.isRequired,
  variation: _propTypes2.default.string,
  size: _propTypes2.default.shape({
    width: _propTypes2.default.number,
    height: _propTypes2.default.number
  }),
  block: _propTypes2.default.bool,
  viewBox: _propTypes2.default.string,
  fill: _propTypes2.default.string,
  xmlns: _propTypes2.default.string,
  xmlnsXlink: _propTypes2.default.string,
  children: _propTypes2.default.node
};
Svg.defaultProps = {
  xmlns: 'http://www.w3.org/2000/svg',
  xmlnsXlink: 'http://www.w3.org/1999/xlink',
  size: {
    width: 16,
    height: 16
  },
  block: false,
  viewBox: '0 0 16 16',
  fill: 'none',
  variation: null
};