Every Icon you need in reactJS project. ft. react-icons
Mohammed Nadeem Shareef
Posted on June 1, 2021
Hello Developers 👋👋👋
I just wanna share an awesome library(or whatever it is called) for Icons in ReactJS.
React-Icons
React-Icons enables you to use famous icon provider's icons in React component format.
React Icons have Icons from
- Font Awesome
- Heroicons
- Typicons
- VS Code Icons
- css.gg
- And a lot.
Show me the code 🤓🤓🤓
npm install react-icons --save
import { IconName } from 'react-icons/Icon-Provider';
For example
import { HiAcademicCap } from "react-icons/hi";
And it will give you something like this
<HiAcademicCap />
And Kabooom! You have your Icon.
Customizing Icons
We have few options to play around also
- size
- color
- style
- className
- And some-others
let's see the code in action
<HiAcademicCap
color="blue"
size="3rem"
style={{
color: "red"
}}
className="black-color"
/>
- Here, first preference will be given to style color (red)
- Then to color property(blue), then to the color in our className (black)
- To increase the side we have size
Thanks for reading.
EnjoyLearning.
Closing here 👋👋👋
This is Shareef.
GitHub
My Portfolio
Twitter ShareefBhai99
React-Icons
💖 💪 🙅 🚩
Mohammed Nadeem Shareef
Posted on June 1, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.