Hi @tranquil eagle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Type for icon names
frozen spearBOT
In Astro, you can use TypeScript to type your component props. If you're using an icon set where the names of the icons are known, you can create a type for the icon names.
For example, if you're using the built-in icon set from Starlight, you can create a type for the icon names like this:
type IconName = 'star' | 'starlight' | 'rocket' | ...other icon names...;
Then, you can use this type for the icon prop in your component:
interface Props {
icon: IconName;
// other props...
}
You can also use the ComponentProps type from astro/types to reference the Props accepted by a component even if they are not exported by the component itself. This can be helpful when wrapping or extending an existing component. Here's an example:
import type { ComponentProps } from 'astro/types';
import { Icon } from '@astrojs/starlight/icon';
type IconProps = ComponentProps<typeof Icon>;
In this example, IconProps would be the type of the props accepted by the Icon component.
Please note that you'll need to replace ...other icon names... with the actual names of the icons in your icon set.
Sources:
- Astro TypeScript Guide (https://docs.astro.build/en/guides/typescript/#component-props-type)
- Starlight Icon Component (https://starlight.astro.build/components/icons/#icon-props)