Rewritten (ES6) React Component for Icons using Inline SVG

index.js

// http://dmfrancisco.github.io/react-icons/
// http://www.rudinswagerman.nl/

/*
<Icon size="2rem" icon="my-icon" />
*/

import React from 'react';

const renderGraphic = icon => {
  switch (icon) {
    case 'my-icon':
      return (
        <g><path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z"/></g>
      );
    case 'another-icon':
      return (
        <g><path d="M7.41 15.41l4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6z"/></g>
      );
    // Add more icons here
  }
}

const styles = size => ({
  fill: 'currentcolor',
  verticalAlign: 'middle',
  width: size,
  height: size
});

export default ({icon, size, style}) => (
  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"
    style={{...styles(size? size : 24), ...style}}>
      {renderGraphic(icon)}
  </svg>
);