#Pass react-icons into tsx script

3 messages · Page 1 of 1 (latest)

pine sphinx
#

I'm trying to make a hamburger menu component that consists of links and (optionally) icons. I have chosen HeadlessUI to do this as I'm otherwise using Tailwind.

So I have some list of links in Astro front-matter in one file:

---
import HamburgerMenu from './HeadlessHamburger'

import { IoLogoGithub } from 'react-icons/io5'

const links = [
  { href: '/', label: 'Home' },
  { href: 'https://github.com', label: 'Github', icon: IoLogoGithub}
]
---

<div>
  <HamburgerMenu client:visible links={links} />
</div>

Then in my HamburgerMenu.tsx file, I'm trying to do the following:

import type { IconType } from 'react-icons'

interface Props {
  links: {
    href: string
    label: string
    icon?: IconType
  ][]
}

export default function HamburgerMenu({ links }: Props) {
  console.log('HamburgerMenu links prop:', links)
}

If I do this in my browser, I see that the Github link is coming through with a null icon:

{ href: "https://github.com", label: "Github", icon: null }

Am I going about this in the right way? Is there some sort of way I'm supposed to "instantiate" and pass that? My goal is to have a single, constant list of links that I can update and they will pass into this HamburgerMenu rendering component.

spare wolfBOT
#

Hi @pine sphinx. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems that there might be an issue with how you're importing and using the react-icons library in your Astro component.

However, the extracts do not provide a direct solution to your problem. They do mention some issues with using react-icons in Astro, but these are related to build errors and not to passing icons as props.

One thing to note from the extracts is that Astro has some limitations when it comes to passing children or complex objects (like components) as props to React components. This might be affecting how your icon prop is being passed and used.

Unfortunately, without more information or examples related to your specific use case, it's hard to provide a definitive solution. I would recommend checking the official Astro documentation or the react-icons documentation for more information.

Here are some relevant links from the extracts:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: