Code snippet for using SVG icons in react

icons.jsx

/*
Usage:
import SVGIcon from './Icons.jsx'
<SVGIcon kind='edit' style={{width: 48, height:48, fill:'green'}} />
*/

import React, { Component, PropTypes } from 'react'

// base icon style
const styles = {
	fill: 'black',
	verticalAlign: 'middle',
	width: '24',
	height: '24',
}

// base SVG component
const Base = props => {
	return (
		<svg viewBox="0 0 24 24" 
			preserveAspectRatio="xMidYMid meet" 
			style={{ ...styles, ...props.style }} 
			onClick={ props.onClick } >
			{ props.children }
		</svg>
	)
}

export default props => <Base {...props} >{ kind[props.kind] }</Base>

// list all needed icons here, find icons here:
// https://dmfrancisco.github.io/react-icons/
// http://typicons.com/
const kind = {
	edit: <g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"></path></g>,

	delete: <g><path d="M3 17.25v3.75h3.75l11.06-11.06-3.75-3.75-11.06 11.06zm17.71-10.21c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>,
}