saagie-ui/src/react/core/atoms/icon/Icon.js

Saagie UI from Saagie Design System

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import SVGInline from 'react-svg-inline';
import classnames from 'classnames';
import icons from '../../../../assets/icons/icons.map.json';

const propTypes = {
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  className: PropTypes.string,
  name: PropTypes.string.isRequired,
  position: PropTypes.oneOf(['', 'start', 'between', 'end']),
  size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']),
  isSvgColor: PropTypes.bool,
  description: PropTypes.string,
};

const defaultProps = {
  defaultClassName: 'sui-a-icon',
  className: '',
  position: '',
  size: '',
  isSvgColor: false,
  description: '',
};

export const Icon = forwardRef((props, ref) => {
  const {
    defaultClassName,
    className,
    name,
    position,
    size,
    isSvgColor,
    description,
    ...attributes
  } = props;

  const classes = classnames(
    defaultClassName,
    name ? `as--${name}` : '',
    position ? `as--${position}` : '',
    size ? `as--${size}` : '',
    isSvgColor ? 'as--svg-color' : '',
    className
  );

  if (!name) {
    return '';
  }

  // Font Awesome
  if (name.startsWith('fa-')) {
    return (
      <i {...attributes} className={classes} aria-hidden ref={ref}>
        <span hidden>{description}</span>
      </i>
    );
  }

  if (!icons[name]) {
    return '';
  }

  return (
    <i {...attributes} className={classes} aria-hidden ref={ref}>
      <SVGInline
        svg={icons[name]}
        stringrole="img"
        accessibilityLabel={name}
        accessibilityDesc={description}
      />
      <span hidden>{description}</span>
    </i>
  );
});

Icon.propTypes = propTypes;
Icon.defaultProps = defaultProps;