图标选择器组件

概述

ZqIconPicker 是一个图标选择器组件，支持从 Iconify 图标库中选择图标，提供搜索、分页和预览功能。

组件路径：web/apps/web-ele/src/components/zq-form/zq-icon-picker/

组件名称：ZqIconPicker

功能特性

• 支持多种图标集（ant-design、svg 等）
• 图标搜索过滤
• 分页显示
• 图标预览
• 自动获取图标集数据

Props

属性	类型	默认值	说明
modelValue	string	''	选中的图标名称
prefix	string	'ant-design'	图标集前缀
pageSize	number	54	每页显示数量
icons	string[]	[]	自定义图标列表
iconClass	string	'size-4'	图标样式类
autoFetchApi	boolean	true	是否自动获取图标集数据
dialogTitle	string	-	弹窗标题
dialogWidth	number | string	'600px'	弹窗宽度
disabled	boolean	false	是否禁用
placeholder	string	-	占位符

Events

事件	参数	说明
update:modelValue	string	值更新
change	string	选中图标变化

Expose 方法

方法	参数	说明
openDialog	-	打开图标选择弹窗

使用示例

基本用法

<template>
  <ZqIconPicker v-model="icon" />
</template>

<script setup>
import { ref } from 'vue';

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

指定图标集

<template>
  <ZqIconPicker
    v-model="icon"
    prefix="lucide"
    :page-size="48"
  />
</template>

自定义图标列表

<template>
  <ZqIconPicker
    v-model="icon"
    :icons="['icon-home', 'icon-user', 'icon-settings']"
    :auto-fetch-api="false"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 icon-picker 类型的表单项使用：

{
  "type": "icon-picker",
  "field": "icon",
  "label": "图标",
  "props": {
    "prefix": "ant-design",
    "pageSize": 54,
    "placeholder": "请选择图标"
  }
}

支持的图标集

• ant-design - Ant Design 图标
• lucide - Lucide 图标
• svg - 本地 SVG 图标
• 其他 Iconify 支持的图标集

典型应用场景

• 菜单配置：为菜单项选择图标
• 按钮配置：为按钮选择图标
• 卡片配置：为卡片选择图标
• 分类标识：为分类选择标识图标