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>

Props

属性	类型	默认值	说明
modelValue	string	—	绑定值，图标名（v-model）
placeholder	string	'请选择图标'	占位提示
size	'large' | 'default' | 'small'	'default'	输入框尺寸（同 FxInput）
height	number	418	弹层高度（px）

Events

事件	说明
update:modelValue	图标名变化时触发