Include popular icons in you react project easly with react-icons
. It uses ES6 imports so you can only include icons that your project is using.
Installation
npm install react-icons --save
Usage
import FaBeer from 'react-icons/fa/FaBeer'; class Question extends ReactComponent render return <h3> Lets go for a <FaBeer />? </h3>
you can include icon 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 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
to view all icons visit docs
Icons
Currenlty 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)
you can add more icons by creating pull request or create issue.
Contribution
just add svg icons in ./icons/:icons-name folder and create pull request agains develop
after merge I will generate React components because this process is not fully automated yet.
svg ?
svg is supported by all major browser
Why es6 import and not fonts?
Because using react-icons
you can only send icons to the users that are needed not one big font file, and also you can using this method easly figure out which icons are used in you project.
Licence
MIT
- icons are taken from the other projects so you should check each project licence