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
; Component { 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 = ; var Question = React;
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:
or import multiple icons from the same pack
;
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:
- 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 in context.
static childContextTypes = reactIconBase: PropTypesobject ; { return reactIconBase: color: 'tomato' size: 24 style: ... } { ... }
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.