{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "icon", "type": "registry:ui", "title": "Icon", "description": "lucide-react-native icon wrapper with size/tone tokens.", "registryDependencies": [ "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json" ], "dependencies": [ "lucide-react-native" ], "files": [ { "path": "registry/shared/ui/icon.tsx", "type": "registry:ui", "target": "components/ui/icon.tsx", "content": "import {\n AlertCircle,\n AlertTriangle,\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n Bell,\n Box,\n Calendar,\n Camera,\n Check,\n CheckCircle,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n ChevronUp,\n Clock,\n Copy,\n CreditCard,\n Download,\n Edit,\n ExternalLink,\n Eye,\n EyeOff,\n FileText,\n Flame,\n Grid,\n Heart,\n Home,\n Image as ImageIcon,\n Info,\n Layers,\n Layout,\n List,\n Lock,\n Mail,\n MapPin,\n Menu,\n MessageSquare,\n Minus,\n MoreHorizontal,\n MoreVertical,\n Package,\n Phone,\n Plus,\n RefreshCw,\n Search,\n Send,\n Settings,\n Share,\n ShoppingCart,\n Star,\n StarHalf,\n ThumbsDown,\n ThumbsUp,\n Trash,\n Unlock,\n Upload,\n User,\n Video,\n X,\n XCircle,\n Zap,\n type LucideIcon,\n type LucideProps,\n} from 'lucide-react-native';\nimport { View, type ViewProps } from 'react-native';\nimport { cn, useIconColor } from '@/lib/utils';\n\n/** String names resolved by `Icon`/`icon` props. Extend as needed. */\nexport const ICON_MAP = {\n star: Star,\n heart: Heart,\n check: Check,\n info: Info,\n warning: AlertTriangle,\n error: AlertCircle,\n checkCircle: CheckCircle,\n close: X,\n closeCircle: XCircle,\n menu: Menu,\n moreVertical: MoreVertical,\n moreHorizontal: MoreHorizontal,\n search: Search,\n settings: Settings,\n bell: Bell,\n home: Home,\n user: User,\n plus: Plus,\n minus: Minus,\n edit: Edit,\n trash: Trash,\n share: Share,\n download: Download,\n upload: Upload,\n refresh: RefreshCw,\n externalLink: ExternalLink,\n chevronUp: ChevronUp,\n chevronDown: ChevronDown,\n chevronLeft: ChevronLeft,\n chevronRight: ChevronRight,\n arrowUp: ArrowUp,\n arrowDown: ArrowDown,\n arrowLeft: ArrowLeft,\n arrowRight: ArrowRight,\n eye: Eye,\n eyeOff: EyeOff,\n lock: Lock,\n unlock: Unlock,\n calendar: Calendar,\n clock: Clock,\n mapPin: MapPin,\n camera: Camera,\n image: ImageIcon,\n video: Video,\n file: FileText,\n copy: Copy,\n layout: Layout,\n grid: Grid,\n list: List,\n layers: Layers,\n box: Box,\n package: Package,\n cart: ShoppingCart,\n card: CreditCard,\n mail: Mail,\n phone: Phone,\n message: MessageSquare,\n send: Send,\n zap: Zap,\n flame: Flame,\n starHalf: StarHalf,\n thumbsUp: ThumbsUp,\n thumbsDown: ThumbsDown,\n} as const;\n\nexport type IconName = keyof typeof ICON_MAP;\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type IconTone =\n | 'default'\n | 'muted'\n | 'primary'\n | 'foreground'\n | 'onPrimary'\n | 'destructive'\n | 'success'\n | 'warning';\n\nconst SIZE_MAP: Record = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n xl: 32,\n '2xl': 40,\n};\n\nexport interface IconProps\n extends Omit {\n /** Icon name from ICON_MAP, or a LucideIcon component directly. */\n icon?: IconName | LucideIcon;\n /** Alias for `icon` when passing a string name. */\n name?: IconName;\n /** Pixel size or a preset token. */\n size?: number | IconSize;\n /** Semantic color token. Ignored when `color` is set. */\n tone?: IconTone;\n /** Raw color (hex/rgb), overrides `tone`. */\n color?: string;\n /** className applied to the wrapping View. */\n className?: string;\n /** style applied to the wrapping View. */\n style?: ViewProps['style'];\n}\n\n/**\n * Standardized icon wrapper over lucide-react-native.\n * Renders by name (``), by component\n * (``), or wraps a lucide element child.\n */\nexport function Icon({\n icon,\n name,\n size = 'md',\n tone = 'default',\n color,\n className,\n style,\n strokeWidth = 2,\n ...props\n}: IconProps) {\n const resolvedSize = typeof size === 'number' ? size : SIZE_MAP[size];\n const toneColor = useIconColor(tone);\n const resolvedColor = color ?? toneColor;\n\n const ref = icon ?? name ?? 'info';\n const IconComp: LucideIcon =\n typeof ref === 'string' ? (ICON_MAP[ref as IconName] ?? Info) : ref;\n\n return (\n \n \n \n );\n}\n" } ] }