MDI Icon support in React with Webpack

Icon.js

import { PureComponent, Component } from 'react'
import SVGInline from 'react-svg-inline'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import AppIcons from '../../../static/icons/app-icons.json'

const IconSVGContainer = styled.span`
  display: inline-flex;
`
const IconSVG = styled(SVGInline)`
  display: inline-flex;
  padding: 4px;
`
export class Icon extends PureComponent {
  render() {
    const { children, className, small, medium, large, ...containerProps } = this.props
    const label = children.trim()
    let iconSvg
    if (!AppIcons[label]) {
      console.error(
        `Icon ${children} not found. Forgot to register it in '/styles/icons.js' ? Have a look on the Readme to register an icon`
      )
      const defaultIcon = AppIcons.triangle
      iconSvg = defaultIcon
    } else {
      iconSvg = AppIcons[label]
    }
    const width = large ? 48 : medium ? 36 : 24
    const height = large ? 48 : medium ? 36 : 24
    const svgProps = {
      width: `${width}px`,
      height: `${height}px`
    }
    return (
      <IconSVGContainer className={className} {...containerProps}>
        <IconSVG svg={iconSvg} fill="currentColor" {...svgProps} />
      </IconSVGContainer>
    )
  }
}
Icon.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string,
  small: PropTypes.bool,
  medium: PropTypes.bool,
  large: PropTypes.bool
}
Icon.defaultProps = {
  className: '',
  small: true,
  medium: false,
  large: false
}
export default Icon