How to add a hover effect on a React Icon

JavaScript
#1

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" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>

Github Doc

#2

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.

best
Dennis

#3

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

#4

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

best
Dennis

#5

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