Installation#
pnpm dlx shadcn@latest add @zui/iconThe CLI writes components/ui/icon.tsx in the engine's own version, installs Text and Utils, and adds
lucide-react-native and react-native-svg. It also adds the engine as nativewind@^4.2.7 or
uniwind@^1.13.0, which replaces a narrower range the app already holds.
Usage#
import { Check } from 'lucide-react-native';
import { Icon } from '@/components/ui/icon';<Icon as={Check} className="size-5 text-primary" />A size- class sets its size and a text- class its colour. Inside a Button it takes the label's colour and
the button size's icon size.
API reference#
Icon#
Takes every prop a lucide icon takes, such as size, color and strokeWidth, plus:
| Prop | Type | Default |
|---|---|---|
as | LucideIcon | required |
as is the lucide icon to draw. Its colour starts at text-foreground; the classes of the container around it
go over that, and className over both. An explicit size or color wins over a class, and a size prop or a
size- class drops the container's size.
IconClassContext#
The classes a container gives every Icon inside it that names no size of its own. Button provides it with the icon size of each of its sizes.