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

<script setup lang="ts">
import { ref } from 'vue';
import { CfIcon, CfIconPicker } from '@chufix-design/vue';
import type { IconName } from '@chufix-design/icons';

const icon = ref<IconName>('activity');
</script>

<template>
  <div class="demo-stack">
    <CfIconPicker v-model="icon" searchable clearable />
    <div class="demo-preview">
      <CfIcon v-if="icon" :name="icon" />
      <span>{{ icon || '未选择' }}</span>
    </div>
  </div>
</template>

<style scoped>
.demo-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-1);
  color: var(--fg-1);
}
</style>

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

API

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).