[Feature]: how to change icon size

[meddhiaka]

[Feature]: how to change icon size

[Emyboy]

Describe

I'm always frustrated when to think about changing the icon size

for example this one does not work with tailwind classes

<button className=' rounded py-2 px-[150px] border border-blue-950'>
     <FcGoogle className=' inline-block w-3' />
     <span className='px-3'>Continuer avec Google</span>
</button>

Solution

make tailwind classes applicable to the all react icons!

Minimal sample repository URL

No response

Additional context

No response

You can use the size props
<FcGoogle size={25} />

or using Tailwind you'll have to use width and height classNames
<FcGoogle className="w-20 h-20" />

Hope I was able to help

[MikeAwad662442]

you can use font size from tailwind text-2xl

like that

 <button className=' rounded py-2 px-[150px] border border-blue-950'>
                        <FcGoogle className=' inline-block text-2xl' />
                        <span className='px-3'>Continuer avec Google</span>
                    </button>

OR you can use IconContext wrapper all tag in the components

like that

import { IconContext } from "react-icons";
<IconContext.Provider value={{ className: "text-5xl " }}>
   <button className=' rounded py-2 px-[150px] border border-blue-950'>
                          <FcGoogle className=' inline-block ' />
                          <span className='px-3'>Continuer avec Google</span>
                      </button>
</IconContext.Provider>