{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icons",
  "title": "Icons",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/icons/icons.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Universal Icon component supporting multiple icon libraries:\n * - Lucide (default, via children)\n * - Font Awesome (via className with fa-* classes)\n * - Material Design Icons (via className with mdi-* classes)\n * - Heroicons (via children)\n * - Custom SVG (via src prop)\n */\nexport interface IconProps {\n  // Size\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'\n  // Color\n  color?: string\n  // Custom class for icon libraries (fa-, mdi-, etc.)\n  className?: string\n  // For img-based icons\n  src?: string\n  alt?: string\n  // Rotation/flip\n  rotation?: number | string\n  flip?: 'horizontal' | 'vertical' | 'both'\n  // A11y\n  label?: string\n  ariaLabel?: string\n  // Style\n  inline?: boolean\n  // Slot-based icon (Lucide, Heroicons, inline SVG)\n  children?: React.ReactNode\n}\n\nconst sizeClasses: Record<NonNullable<IconProps['size']>, 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\nfunction Icon({\n  size = 'md',\n  color,\n  className,\n  src,\n  alt,\n  rotation,\n  flip,\n  label,\n  ariaLabel,\n  inline = true,\n  children,\n}: IconProps) {\n  const rotationDeg = rotation ? (typeof rotation === 'string' ? parseInt(rotation) : rotation) : undefined\n\n  const flipClasses =\n    flip === 'horizontal'\n      ? '-scale-x-100'\n      : flip === 'vertical'\n        ? '-scale-y-100'\n        : flip === 'both'\n          ? '-scale-x-100 -scale-y-100'\n          : ''\n\n  // Image-based icon (Material Design, custom URLs, etc.)\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt || label}\n        className={cn('shrink-0 object-contain', size !== 'inherit' ? sizeClasses[size] : '', flipClasses, className)}\n        style={{\n          color,\n          transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,\n        }}\n        aria-label={ariaLabel || label}\n        role=\"img\"\n      />\n    )\n  }\n\n  // Slot-based icon (Lucide, Heroicons, inline SVG)\n  return (\n    <span\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center',\n        size !== 'inherit' ? sizeClasses[size] : '',\n        flipClasses,\n        className,\n      )}\n      style={{\n        color,\n        transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,\n      }}\n      aria-label={ariaLabel || label}\n      role={label ? 'img' : undefined}\n    >\n      {children}\n    </span>\n  )\n}\n\n// Icon library class prefixes for reference:\n// Font Awesome: 'fa-solid', 'fa-regular', 'fa-brands', 'fa-*'\n// Material Design: 'mdi mdi-*'\n// Heroicons: already SVG-based, use children\n\n// Helper function to generate Font Awesome class\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// Helper function to generate Material Design class\nexport function mdiClass(iconName: string): string {\n  return `mdi mdi-${iconName}`\n}\n\nexport { Icon }\n",
      "type": "registry:ui",
      "target": "~/components/ui/icons/icons.tsx"
    },
    {
      "path": "packages/registry-react/components/icons/index.ts",
      "content": "export { Icon, faClass, mdiClass, type IconProps } from './icons'\n",
      "type": "registry:ui",
      "target": "~/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 copy-paste imports.",
  "categories": [
    "data-display"
  ]
}