Icons by name, and the fixed set

// apps/docs/examples/ui/dynamic-icon.tsximport {  DynamicIcon,  type IconName,} from '@workspace/active-ui/components/composed/dynamic-icon';import {Icons} from '@workspace/active-ui/components/composed/icons';
// Navigation as data: the icon is a name, as it would come from a config.const NAVIGATION: {label: string; icon: IconName}[] = [  {label: 'Dashboard', icon: 'LayoutDashboard'},  {label: 'Participants', icon: 'Users'},  {label: 'Settings', icon: 'Settings'},];
const NAMED = Object.entries(Icons).filter(([name]) => name !== 'logo');
/** * Icons by name from data with `DynamicIcon`, and the fixed set `Icons` * that the composed components use, each under its name. */export default function DynamicIconExample() {  return (    <div className="grid w-full max-w-2xl gap-8">      <ul className="grid gap-2 text-sm">        {NAVIGATION.map((item) => (          <li key={item.label} className="flex items-center gap-2">            <DynamicIcon name={item.icon} className="size-4" aria-hidden />            {item.label}          </li>        ))}      </ul>      <ul className="grid grid-cols-2 gap-3 text-xs sm:grid-cols-4">        {NAMED.map(([name, Icon]) => (          <li key={name} className="flex items-center gap-2">            <Icon className="size-4 shrink-0" aria-hidden />            <code>{name}</code>          </li>        ))}      </ul>    </div>  );}