{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon",
  "title": "Icon",
  "description": "lucide wrapper",
  "dependencies": [
    "lucide-react-native@^1.21.0",
    "nativewind@^4.2.6"
  ],
  "registryDependencies": [
    "@kit-native/lib-palette-context",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/ui/icon.tsx",
      "content": "import { TextClassContext } from '@/components/ui/text';\nimport { useIconStroke } from '@/lib/palette-context';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon, LucideProps } from 'lucide-react-native';\nimport { cssInterop } from 'nativewind';\nimport * as React from 'react';\n\ntype IconProps = LucideProps & {\n  as: LucideIcon;\n} & React.RefAttributes<LucideIcon>;\n\nfunction IconImpl({ as: IconComponent, ...props }: IconProps) {\n  return <IconComponent {...props} />;\n}\n\ncssInterop(IconImpl, {\n  className: {\n    target: 'style',\n    nativeStyleToProp: {\n      height: 'size',\n      width: 'size',\n    },\n  },\n});\n\n/**\n * A wrapper component for Lucide icons with Nativewind `className` support via `cssInterop`.\n *\n * This component allows you to render any Lucide icon while applying utility classes\n * using `nativewind`. It avoids the need to wrap or configure each icon individually.\n *\n * @component\n * @example\n * ```tsx\n * import { ArrowRight } from 'lucide-react-native';\n * import { Icon } from '@/registry/components/ui/icon';\n *\n * <Icon as={ArrowRight} className=\"text-red-500\" size={16} />\n * ```\n *\n * @param {LucideIcon} as - The Lucide icon component to render.\n * @param {string} className - Utility classes to style the icon using Nativewind.\n * @param {number} size - Icon size (defaults to 14).\n * @param {number} strokeWidth - Relative to Lucide's 2: the theme's icon stroke scales it (thin 1.5, bold 2.5).\n * @param {...LucideProps} ...props - Additional Lucide icon props passed to the \"as\" icon.\n */\nfunction Icon({ as: IconComponent, className, size = 14, strokeWidth = 2, ...props }: IconProps) {\n  const textClass = React.useContext(TextClassContext);\n  const stroke = useIconStroke();\n  return (\n    <IconImpl\n      as={IconComponent}\n      className={cn('text-foreground', textClass, className)}\n      size={size}\n      strokeWidth={(Number(strokeWidth) * stroke) / 2}\n      {...props}\n    />\n  );\n}\n\nexport { Icon };\n",
      "type": "registry:ui",
      "target": "components/ui/icon.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Icon"
    ],
    "api": "<Icon as={LucideIcon} size? className=\"text-…\" />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "media"
  ],
  "type": "registry:ui"
}