I’m not sure that we’re going to do this together, but I thought I’d show you my very naïve implementation of an Icon component. I want to limit the number of available icons and I want auto-complete to help me find the icon that I need. Here is my very simple icon component that we can start with.

import {
	type LucideIcon,
	AlertTriangle,
	Check,
	HelpCircle,
	Info,
	X,
	Zap,
	ChevronDown,
	Skull,
	Star,
	ExternalLink,
	Heart,
} from 'lucide-react';
import { ComponentProps } from 'react';

export type IconProps = ComponentProps<LucideIcon> & {
	type:
		| 'warning'
		| 'check'
		| 'help'
		| 'info'
		| 'x'
		| 'zap'
		| 'chevron'
		| 'skull'
		| 'star'
		| 'external'
		| 'heart';
};

const iconComponents: Record<IconProps['type'], LucideIcon> = {
	warning: AlertTriangle,
	check: Check,
	help: HelpCircle,
	info: Info,
	x: X,
	zap: Zap,
	chevron: ChevronDown,
	skull: Skull,
	star: Star,
	external: ExternalLink,
	heart: Heart,
};

export const Icon = ({ type, ...props }: IconProps) => {
	const IconComponent = iconComponents[type];
	return <IconComponent {...props} />;
};

export const icons = Object.keys(iconComponents) as IconProps['type'][];