{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon",
  "type": "registry:ui",
  "title": "Icon",
  "description": "Renders any SVG icon at a type-scale size with the `--icon-stroke` weight. Decorative by default (hidden from screen readers); pass `label` when the icon carries meaning on its own.",
  "dependencies": [
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/icon.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nexport const iconVariants = tv({\n  base: \"inline-block shrink-0 align-[-0.125em] [stroke-width:var(--icon-stroke)]\",\n  variants: {\n    size: {\n      xs: \"size-3\",\n      sm: \"size-3.5\",\n      md: \"size-4\",\n      lg: \"size-5\",\n      xl: \"size-6\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, \"ref\">, VariantProps<typeof iconVariants> {\n  /** The icon component to render, e.g. `Search` from lucide-react. Any SVG component works. */\n  as: React.ElementType;\n  /** Makes the icon meaningful: read as an image with this name. Leave it out for decorative icons. */\n  label?: string;\n}\n\n/**\n * Renders any SVG icon at a type-scale size with the `--icon-stroke` weight. Decorative by\n * default (hidden from screen readers); pass `label` when the icon carries meaning on its own.\n *\n *   import { Search } from \"lucide-react\";\n *   <Icon as={Search} />                      // decorative, next to text\n *   <Icon as={Search} label=\"Search\" />       // meaningful on its own\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(({ as: Comp, label, size, className, style, strokeWidth, ...props }, ref) => (\n  <Comp\n    ref={ref}\n    className={cn(iconVariants({ size }), className)}\n    style={strokeWidth === undefined ? style : { strokeWidth, ...style }}\n    focusable=\"false\"\n    {...(label ? { role: \"img\", \"aria-label\": label } : { \"aria-hidden\": true })}\n    {...props}\n  />\n));\nIcon.displayName = \"Icon\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/icon",
  "meta": {
    "hash": "1684d155ccae7855",
    "source": "packages/react/src/components/icon.tsx",
    "exports": [
      "iconVariants",
      "IconProps",
      "Icon"
    ],
    "props": {
      "Icon": {
        "extends": "Omit<React.SVGProps<SVGSVGElement>, \"ref\">, VariantProps<typeof iconVariants>",
        "props": [
          {
            "name": "as",
            "optional": false,
            "type": "React.ElementType",
            "description": "The icon component to render, e.g. `Search` from lucide-react. Any SVG component works."
          },
          {
            "name": "label",
            "optional": true,
            "type": "string",
            "description": "Makes the icon meaningful: read as an image with this name. Leave it out for decorative icons."
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "size": [
          "xs",
          "sm",
          "md",
          "lg",
          "xl"
        ]
      },
      "defaultVariants": {
        "size": "md"
      }
    },
    "usage": "import { Search } from \"lucide-react\";\n<Icon as={Search} />                      // decorative, next to text\n<Icon as={Search} label=\"Search\" />       // meaningful on its own",
    "docsUrl": "https://junco.madebytobi.com/docs/components/icon"
  }
}