{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "icons",
  "title": "Icons",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/icons/Icon.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\n/**\n * Universal Icon component supporting multiple icon libraries:\n * - Lucide (default, via slot)\n * - Font Awesome (via class:fa-* and :class)\n * - Material Design Icons (via class:mdi-* and :class)\n * - Heroicons (via slot)\n * - Custom SVG (via src prop)\n */\nconst props = withDefaults(\n  defineProps<{\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    class?: HTMLAttributes['class']\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  }>(),\n  {\n    size: 'md',\n    inline: true,\n  },\n)\n\nconst sizeClasses = {\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\nconst rotationDeg = computed(() => {\n  if (!props.rotation) return undefined\n  return typeof props.rotation === 'string' ? parseInt(props.rotation) : props.rotation\n})\n\nconst flipClasses = computed(() => {\n  if (!props.flip) return ''\n  if (props.flip === 'horizontal') return '-scale-x-100'\n  if (props.flip === 'vertical') return '-scale-y-100'\n  if (props.flip === 'both') return '-scale-x-100 -scale-y-100'\n  return ''\n})\n</script>\n\n<template>\n  <!-- Image-based icon (Material Design, custom URLs, etc.) -->\n  <img\n    v-if=\"src\"\n    :src=\"src\"\n    :alt=\"alt || label\"\n    :class=\"cn('shrink-0 object-contain', size !== 'inherit' ? sizeClasses[size] : '', flipClasses, props.class)\"\n    :style=\"{\n      color: color,\n      transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,\n    }\"\n    :aria-label=\"ariaLabel || label\"\n    role=\"img\"\n  />\n\n  <!-- Slot-based icon (Lucide, Heroicons, inline SVG) -->\n  <span\n    v-else\n    :class=\"\n      cn(\n        'inline-flex shrink-0 items-center justify-center',\n        size !== 'inherit' ? sizeClasses[size] : '',\n        flipClasses,\n        props.class,\n      )\n    \"\n    :style=\"{\n      color: color,\n      transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,\n    }\"\n    :aria-label=\"ariaLabel || label\"\n    :role=\"label ? 'img' : undefined\"\n  >\n    <slot />\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/icons/Icon.vue"
    },
    {
      "path": "packages/registry-vue/components/icons/index.ts",
      "content": "export { default as Icon } from './Icon.vue'\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 slot\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": "~/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 copy-paste imports.",
  "categories": [
    "data-display"
  ]
}