{"name":"icon","title":"Icon","description":"Renders an icon by abstract name from any of five icon libraries (Lucide, Tabler Icons, HugeIcons, Phosphor Icons, Remix Icon).","installCommand":"bunx marko-ui add icon -y","usageTags":"<Icon>","importSnippet":"import Icon from \"@/components/ui/icon/icon.marko\";","usageSnippet":"<Icon name=\"SearchIcon\" library=\"lucide\"/>","tags":["Icon"],"parts":[],"props":[{"name":"name","type":"string","required":true,"description":"Abstract icon name, e.g. \"SearchIcon\" — shared across all 5 libraries."},{"name":"class","type":"string","required":false},{"name":"library","type":"IconLibraryName","required":false,"description":"Which icon library to render from. Defaults to \"lucide\"."},{"name":"unsized","type":"boolean","required":false,"description":"Suppress the default `size-4` class so the emitted <svg> carries no\n`size-*` utility at all.\n\nThe 8 style layers size icons through shadcn's vendored\n`[&_svg:not([class*='size-'])]:size-N` escape hatch, which only reaches\nan <svg> that has NO size class. Upstream shadcn's icon loader emits no\ndefault size for exactly this reason; this component adds `size-4` as a\nconvenience, which silently disables that hatch. Set `unsized` at any\ncall site whose size is owned by an ancestor's `mu-*` style rule."}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"icon-demo","title":"Default","source":"import Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex flex-wrap items-center gap-4\">\n  <Icon name=\"SearchIcon\"/>\n  <Icon name=\"BellIcon\"/>\n  <Icon name=\"SettingsIcon\"/>\n  <Icon name=\"TrashIcon\"/>\n  <Icon name=\"HeartIcon\"/>\n</div>","description":"Renders from the default library (`lucide`) when `library` is omitted."},{"id":"icon-libraries","title":"Libraries","source":"import Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\nimport { ICON_LIBRARIES } from \"@marko-ui/shadcn/ui/icon/icon-names.ts\";\nimport type { IconLibraryName } from \"@marko-ui/shadcn/ui/icon/icon-names.ts\";\n\nstatic const NAMES = [\"HeartIcon\", \"BellIcon\", \"SettingsIcon\", \"StarIcon\", \"HomeIcon\"];\nstatic const LIBRARIES = Object.keys(ICON_LIBRARIES) as IconLibraryName[];\n\n<div class=\"flex flex-col gap-4\">\n  <for|library| of=LIBRARIES by=(library) => library>\n    <div class=\"flex items-center gap-4\">\n      <span class=\"w-28 shrink-0 text-sm text-muted-foreground\">${ICON_LIBRARIES[library].title}</span>\n      <div class=\"flex flex-wrap items-center gap-4\">\n        <for|name| of=NAMES by=(name) => name>\n          <Icon name=name library=library/>\n        </for>\n      </div>\n    </div>\n  </for>\n</div>","description":"The same abstract `name` renders a different, authentic glyph per `library` — the `name` space (191 names) is shared across all five."},{"id":"icon-sizing","title":"Sizing & color","source":"import Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex flex-wrap items-center gap-6\">\n  <Icon name=\"StarIcon\" class=\"size-4\"/>\n  <Icon name=\"StarIcon\" class=\"size-6\"/>\n  <Icon name=\"StarIcon\" class=\"size-8\"/>\n  <Icon name=\"StarIcon\" class=\"size-6 text-primary\"/>\n  <Icon name=\"StarIcon\" class=\"size-6 text-destructive\"/>\n  <Icon name=\"StarIcon\" class=\"size-6 text-muted-foreground\"/>\n</div>","description":"Icons inherit color from `currentColor` and size from Tailwind's `size-*` utilities via `class`, same as any other SVG."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}