Icon

<Icon name> draws one icon by name, white with a dark edge, as Text draws words. The name is one of the 38 in IconName, the icons a HUD usually needs, not any icon on lucide’s site. A name outside the set does not compile. With the set, a game draws icons while it imports nothing but the engine.

The set is fixed because a lookup by any name makes the bundler write a file for every icon lucide has, nearly two thousand. A game that needs an icon outside it adds the lucide-react package and hands name the icon itself: <Icon name={Sword} />, with Sword imported from lucide-react.

Its props are in IconProps.

import { Hud, Icon, Panel, Slot, Text } from "@spawnite/engine";

export function Coins({ coins }: { coins: number }) {
    return (
        <Hud>
            <Panel slot={Slot.TopRight}>
                <Icon name="coins" className="size-6" />
                <Text>{coins}</Text>
            </Panel>
        </Hud>
    );
}