React Icons

index.html

<div id="app"></div>

React Icons.markdown

React Icons

A Pen by Brian Han on CodePen.

License.

script.js

class App extends React.Component {
  
  render() {
    return(
      <main> 
        <Icon icon="common-add" fill="red" width="32px" height="32px" title="add" description="Add a new instance of a service"/>
        <Icon icon="common-arrows" fill="blue" width="50px" height="50px"/>
      </main>
    );
  }
}

class Icon extends React.Component {
  renderIcon = () => {
    switch (this.props.icon) {
      case 'common-add':
        return (
          <g>
            <polygon points="17,9 15,9 15,15 9,15 9,17 15,17 15,23 17,23 17,17 23,17 23,15 17,15"/>
            <path d="M16,2C8.269,2,2,8.269,2,16s6.269,14,14,14s14-6.269,14-14S23.731,2,16,2z M16,28C9.383,28,4,22.617,4,16S9.383,4,16,4 s12,5.383,12,12S22.617,28,16,28z"/>
          </g>
        );
      case 'common-arrows':
        return (
          <g>
            <path d="M3.8,0.8 L7.6,5.1 L0.1,5.1 L3.8,0.8 Z M2.5,5.2 L5,5.2 L5,13.9 L2.5,13.9 L2.5,5.2 L2.5,5.2 Z"></path>
            <path d="M10.9,13.8 L7.1,9.5 L14.6,9.5 L10.9,13.8 Z M12.1,9.5 L9.6,9.5 L9.6,0.8 L12.1,0.8 L12.1,9.5 L12.1,9.5 Z"></path>
          </g>
        )
      // add more icons here
    }
  };

  render() {
    return(
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        icon={this.props.icon}
        width={this.props.width} 
        height={this.props.height} 
        viewBox="0 0 32 32"
        aria-labelledby={this.props.title}
        fill={this.props.fill}
       >
        <title id={this.props.title}>{this.props.description}</title>
        {this.renderIcon()}
      </svg>
    );
  }
}

Icon.defaultProps = {
  icon: 'common-add',
  width: '32px',
  height: '32px',
  title: 'This is a title',
  description: 'this is a description',
  fill: '#000'
};


ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>

style.css

h1, strong {
  font-family: sans-serif;
}