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
Top comments (5)
I like to add few more to your collection
lagandlog.com/logs/free-icons-for-...
Short and to the point, I like it.
🙌
Nothing is better than self generated icon font library which is very easy to build and re-use. SVG icons are even worst for the performance!
If that is what work for you go for it. 👍