Advertisement
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
Installation (for standard modern project)
|
1 2 3 |
yarn add react-icons or npm install react-icons --save |
example usage
|
1 2 3 4 5 6 7 |
<span class="pl-k">import</span> { <span class="pl-smi">FaBeer</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-icons/fa<span class="pl-pds">'</span></span>; <span class="pl-k">class</span> <span class="pl-en">Question</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-k">.</span><span class="pl-smi">Component</span> { <span class="pl-en"><span class="pl-s">render</span></span>() { <span class="pl-k">return</span> <<span class="pl-ent">h3</span>> Lets go for a <<span class="pl-ent">FaBeer</span> />? </<span class="pl-ent">h3</span>> } } |
View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it’s own subfolder under react-icons you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';
This information will never be shared with third parties.