@gssfed/vital-ui-kit-react/dist/Icon/Icon.js

Vital UI Kit for React!

var _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; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/**
 * 
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import React from 'react';

import withIcon from './components/withIcon';
import defaultIcon from './selection.json';

function getIcon(iconName, iconPaths) {
  var icon = iconPaths.icons.find(function (i) {
    return i.icon.tags.indexOf(iconName) > -1;
  });
  if (icon) {
    return {
      path: icon.icon.paths.join(' '),
      width: icon.icon.width
    };
  }
  // eslint-disable-next-line
  console.warn('Could not find the name of the Icon: ' + iconName + '. Please check your icons file tags.');
  return null;
}

/**
 * @render react
 * @name Icon
 * @description Icon based on icomoon selection.json, render svg path base on the name of tags.
 * @example
 * <Icon
 *  size={12}
 *  color="#FED"
 *  name="wifi"
 * />
 */

var Icon = function Icon(_ref) {
  var name = _ref.name,
      size = _ref.size,
      onClick = _ref.onClick,
      color = _ref.color,
      _ref$icon = _ref.icon,
      icon = _ref$icon === undefined ? defaultIcon : _ref$icon,
      props = _objectWithoutProperties(_ref, ['name', 'size', 'onClick', 'color', 'icon']);

  var iconInfo = getIcon(name, icon);
  if (!iconInfo) {
    return null;
  }
  return React.createElement(
    'svg',
    _extends({
      width: size,
      height: size,
      viewBox: '0 0 ' + (iconInfo.width || 1024) + ' 1024',
      onClick: onClick
    }, props),
    iconInfo.path && React.createElement('path', { d: iconInfo.path, fill: color })
  );
};

Icon.defaultProps = {
  size: 16,
  icon: defaultIcon,
  color: 'currentColor',
  onClick: function onClick() {}
};

export default withIcon(Icon);