{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "icons",
  "title": "Icons",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/icons/Icon.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'\n\n  /**\n   * Universal Icon component supporting multiple icon libraries:\n   * - Lucide (default, via children)\n   * - Font Awesome (via class:fa-* and class)\n   * - Material Design Icons (via class:mdi-* and class)\n   * - Heroicons (via children)\n   * - Custom SVG (via src prop)\n   */\n  export interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n    size?: IconSize\n    color?: string\n    /** For img-based icons. */\n    src?: string\n    alt?: string\n    rotation?: number | string\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** Accessible label. */\n    label?: string\n    ariaLabel?: string\n    inline?: boolean\n    children?: Snippet\n  }\n\n  const sizeClasses: 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</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    size = 'md',\n    color,\n    src,\n    alt,\n    rotation,\n    flip,\n    label,\n    ariaLabel,\n    inline = true,\n    children,\n    ...restProps\n  }: IconProps = $props()\n\n  const rotationDeg = $derived(\n    !rotation ? undefined : typeof rotation === 'string' ? parseInt(rotation) : rotation,\n  )\n\n  const flipClasses = $derived(\n    !flip ? '' : flip === 'horizontal' ? '-scale-x-100' : flip === 'vertical' ? '-scale-y-100' : '-scale-x-100 -scale-y-100',\n  )\n\n  const styleValue = $derived.by(() => {\n    const parts: string[] = []\n    if (color) parts.push(`color: ${color}`)\n    if (rotationDeg) parts.push(`transform: rotate(${rotationDeg}deg)`)\n    return parts.length ? parts.join('; ') : undefined\n  })\n\n  const imgAlt = $derived(alt || label || '')\n  const imgLabel = $derived(ariaLabel || label || undefined)\n</script>\n\n{#if src}\n  <!-- Image-based icon (Material Design, custom URLs, etc.) -->\n  <img\n    data-uipkge\n    data-slot=\"icon\"\n    {...restProps}\n    {src}\n    alt={imgAlt}\n    class={cn(\n      'shrink-0 object-contain',\n      inline ? 'inline-block' : 'block',\n      size !== 'inherit' ? sizeClasses[size] : '',\n      flipClasses,\n      className,\n    )}\n    style={styleValue}\n    aria-label={imgLabel}\n    role=\"img\"\n  />\n{:else}\n  <!-- Snippet-based icon (Lucide, Heroicons, inline SVG) -->\n  <span\n    data-uipkge\n    data-slot=\"icon\"\n    {...restProps}\n    class={cn(\n      'shrink-0 items-center justify-center',\n      inline ? 'inline-flex' : 'flex',\n      size !== 'inherit' ? sizeClasses[size] : '',\n      flipClasses,\n      className,\n    )}\n    style={styleValue}\n    aria-label={imgLabel}\n    role={ariaLabel || label ? 'img' : undefined}\n    aria-hidden={!(ariaLabel || label) ? 'true' : undefined}\n  >\n    {@render children?.()}\n  </span>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/icons/Icon.svelte"
    },
    {
      "path": "packages/registry-svelte/components/icons/index.ts",
      "content": "export { default as Icon, type IconProps, type IconSize } from './Icon.svelte'\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",
      "type": "registry:ui",
      "target": "~/src/lib/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"
  ]
}