How to Style React-Icons

Question

I am trying to figure out how to style icons that I import using react-icons.

In particular, I would like to be able to create a look similar to this:

That is to say, I'd like to add a background color, padding, border-radius, etc. However, I can't find an easy way to do that.

I can add a size and color prop and that will change the actual size and color of the icon. But there is no easy way for me to change the other elements.

Does anyone know how I can do this (or can they recommend a different library that can help me with this)?

Answer 1

Use IconContext as mentioned in the Docs.

function BlueLargeIcon() {
  return (
    <IconContext.Provider
      value={{ color: 'blue', size: '50px' }}
    >
      <div>
        <FaBeer />
      </div>
    </IconContext.Provider>
  );
}

To target specific Icon Components, you can use the style prop or use the same API (see Configurations) on the component itself:

const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />

// API
<FaFacebookF color="white" fontSize="1.5em" />

Answer 2

To whoever this may be helpful...

Colours of some icons cant be changed.
For example, I tried to change the colour of { GrClose } icon by doing

<GrClose
    className="icon"
    style={{
      position: 'absolute',
      top: '20px',
      right: '20px',
    }}
    size="50px"
    color="white"
    onClick={handleExit}
/>

It just didn't change, when I replaced my icon with { AiOutlineClose } icon it worked!