Every Icon you need in reactJS project. ft. react-icons

#react #reacticons #webdev #icons

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.