How to dynamically change the size of icon in

Question

currently, to style my icons under the 'react-icons' library, I am using the 'IconContext.Provider' tag. However, is there a solution for me to change the size of the icon dynamically based on the size of my media ?

Is the only solution to go about doing this only with the global stylesheet? I am avoiding it as I have only just started using NextJs and I do not want my style to have a possible clash with other style. Hence, I am separating them into modules.

Thank you.

NavBar.Module.Css

@import url("https://fontlibrary.org//face/metropolis");

.siteTitleWrapper {
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}

.siteTitle {
  font-family: "MetropolisRegular";
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1em;
  white-space: nowrap;
}

.headerInner {
  padding: 20px 0;
  display: table;
  width: 100%;
}

.mainNavigation {
  text-align: right;
  position: relative;
  z-index: 1000;
  display: block;
}

.NavItemsWrapper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.NavItems {
  font: "MetropolisRegular";
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}

@media only screen and (max-width: 830px) {
  .mainNavigation {
    -webkit-font-smoothing: subpixel-antialiased;
    display: inline-flexbox;
    position: fixed;
    bottom: 64px;
    left: 0;
    height: auto;
    width: 100%;
    background-color: #f7f7f7;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
  }

  .NavItems {
    display: none;
  }

}

NavBar.tsx

import Link from 'next/link'
import styles from '../styles/components/NavBar.module.css'
import {HiHome} from 'react-icons/hi'
import {FaBloggerB} from 'react-icons/fa'
import {AiOutlineFundProjectionScreen} from 'react-icons/ai'
import {BsPersonBadge} from 'react-icons/bs'
import {IconContext} from 'react-icons'
import { IconType } from 'react-icons/lib'

interface navItemsTypes {
    icon: IconType,
    category: string,
    link: string
}

const navItems : navItemsTypes[] = [
    {icon: HiHome, category: 'Home', link: '/'},
    {icon: AiOutlineFundProjectionScreen, category: 'Projects', link: '/projects'},
    {icon: FaBloggerB, category: 'Blogs', link: '/blogs'},
    {icon: BsPersonBadge, category: 'About', link: '/about'},
]


const NavBar = () => {
    return (
    <div>
        <nav className={styles.headerInner}>
            <div className={styles.siteTitleWrapper}>
            <h1 id="site-title" className={styles.siteTitle} ><Link href='/'>Hong Sheng Yang</Link></h1>
            </div>
            
            <div className={styles.mainNavigation}>
                <IconContext.Provider value={{ size: '1em', style:{marginLeft:'3em',marginRight:'0.5em', color:'#000'}}}>
                    {navItems.map((item) => (
                        <div className={styles.NavItemsWrapper}>
                            <Link href={item.link}>
                                <span style={{display:'flex'}}>
                                    <item.icon/>
                                    <p className={styles.NavItems}>
                                        {item.category}
                                    </p>
                                </span>
                            </Link>
                        </div>
                    ))}

                </IconContext.Provider>             
            </div>
        </nav>   
    </div>
    )
}

export default NavBar

score 0 · Accepted Answer · answered Dec 08 '21 at 02:34

I did "npm i react-responsive" and import the following in my code

import { useMediaQuery } from 'react-responsive'

Additionally, I declared the sizes for mobile and phone with 2 const

const phoneViewNav = {
size: '1em',

}

const DesktopViewNav = {
    size: '1.5em',
}

Lastly, I use the media query to check for the screen size and apply accordingly

const NavBar = () => {
    
    const isDesktopOrLaptop = useMediaQuery({maxWidth:830})
    const iconSize = isDesktopOrLaptop ? phoneViewNav : DesktopViewNav
    const router = useRouter();
    
    return (
    <div id="nav">
    ....
        <IconContext.Provider value={{ size: iconSize.size, style:{color:"#000"}}}> ...
    </div> )}

How to dynamically change the size of icon in

1 Answers1