"use client" import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import * as hugeIcons from "@/registry/aiellie/lib/huge-icons" /** * Every glyph in the set, each naming itself on hover. An icon set has * no behaviour to show — what a reader needs is the glyph and the export * it answers to, and a tooltip keeps the second one out of the strip until * it is asked for. * * Read off the module rather than written out again, so a glyph added to * `huge-icons` arrives here without a second edit, and a name renamed there * cannot go on reading correctly here. */ const GLYPHS = Object.entries(hugeIcons) as [string, IconSvgElement][] export default function HugeIconsDemo() { return ( {/* Wrap rather than sit on one line: this set is a slice of a library, not a handful of marks, and a wrapping grid is how that many glyphs stay in the plate. */}

{GLYPHS.map(([name, icon]) => ( {/* The trigger is the labelled thing, not the glyph inside it: a glyph is a picture of a name, so it takes `role="img"` and says the export it answers to. It takes a tab stop as well, since a tooltip that only opens on hover says nothing to a keyboard. */} } > {name} ))}

) }

Huge Icons

01Preview

02Installation