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.
npm install react-icons --save
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
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.
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={{ ... }} />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 is supported by all major browsers.
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.
MIT
- Icons are taken from the other projects so please check each project licences accordingly.