reactjsreact-icons

How to Style React-Icons

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: enter image description here

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)?

Solution

  • Use IconContext as mentioned in the Docs.

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

    enter image description here

    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" />