Every Icon you need in reactJS project. ft. react-icons
Many libraries and websites provide you icons and react icons combine all the icons by different providers into one roof.
Mohammed Nadeem Shareef
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 a 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, the 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
Upvote
Mohammed Nadeem Shareef
Hello. I am a FrontEnd Developer I work with reactJS, nextJS, TypeScript, firebase, tailwindcss, SCSS.
Related Articles