spinlock99/react-icons

not maintained anymore - svg react icons of popular icon packs

React Icons

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

npm install react-icons --save

Usage

import FaBeer from 'react-icons/lib/fa/beer';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

If you are not using an ES6 compiler like Babel or Rollup, you can include icons from the compiled folder ./lib. Babel by default will ignore node_modules so if you don't want to change the settings you will need to use files from ./lib.

var FaBeer = require('react-icons/lib/fa/beer');

var Question = React.createClass({
    render: function() {
        return React.createElement('h3', null,
            ' Lets go for a ', React.createElement(FaBeer, null), '? '
        );
    }
});

You can include icons directly from react-icons using import FaBeer from 'react-icons', but you should use a builder that uses dead code elimination like Webpack 2+, based on ES6 imports.

Also it's possible to import an entire icon pack:

import * as FontAwesome from 'react-icons/lib/fa'

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FontAwesome.FaBeer />? </h3>
    }
}

or import multiple icons from the same pack

import {MdCancel, MdChat, MdCheck} from 'react-icons/md';

Each icon pack is in its own folder:

• Material Design Icons => ./md
• FontAwesome => ./fa
• Typicons => ./ti
• Github Octicons => ./go
• Ionicons => ./io

To view them all, visit the docs

Also, to view and search for the necessary icons you can use Icon Viewer.

Icons

Currently supported icons are:

• Material Design Icons by Google https://www.google.com/design/icons/ (licence: CC-BY 4.0)
• Font Awesome by Dave Gandy - http://fontawesome.io (licence: SIL OFL 1.1)
• Typicons by Stephen Hutchings - http://typicons.com (licence: CC BY-SA)
• Github Octicons icons by Github https://octicons.github.com/ (licence: SIL OFL 1.1)
• Ionicons by Ionic Framework - http://ionicons.com (licence: MIT)

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure react-icons props using context.

class HigherOrderComponent extends Component {

    static childContextTypes = {
        reactIconBase: PropTypes.object
    };

    getChildContext() {
        return {
            reactIconBase: {
                color: 'tomato',
                size: 24,
                style: {
                    ...
                }
            }
        }
    }

    render() {
        ...
    }
}

Context is overriden inline.

<Icon size={30} color="aliceblue" style={{ ... }} />

Contribute

Just add/edit your SVG icons in ./icons/[icons-name], run npm run build, then create your pull request again master.

SVG ?

Svg is supported by all major browsers.

Why ES6 import and not fonts?

With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

Using create-react-app?

create-react-app tries to load the icons as files by default, rather than running through Babel. You may therefore see an erorr message similar to "You may need an appropriate loader...". The recommended workaround is to import from lib instead:

import {FaBeer} from 'react-icons/lib/fa';

Related

• react-svg-morph

Licence

MIT

• Icons are taken from the other projects so please check each project licences accordingly.