Currently, I am using the 'IconContext.Provider' tag to style my icons from the 'react-icons' library. Are there any solutions available to dynamically change the size of the icon based on the size of my media?
Is using the global stylesheet the only option for achieving this? I am hesitant to do so as I am new to NextJs and I want to avoid any potential clashes with other styles. This is why I have decided to separate 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