How to change fontSize in react icon using styled components

Question

I want to make hover effect with increase of icon size, icons are from react icons, I'm using styled components. How should I do it ?

 export const BottomBar = () => {
  const style = { fontSize: "180%" };
  return (
    <StyledBottomBar>
      <StyledIcon>
        <FaFacebookSquare style={style} />
      </StyledIcon>
      <StyledIcon>
        <GrInstagram style={style} />
      </StyledIcon>
      <StyledIcon>
        <CgMail style={style} />
      </StyledIcon>
      <StyledIcon>
        <BiPhoneCall style={style} />
      </StyledIcon>
    </StyledBottomBar>
  );
};

Thanks !!!

Answer 1

It's not possible to do inline style's actions like :hover. You could use JS approach onMouseEnter and onMouseLeave:

const style = { fontSize: "180%",transition: 'font-size 0.5s'  };
...
<FaFacebookSquare style={style} onMouseEnter={({target})=>target.style.fontSize= "180%"} 
  onMouseLeave={({target})=>target.style.fontSize= "100%"}/>

Or you could divide them into Component <StyledIcon/> and then useRef, useEffect and useState to do the hover.

const style = { fontSize: "180%",transition: 'font-size 0.5s' };
export function StyledIcon(props){
const [hover,setHover] = useState(false)
const iconRef = useRef(null)

  useEffect(()=>{
    if(hover){
      iconRef.current.style.fontSize="200%"
    }
    else{
      iconRef.current.style.fontSize="180%"
    }
  },[hover]) // changing fontSize whenever the hover state is updated
const handleIconType = ()=>{
    switch(props.type){
      case 'facebook':
        {
          return <FaFacebookSquare style={style} ref={iconRef} onMouseEnter={()=>{setHover(true)}} onMouseLeave={()=>{setHover(false)}}/>
        }
      ...// cases for different type of icon
      default:
        return null
    }
  }
  return(
  <>
     <FaFacebookSquare style={style} ref={iconRef} onMouseEnter={()=>{setHover(true)}} onMouseLeave={()=>{setHover(false)}}/>
  </>
  )
}
export const BottomBar = () => {
  
  return (
    <StyledBottomBar>
      <StyledIcon type="facebook">
      </StyledIcon>
      <StyledIcon type="instagram">
      </StyledIcon>
    </StyledBottomBar>
  );
};

Answer 2

So react-icons will be rendered as <svg> elements. These have properties that you can override with styles, you can only manipulate them with actions on the element itself.

In your example, if you look at the dev-tools and inspect the html, there is probably a div wrapper around the svg element meaning that the styles you tried to apply to them were applied to the div instead.

const style = { fontSize: "180%",transition: 'font-size 0.5s'  }

//Try writing it like this:
const style = {
    '& svg': {
        fontSize: '180%',
        transition: 'fontSize 0.5s'
    }
}

Here we are applying those rules to the svg element and not its wrapper.

EDIT If you want to listen for clicks or hovers you listen on the div that wraps the svg! Make sure it has the same size, too.