How to add an Icon in the Navigation Menu list item?

[subhranshudas]

Hi All,
I am new to both tailwindCSS & shadcn/ui.

Currently i have setup a new Next13 project with shadcn/ui. I am trying to add the https://ui.shadcn.com/docs/components/navigation-menu into my app.

I am able to get the navigation menu working, but i want to add an icon to the title of the menu list. I am not sure how to edit the component i have created in the app (not the components/ui/navigation-menu) to add the Icon.
Below is my sample snippet-

import { ElectricCar } from '@/components/icons/electric-car' // SVG wrapped with React

import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
    navigationMenuTriggerStyle,
  } from "@/components/ui/navigation-menu"


 function TWNavigationMenu() {
    return (
      <NavigationMenu>
        <NavigationMenuList>
        
          <NavigationMenuItem>
            <NavigationMenuTrigger>Domains</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">

                {domains.map((domain) => { // --> domains is a list same as in the shadcn/ui docs
                  const DomainIcon = domain.icon

                  return (
                    <NavListItem
                      key={domain.title}
                      title={domain.title}
                      href={domain.href}
                      icon={<DomainIcon size={16} />}
                    > 
                      {domain.description}
                    </NavListItem>
                  )
                })}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink className={navigationMenuTriggerStyle()} href='/about'>
              About
            </NavigationMenuLink>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/contact">
              Contact
            </NavigationMenuLink>

          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    )
  }



const NavListItem = React.forwardRef<
    React.ElementRef<"a">,
    React.ComponentPropsWithoutRef<"a">
  >(({ className, title, children, ...props }, ref) => {
    return (
      <li>
        <NavigationMenuLink asChild>
          <a
            ref={ref}
            className={cn(
              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
              className
            )}
            {...props}
          >
            <div className="text-sm font-medium leading-none">{title}</div>
            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
              {children}
            </p>
          </a>
        </NavigationMenuLink>
      </li>
    )
  })
NavListItem.displayName = "NavListItem"

Here how do i make the NavListItem accept the icon as a prop?

i think i am facing more of a Typescript issue here than shadcn/ui.

In general is there a good readup on how to use RadixUI? the docs don't look very helpful.

Thanks.

[subhranshudas]

I was able to do this by -

export function ElectricCar({ size = 24, svgcolor = "#000" } : { size?: number, svgcolor?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill={`hsl(var(--${svgcolor}))`}
      stroke={`hsl(var(--${svgcolor}))`}
      version="1.1"
      viewBox="0 0 512 512"
      xmlSpace="preserve"
    >
     <path>...</path>
    </svg>
  );
}

export const domainsList: {
    title: string;
    href: string;
    description: string;
    icon: any
  }[] = [
      {
        title: "artificial intelligence",
        href: "/ai",
        description: "",
        icon: BrainCircuit
      },
      {
        title: "electric vehicles",
        href: "/ev",
        description: "",
        icon: (props: any) => <ElectricCar {...props} /> // only Custom SVG Icons take svgcolor "prop"
      },
]

Using the above in below code -

{domainsList.map((domain) => {
    const DomainIcon = domain.icon
    const iconColor = "foreground"

    return (
      <NavListItem
        key={domain.title}
        title={domain.title}
        href={domain.href}
        **icon={<DomainIcon size={16} svgcolor={iconColor} className={`stroke-${iconColor}`}/>}**
      > 
        {domain.description}
      </NavListItem>
    )
  })}

Now, svgcolor will be used for custom SVG icon, and ignored by the rest of the Icons.

Please feel free to share any better ways!