Components
Icon Picker
An icon and a colour for something, like a spending category, from a grid in a popover.
Import
import { IconPicker } from '@rinzai/zen';API reference
<IconPicker>
Pick an icon and a colour for something, e.g. a spending category: a button showing the choice opens a grid of icons and a row of colours. Icons are yours (emoji work); colours default to the chart palette. Both are radio groups, so arrow keys move through them.
| Prop | Type | Default |
|---|---|---|
iconsRequired | { value: string; label: string; icon: ReactNode; }[] | — |
labelRequiredWhat it's the icon of, e.g. "Category icon"; the button also says the current choice. | string | — |
onChangeRequired | (value: { icon: string; color?: string | undefined; }) => void | — |
valueRequired | { icon: string; color?: string | undefined; } | — |
className | string | — |
colorsDefault: ICON_COLORS, the chart palette. | IconColor[] | [
{ value: 'blue', label: 'Blue', color: 'var(--chart-1)' },
{ value: 'orange', label: 'Orange', color: 'var(--chart-2)' },
{ value: 'teal', label: 'Teal', color: 'var(--chart-3)' },
{ value: 'amber', label: 'Amber', color: 'var(--chart-4)' },
{ value: 'pink', label: 'Pink', color: 'var(--chart-5)' },
{ value: 'green', label: 'Green', color: 'var(--chart-6)' },
{ value: 'violet', label: 'Violet', color: 'var(--chart-7)' },
{ value: 'red', label: 'Red', color: 'var(--chart-8)' },
] |