Sample Icon Library using React and Styled Components

Icon.jsx

/* eslint-disable max-len */
/* eslint-disable no-multi-comp */

import React from "react";
import styled from "styled-components";

const icons = {
  logo: () => (
    <svg viewBox="-52.409 -10.576 792.909 797.838">
      <path d="M493.014,207.005c1.37,7.876,2.395,16.095,2.395,24.313c0,47.259-23.287,89.381-58.901,115.066 c-39.384-49.656-65.067-110.613-70.204-177.393c-0.686-8.903-1.027-17.807-1.027-27.054c0-17.465,1.37-34.588,4.109-51.368 c5.48-33.904,16.096-66.438,30.822-96.23C210.146,54.612,68.369,221.045,43.712,423.779c-2.398,15.753-3.768,32.192-3.768,48.629 c0,2.396,0,4.794,0.343,6.85c3.767,164.721,138.352,297.25,303.757,297.25c167.805,0,304.102-136.296,304.102-304.1 c0-1.714,0-3.423,0-5.137C646.435,355.631,584.448,258.373,493.014,207.005z M343.361,767.605 c-43.492-30.822-71.917-81.505-71.917-139.036c0-57.535,28.425-108.219,71.917-139.038c43.491,30.822,71.915,81.506,71.915,139.038 S386.853,736.783,343.361,767.605z" />
    </svg>
  ),

  add: () => (
    <svg viewBox="0 0 50 50">
      <g transform="translate(0,-1002.3622)">
        <path d="m 23,1041.3622 0,-12 -12,0 0,-4 12,0 0,-12 4,0 0,12 12,0 0,4 -12,0 0,12 -4,0 z" />
      </g>
    </svg>
  ),

  arrowUp: () => (
    <svg viewBox="0 0 22 22" >
      <g>
        <polygon points="10.707 5.99909 3 13.70709 4.414 15.12109 10.707 8.82809 17.001 15.12109 18.415 13.70709" />
      </g>
    </svg>
  ),

  arrowDown: () => (
    <svg viewBox="0 0 22 22" >
      <g>
        <polygon points="17 5.99909 10.706 12.29309 4.413 5.99909 3 7.41409 10.706 15.12109 18.414 7.41409" />
      </g>
    </svg>
  ),
};

const StyledI = styled.i`
  width: ${({ theme, size }) => size || theme.icon.size};
  display: inline-block;
  path,
  polygon,
  &:hover polygon {
    fill: ${({ theme, fill }) => fill ? theme.color[fill] : theme.color.base};
  }
`;

const Icon = props => (
  <StyledI { ...props }>
    { icons[props.name]() }
  </StyledI>
);

Icon.propTypes = {
  name: React.PropTypes.string
};

export default Icon;

/* eslint-enable max-len */

Can you please add an example how to use this library?