How can i make changes in imported react icon using styled components

Question

I am using styled component library to style my website. I want to do changes in my imported react icon component. for example: if I am use normal CSS then I can easy make changes in

<i class="fab fa-facebook"></i>

by targeting <i> tag in CSS.

but in react I am using react-icon library and i used that icon as component. for example:

<FaGithub />

how can I make changes like font-size and line-height in that component without using inline CSS and using styled component.

Answer 1

Colours of some icons cant be changed.

Still, there are two ways to do this.

There are some changes that you need to make to your code.

For example your code is like this

<div className="randomClass">
    <FaGithub />
</div>

Then at the bottom of the page at the last line you need to style it like this.

const Github  = styled(FaGithub)`
  color: purple;
  transform: scale(2);
  margin: 5%;
`;

Once it is done what you need to do is, you need to rename the components to the styled components we created.

//So, instead of 

<div className="randomClass">
    <FaGithub />
</div>

// It will become

<div className="randomClass">
    <Github />
</div>

For a different approach, you can visit here