SVGIcon Component

SVGIcon.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { PATHS } from './constants';

const getPath = (props) => {
  let { path, index, ...remainingProps } = props;

  return (
    <path
      {...remainingProps}
      d={path}
      key={index}
    />
  );
};

class SVGIcon extends Component {
  render() {
    let svgContent,
      {
        className,
        fill = '#000',
        height,
        name,
        style = {},
        width = '100%'
      } = this.props;

    svgContent = PATHS[name];

    if (!svgContent) return null;

    let pathStr = svgContent.path || svgContent,
      viewBoxStr = svgContent.viewBox || '0 0 24 24',
      pathList = Array.isArray(pathStr) ? pathStr : [pathStr];

    return (
      <svg
        width={width}
        height={height ? height : width}
        style={style}
        className={`icon ${className ? className : ''}`}
        xmlns='http://www.w3.org/2000/svg'
        viewBox={viewBoxStr} >
        {pathList && pathList.map((path, index) => {
          return getPath({ path, index, fill });
        })}
      </svg>
    );
  }
}

SVGIcon.propTypes = {
  className: PropTypes.string,
  fill: PropTypes.string,
  height: PropTypes.number,
  name: PropTypes.string.isRequired,
  style: PropTypes.object,
  width: PropTypes.number
};

export default SVGIcon;