开发预览更新于 2026-05-10

IconPicker 图标选择

从内置图标集中搜索并选择图标，适合菜单配置、仪表盘卡片、低代码属性面板。

基础用法

CfIconPicker 直接读取 @chufix-design/icons 的类型化图标清单，选中的值就是 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>

<script setup>
import { ref } from 'vue';
import { CfIcon, CfIconPicker } from '@chufix-design/vue';

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} />

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

API

属性	类型	默认值	说明
`value` / `modelValue`	`IconName`	`—`	当前图标名
`placeholder`	`string`	`选择图标`	空值占位
`searchable`	`boolean`	`true`	显示搜索输入
`clearable`	`boolean`	`true`	显示清空按钮
`disabled`	`boolean`	`false`	禁用
`size`	`sm / md / lg`	`md`	尺寸

事件：Vue update:modelValue / change(value)，React onChange(value)。