MenuIcons

Here is some text.

with a hard return between.

MenuIcons @"src/components/MenuIcons"

Edit the props to see this component update live!

jsx

<Box
  as="nav"
  role="navigation"
  variant="text.ui.6"
  sx={{
    color: "infoText",
    backgroundColor: "info",
    px: 3,
    py: 3,
  }}
>
  <Text as="p" variant="ui.5" sx={{ mb: 3, textAlign: "center" }}>
    Connect with me!
  </Text>
  <MenuIcons
    justify={["space-between", "space-between", "center"]}
    data={iconMenuData}
    variant="info"
    size={["inherit", "inherit", "36px"]}
    gap
    showLabelsOnMobile
    stackOnMobile
    iconMap={{
      homepage: FaHome,
      facebook: FaFacebook,
      twitter: FaTwitter,
      linkedIn: FaLinkedinIn,
      youtube: IoLogoYoutube,
      instagram: GrInstagram,
      github: FaGithub,
    }}
  />
</Box>

<Box
  as="nav"
  role="navigation"
  variant="text.ui.6"
  sx={{
    color: "infoText",
    backgroundColor: "info",
    px: 3,
    py: 3,
  }}
>
  <Text as="p" variant="ui.5" sx={{ mb: 3, textAlign: "center" }}>
    Connect with me!
  </Text>
  <MenuIcons
    justify={["space-between", "space-between", "center"]}
    data={iconMenuData}
    variant="info"
    size={["inherit", "inherit", "36px"]}
    gap
    showLabelsOnMobile
    stackOnMobile
    iconMap={{
      homepage: FaHome,
      facebook: FaFacebook,
      twitter: FaTwitter,
      linkedIn: FaLinkedinIn,
      youtube: IoLogoYoutube,
      instagram: GrInstagram,
      github: FaGithub,
    }}
  />
</Box>

and check

Example

jsx

<Box
  as="nav"
  role="navigation"
  variant="text.ui.6"
  sx={{
    color: "infoText",
    backgroundColor: "info",
    px: 3,
    py: 3,
  }}
>
  <Text as="p" variant="ui.5" sx={{ mb: 3, textAlign: "center" }}>
    Connect with me!
  </Text>
  <MenuIcons
    justify={["space-between", "space-between", "center"]}
    data={iconMenuData}
    variant="info"
    size="36px"
    gap
    showLabelsOnMobile
    stackOnMobile
    iconMap={{
      homepage: FaHome,
      facebook: FaFacebook,
      twitter: FaTwitter,
      linkedIn: FaLinkedinIn,
      youtube: IoLogoYoutube,
      instagram: GrInstagram,
      github: FaGithub,
    }}
  />
</Box>

Props

variant, className, size, data, expand, iconMap, justify, gap, stackOnMobile, showLabelsOnMobile,