FxIcon 图标

基于 iconify 的图标组件，通过 name="前缀:图标名" 使用各图标集（Element Plus、Ant Design 等）。

Element Plus 图标

<FxIcon name="ep:home-filled" :size="24" />
<FxIcon name="ep:user" :size="24" />
<FxIcon name="ep:setting" :size="24" />
<FxIcon name="ep:search" :size="24" />

Ant Design 图标

<FxIcon name="ant-design:home-filled" :size="24" />
<FxIcon name="ant-design:user-outlined" :size="24" />
<FxIcon name="ant-design:setting-filled" :size="24" />
<FxIcon name="ant-design:search-outlined" :size="24" />

不同尺寸

<FxIcon name="ep:check" :size="16" />
<FxIcon name="ep:check" :size="24" />
<FxIcon name="ep:check" :size="32" />
<FxIcon name="ep:check" :size="48" />

颜色

通过 color 指定图标颜色，支持任意合法的颜色值（颜色字面量、@fx/styles 的 --color-* token 等）；默认 currentColor，跟随父元素文字颜色，亮暗模式自动跟随。

<FxIcon name="ep:star-filled" :size="24" color="var(--color-primary)" />
<FxIcon name="ep:star-filled" :size="24" color="var(--color-success)" />
<FxIcon name="ep:star-filled" :size="24" color="var(--color-warning)" />
<FxIcon name="ep:star-filled" :size="24" color="var(--color-danger)" />
<FxIcon name="ep:star-filled" :size="24" color="var(--color-info)" />

Props

属性	类型	默认值	说明
name	string	—	图标名，格式 前缀:图标名（如 ep:user、ant-design:home-filled）
size	number | string	'16px'	图标尺寸（px）
color	string	'currentColor'	图标颜色
customClass	string	—	自定义类名

---

FxIconPicker 图标选择器

图标选择器组件，支持搜索、按图标集（本地 SVG / Element Plus / Ant Design）分类选择，v-model 绑定图标名。

基础用法

<FxIconPicker v-model="selectedIcon" placeholder="选择图标" />
<script setup>
  import { ref } from "vue"
  const selectedIcon = ref("ep:home-filled")
</script>

尺寸

（large / default / small），默认 default。

<FxIconPicker v-model="selectedIcon" size="large" />
<FxIconPicker v-model="selectedIcon" size="default" />
<FxIconPicker v-model="selectedIcon" size="small" />
<script setup>
  import { ref } from "vue"
  const selectedIcon = ref("ep:home-filled")
</script>

清空 / 禁用 / 只读

clearable 有值时悬停触发器显现清空按钮（默认 ep:circle-close，可经 clear-icon 自定义），点击清空绑定值并派发 clear 事件；disabled 置灰不可交互，readonly 不可交互但外观不变。

<FxIconPicker v-model="clearableIcon" clearable placeholder="clearable（悬停清空）" />
<FxIconPicker model-value="ep:edit" disabled placeholder="disabled" />
<FxIconPicker model-value="ep:edit" readonly placeholder="readonly" />
<script setup>
  import { ref } from "vue"
  const clearableIcon = ref("ep:star-filled")
</script>

Props

属性	类型	默认值	说明
modelValue	string	—	绑定值，图标名（v-model）
placeholder	string	'请选择图标'	占位提示
size	'large' | 'default' | 'small'	'default'	输入框尺寸（同 FxInput）
height	number	418	弹层高度（px）
theme	IconPickerTheme | Ref | (() => IconPickerTheme)	—	主题配置（纯对象 / ref / computed / getter 函数皆可），键见下方「主题」
disabled	boolean	false	禁用（不可点击、触发器置灰）
readonly	boolean	false	只读（不可点击，外观不变灰）
clearable	boolean	false	是否显示清空按钮（有值时悬停触发器显现）
clearIcon	string | Component	'ep:circle-close'	清空按钮图标（clearable 时生效）：FxIcon 图标名字符串或组件

Events

事件	说明
update:modelValue	图标名变化时触发
clear	点击清空按钮时触发，(evt?: MouseEvent)；清空后绑定值为 ''

主题

组件走 --fip-* 主题契约：包内不引用任何外部令牌，所有视觉值都是 var(--fip-*, 字面量)——独立发包即内置中性亮色主题；外部经 theme prop 传入配置，组件根节点内联落 CSS 变量（值可直接写 var(--color-*) 等，亮暗自动跟随）。

可用键：primary / primaryLight / bg / bgHover / text / textSecondary / textPlaceholder / activeText / border / borderLight / borderHover / radius / radiusLg / inputRadius / popoverShadow / transition。

<script setup lang="ts">
import { FxIconPicker, type IconPickerTheme } from '@fx-core/icon'

// 键 → var(--color-*)：亮暗随文档站主题自动翻转
const pickerTheme: IconPickerTheme = {
  primary: 'var(--color-primary)',
  bg: 'var(--color-bg)',
  text: 'var(--color-text)',
  border: 'var(--color-border)',
}
</script>

<template>
  <FxIconPicker v-model="selectedIcon" :theme="pickerTheme" />
</template>

本文档站

已通过全局样式把 --fip-* 全量映射到 --color-* 令牌，本页示例亮暗自动跟随，无需逐个传 theme；应用侧（@fx 管理端）的映射见 frontend/web/src/constants/icon-picker-theme.ts。