Preview Updated 2026-05-10

IconPicker

Search and select from the built-in icon set for menu settings, dashboards, and property panels.

Basic Usage

CfIconPicker reads the typed icon list from @chufix-design/icons. The selected value is an IconName.

activity

src/App.vue vue

<CfIconPicker v-model="icon" searchable clearable />

src/App.tsx tsx

<CfIconPicker value={icon} searchable clearable onChange={setIcon} />

Prop	Type	Default	Description
`value` / `modelValue`	`IconName`	`—`	Current icon name
`placeholder`	`string`	`选择图标`	Empty placeholder
`searchable`	`boolean`	`true`	Show search input
`clearable`	`boolean`	`true`	Show clear button
`disabled`	`boolean`	`false`	Disable the control
`size`	`sm / md / lg`	`md`	Size

Events: Vue update:modelValue / change(value), React onChange(value).