8 replies

TypeScript React: Confused about icon: Icon and {...}: Props syntax in component props

I'm working with a Next.js and TypeScript tutorial (https://www.youtube.com/watch?v=djDgTYrFMAY), and I came across this component syntax that I'd like to understand better:

import {LucideIcon} from "lucide-react"

type Props = {
    icon: LucideIcon,
    label: string,
    href?: string, 
}

export function NavButton ({
    icon: Icon,
    label, 
    href,
}: Props) { ... }

import {LucideIcon} from "lucide-react"

type Props = {
    icon: LucideIcon,
    label: string,
    href?: string, 
}

export function NavButton ({
    icon: Icon,
    label, 
    href,
}: Props) { ... }

import {LucideIcon} from "lucide-react"

type Props = {
    icon: LucideIcon,
    label: string,
    href?: string, 
}

export function NavButton ({
    icon: Icon,
    label, 
    href,
}: Props) { ... }

import {LucideIcon} from "lucide-react"

type Props = {
    icon: LucideIcon,
    label: string,
    href?: string, 
}

export function NavButton ({
    icon: Icon,
    label, 
    href,
}: Props) { ... }

I'm particularly confused about two parts:

1. What's the significance of

icon: Icon

icon: Icon

icon: Icon

icon: Icon?
2. What does

}: Props

}: Props

}: Props

}: Props mean at the end of the parameter list?

Would appreciate if someone could break down this syntax!

YouTubeDave Gray

Next.js Full Stack Project w/ Nextjs 15 & React 19

Build a Next.js full stack project with Nextjs 15 & React 19 in this video tutorial series. Our full stack app will include Next.js, TypeScript, Tailwind CSS, ShadCN/ui, Sentry, Kinde Auth, Neon Postgres, Drizzle ORM, and more.

Use the code "davegray" for 3 months free on the Team plan of Sentry for any new accounts:
- Sentry Homepage: https:...

Next.js Full Stack Project w/ Nextjs 15 & React 19

TypeScript React: Confused about icon: Icon and {...}: Props syntax in component props

Similar Threads

Similar Threads

Similar Threads