@morgs32/react-icons v3.0.4
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/fa';
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
.
Icons
- Font Awesome - https://fontawesome.com/ License: CC BY 4.0 License
- Ionicons - https://ionicons.com/ License: MIT
- Material Design icons - http://google.github.io/material-design-icons/ License: Apache License Version 2.0
- Typicons - http://s-ings.com/typicons/ License: CC BY-SA 3.0
- Github Octicons icons - https://octicons.github.com/ License: MIT
- Feather - https://feathericons.com/ License: MIT
You can add more icons by submitting pull requests or creating issues.
Configuration
You can configure react-icons props using React context API.
requirement React 16.3 or higher.
import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>
key | default | memo |
---|---|---|
color | undefined(inherit) | |
size | 1em | |
className | undefined | |
style | undefined | can overwrite size and color |
Migrate from version 2 -> 3
Change import style
Import path has changed. You need to rewrite from the old style.
// OLD IMPORT STYLE
import FaBeer from 'react-icons/lib/fa/beer';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
// NEW IMPORT STYLE
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
Adjustment CSS
From version 3, vertical-align: middle
is not automatically given.
Please use IconContext to specify className or style.
example for global styling
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
example for give global className
// app.tsx
<IconContext.Provider value={{ className: 'react-icons' }}>
// app.css
.react-icons {
vertical-align: middle;
}
TypeScript native support
Dependencies on @types/react-icons
can be deleted.
$ npm remove @types/react-icons
Contribute
development
yarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn build
scripts for run demo
cd packages/react-icons
yarn build
cd ../demo
yarn start
run preview site
cd packages/react-icons
yarn build
cd ../preview
yarn start
Tips
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.
Related
Licence
MIT
- Icons are taken from the other projects so please check each project licences accordingly.
6 years ago