How to add a hover effect on a React Icon

following the Doc on React icon on the link below its gives instruction on how to style the icons from React Icon , would anybody tell me how to add a hover effect to the icon since its not mentioned in the documentation.

import { IconContext } from "react-icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
    <FaFolder />

Github Doc

Hey freesudani,

Have you tried passing a className to your <FaFolder /> icon component?

You should be able to style your icon with custom CSS code this way. And then it is just a matter of using the :hover selector in CSS.


im not using a separate CSS file , im only using styled components and writing all my styled in customized html tag . im sorry i forgot to mention that

Argh, sorry I am not using styled components, so I guess someone else must help you out in this instance. :frowning:


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.