Icon.js

import React, { PropTypes } from 'react';
import styled from 'styled-components';
import { sizes } from '../constants/';

const getHeight = ({ size }) => sizes.values[size];

const Wrapper = styled.span`
  display: inline-block;
  color: black;
  height: ${getHeight};
  width: ${getHeight};
  margin: 0.1rem;
  box-sizing: border-box;

  & > svg {
    width: 100%;
    height: 100%;
    fill: currentcolor;
    stroke: currentcolor;
  }
`;

const Icon = ({ name, ...props }) => {
  const svg = require(`!raw-loader!./icons/${name}.svg`);

  return <Wrapper {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
};

Icon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.oneOf(sizes),
};

Icon.defaultProps = {
  size: 'mini',
};

export default Icon;