import React, { memo } from 'react'; import PropTypes from 'prop-types'; // @ts-ignore import evilIcons from 'evil-icons/assets/sprite.svg'; /** * @typedef {Object} IconProps * @property {string} size * @property {string=} className * @property {string} name * @property {boolean=} noFill */ /** * Icon inner component * @param {IconProps} props - icon props */ function IconElement(props) { var size = props.size ? ' icon--' + props.size : ''; var className = props.className ? ' ' + props.className : ''; var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className; var name = '#' + props.name + '-icon'; var useTag = ``; var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); return React.createElement( 'div', { className: klass }, wrapSpinner(Icon, klass) ); } /** * @param {React.ReactElement} Html * @param {string} klass */ function wrapSpinner(Html, klass) { if (klass.indexOf('spinner') > -1) { return React.createElement( 'div', { className: 'icon__spinner' }, Html ); } else { return Html; } } export default memo(IconElement); IconElement.propTypes = { size: PropTypes.string.isRequired, name: PropTypes.string.isRequired, className: PropTypes.string, noFill: PropTypes.bool };