react-octicon

A React component which renders a GitHub Octicons icon.

Demo

https://insin.github.io/react-octicon/

Usage

Note: Webpack is required in order to use this component.

Install and use the Octicon component like so:

npm install --save react-octicon

import React from 'react'
import {render} from 'react-dom'
import Octicon from 'react-octicon'

let App = () => <div>
  <Octicon mega spin name="sync"/>
</div>

render(<App/>, document.querySelector('#app'))

Usage with nwb

If you use nwb to build and serve the React app you're using this component in, it will automatically configure Webpack to handle CSS, image and font dependencies for you.

Usage with Webpack

This component handles the Octicons CSS dependency for you, but you must use Webpack and configure it to handle CSS and associated font and image files.

For example, using the following webpack loaders:

npm install --save-dev css-loader file-loader style-loader url-loader

 module: {
   loaders: [
     /* ...other loader config here... */
     {test: /\.css$/, loader: 'style!css'},
     {test: /\.(otf|eot|svg|ttf|woff|woff2).*$/, loader: 'url?limit=8192'}
   ]
 }

See the webpack Stylesheets documentation for more info.

Required props

Prop | Description ---- | ------------- name | The name of an icon in the Octicons set, e.g. 'trashcan'

Other props

Prop | Description ---- | ------------- className | An additional class name for the element rendered by the component mega | If true, a double-size icon will be displayed spin | If true, the icon will spin

Any additional props given, such as event handlers or aria-* attributes, will be passed to the element rendered by the component.

MIT licensed