IconSelect 图标选择器

图标选择器组件，支持搜索和选择图标，兼容 Element Plus 图标和本地 SVG 图标。

基本用法

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

<script setup lang="ts">
const icon = ref('')
</script>

使用 Element Plus 图标

选择 Element Plus 图标时，图标名称以 el-icon- 开头：

<template>
  <IconSelect v-model="iconName" />
</template>

<script setup lang="ts">
// Element Plus 图标：以 "el-icon-" 开头
const iconName = ref('el-icon-edit')
</script>

使用本地 SVG 图标

选择本地 SVG 图标时，使用 src/assets/icons 目录下的文件名（无需 .svg 后缀）：

<template>
  <IconSelect v-model="iconName" />
</template>

<script setup lang="ts">
// 本地 SVG 图标：使用 src/assets/icons 目录下的文件名
const iconName = ref('fullscreen')
</script>

表单中使用

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="菜单图标">
      <IconSelect v-model="form.icon" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
const form = reactive({
  icon: 'el-icon-menu'
})

function handleSubmit() {
  console.log('选中的图标：', form.icon)
}
</script>

Props

参数	说明	类型	默认值
modelValue	绑定值（支持 v-model）	string	''
placeholder	占位文本	string	'请选择图标'

Events

事件名	说明	回调参数
update:modelValue	值变化时触发	(value: string)

功能特性

• ✅ 图标搜索（支持关键词搜索图标）
• ✅ 双图标库（支持 Element Plus 图标和本地 SVG 图标）
• ✅ 图标预览（实时预览选中的图标）
• ✅ 双向绑定（支持 v-model）

图标类型说明

Element Plus 图标

• 格式：以 el-icon- 开头
• 示例：el-icon-edit、el-icon-delete、el-icon-search
• 来源：Element Plus 图标库
• 用法：直接选择即可，无需额外配置

本地 SVG 图标

• 格式：文件名（不含 .svg 后缀）
• 示例：fullscreen、system、user
• 来源：src/assets/icons 目录
• 用法：将 SVG 文件放入 src/assets/icons 目录即可使用

添加自定义 SVG 图标

1. 访问 iconfont 或其他图标网站
2. 下载所需的 SVG 图标文件
3. 将 SVG 文件复制到 src/assets/icons 目录
4. 在图标选择器中即可搜索和选择该图标

提示

SVG 文件命名建议使用小写字母和连字符，例如：home.svg、user-info.svg

示例

查看完整示例：src/views/demo/icon-select.vue

相关链接

• SVG 图标
• Element Plus Icon
• UnoCSS Icons