A component that gives SVGs a consistent API

BaseSvg.js

import React from 'react'
import PropTypes from 'prop-types'

const BaseIcon = ({ viewBox, height, width, type, children, ...rest }) {
    // We want the default dimensions to be 100%, which covers most
    // use-cases, but only if BOTH the width and height props are not set
    const trueWidth = width || height ? width : '100%'
    const trueHeight = width || height ? height : '100%'

    return (
      <svg
        viewBox={viewBox}
        width={trueWidth}
        height={trueHeight}
        focusable='false' // IE behavior requires this,
        style={{
          display: 'block',
          userSelect: 'none'
          [type]: currentColor
        }}
        {...rest}
      >
        {children}
      </svg>
    )
}

BaseIcon.defaultProps = {
  height: null,
  width: null,
  type: 'fill'
}

BaseIcon.propTypes = {
  viewBox: PropTypes.string.isRequired,
  height: PropTypes.string,
  width: PropTypes.string,
  type: PropTypes.oneOf(['fill', 'stroke'])
}