4

How can I make react-icons icons size smaller for mobile? I understand pixel is not a good approach, but how should I do it?

import { FaSearch, FaFacebook, FaInstagram, FaUserCog, FaUserTimes } from "react-icons/fa";

    <FaSearch
        color="#023373"
        size="30px" />
nanquim
  • 1,786
  • 7
  • 32
  • 50
  • Maybe scaling helps You: [https://stackoverflow.com/questions/43768629/how-to-scale-large-font-awesome-icons-from-the-react-icons-package](https://stackoverflow.com/questions/43768629/how-to-scale-large-font-awesome-icons-from-the-react-icons-package) – VivaLaCode Sep 30 '20 at 17:21
  • I saw that, but I still can't understand how to make it responsive, is still a fixed size – nanquim Sep 30 '20 at 17:28

2 Answers2

5

You can use @media query in your case. Add a class to your icon component and write media query for mobile device width.

<FaSearch color="#023373" className="SearchIcon" />

In your CSS, do this

.SearchIcon{
  font-size: 40px;
}

@media only screen and (max-width: 400px) {
  .SearchIcon {
    font-size: 20px;
  }
}

I created a working example using Stackblitz

Here's a list of all the @media queries for different device widths.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
coderpc
  • 4,119
  • 6
  • 51
  • 93
  • 1
    yes, i think is the only way. i really don't like media queries, I block their existence. but is always them. thank you – nanquim Sep 30 '20 at 17:31
1

Another approach is to handle icon sizes on their wrappers. You can set the icon size to auto and change their parent size. You can do it on media queries or with any other method.

<IconContext.Provider value={{ size: 'auto' }}>
  <App />
</IconContext.Provider>
Amir
  • 996
  • 7
  • 17