Skip to content

efflam/preact-icons

 
 

Repository files navigation

React Icons

npm

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/fa/beer';

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

If you are not using es6 compiler like babel or rollup.js, it's possible to 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 wait to Webpack 2 implement dead code elimination based on es6 imports.

Also it's possible to include the whole icon pack from:

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

or import multiple icons from the same pack

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

every icon pack is in their own folder

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

to view all icons visit docs

Icons

Currently supported icons are:

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

Configuration

You can configure react-icons props in 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={{ ... }} />

Contribution

Just add svg icons in ./icons/:icons-name folder and create pull request again develop after merge I will generate React components because this process is not fully automated yet.

svg ?

Svg is supported by all major browsers.

Why es6 import and not fonts?

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

Related

Licence

MIT

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

About

❤️ svg preact icons of popular icon packs using ES6 imports

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%