{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "icons",
  "title": "Icons",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/icons/icons.component.ts",
      "content": "import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'\nexport type IconFlip = 'horizontal' | 'vertical' | 'both'\n\nconst SIZE_CLASSES: Record<IconSize, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-8',\n  '2xl': 'size-12',\n  inherit: 'size-full',\n}\n\n/** Generate a Font Awesome class string. */\nexport function faClass(iconName: string, style: 'solid' | 'regular' | 'brands' = 'solid'): string {\n  const prefix = style === 'brands' ? 'fab' : style === 'solid' ? 'fas' : 'far'\n  return `${prefix} fa-${iconName}`\n}\n\n/** Generate a Material Design Icons class string. */\nexport function mdiClass(iconName: string): string {\n  return `mdi mdi-${iconName}`\n}\n\n/**\n * Universal icon wrapper (React `Icon`): Lucide / Heroicons / inline svg via content projection,\n * Font Awesome / MDI via `class`, image icons via `src`. In `src` mode React renders the <img>\n * itself, so the `<ui-icon>` host becomes `display: contents` and the <img> carries the size,\n * flip, color, rotation and a11y attributes.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-icon, [ui-icon]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': 'src ? null : \"\"',\n    '[attr.data-slot]': 'src ? null : \"icon\"',\n    '[attr.role]': '!src && accessibleName ? \"img\" : null',\n    '[attr.aria-label]': 'src ? null : accessibleName || null',\n    '[attr.aria-hidden]': '!src && !accessibleName ? \"true\" : null',\n    '[style.color]': 'src ? null : color',\n    '[style.transform]': 'src ? null : rotationTransform',\n    '[class]': 'src ? \"contents\" : hostClass',\n  },\n  template: `\n    @if (src) {\n      <img\n        data-uipkge=\"\"\n        data-slot=\"icon\"\n        [src]=\"src\"\n        [alt]=\"alt || label || ''\"\n        [class]=\"imgClass\"\n        [style.color]=\"color\"\n        [style.transform]=\"rotationTransform\"\n        [attr.aria-label]=\"accessibleName || null\"\n        role=\"img\"\n      />\n    } @else {\n      <ng-content />\n    }\n  `,\n})\nexport class UiIconComponent {\n  @Input() size: IconSize = 'md'\n  @Input() color?: string\n  @Input('class') className?: string\n  @Input() src?: string\n  @Input() alt?: string\n  @Input() rotation?: number | string\n  @Input() flip?: IconFlip\n  @Input() label?: string\n  @Input() ariaLabel?: string\n  @Input({ transform: booleanAttribute }) inline = true\n\n  get accessibleName(): string | undefined {\n    return this.ariaLabel || this.label\n  }\n\n  get rotationTransform(): string | null {\n    const deg = this.rotation\n      ? typeof this.rotation === 'string'\n        ? parseInt(this.rotation)\n        : this.rotation\n      : undefined\n    return deg ? `rotate(${deg}deg)` : null\n  }\n\n  get flipClass(): string {\n    if (this.flip === 'horizontal') return '-scale-x-100'\n    if (this.flip === 'vertical') return '-scale-y-100'\n    if (this.flip === 'both') return '-scale-x-100 -scale-y-100'\n    return ''\n  }\n\n  get hostClass(): string {\n    return cn(\n      'shrink-0 items-center justify-center',\n      this.inline ? 'inline-flex' : 'flex',\n      this.size !== 'inherit' ? SIZE_CLASSES[this.size] : '',\n      this.flipClass,\n      this.className,\n    )\n  }\n\n  get imgClass(): string {\n    return cn(\n      'shrink-0 object-contain',\n      this.inline ? 'inline-block' : 'block',\n      this.size !== 'inherit' ? SIZE_CLASSES[this.size] : '',\n      this.flipClass,\n      this.className,\n    )\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/icons/icons.component.ts"
    },
    {
      "path": "packages/registry-angular/components/icons/index.ts",
      "content": "export { UiIconComponent, faClass, mdiClass } from './icons.component'\nexport type { IconFlip, IconSize } from './icons.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/icons/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and import recipes.",
  "categories": [
    "data-display"
  ]
}