IconSelect 图标选择器

支持搜索选择图标，兼容 Element Plus 图标和本地 SVG 图标。在线演示

基础用法

<IconSelect v-model="icon" />

<script setup lang="ts">
// Element Plus 图标：el-icon- 前缀 + 图标名
const icon = ref('el-icon-Edit')

// 本地 SVG 图标：文件名（不含 .svg 后缀）
// const icon = ref('fullscreen')
</script>

表单集成

<el-form-item label="菜单图标">
  <IconSelect v-model="form.icon" />
</el-form-item>

图标来源

类型	格式	来源
Element Plus 图标	el-icon- 前缀 + 图标名	Element Plus 图标库
本地 SVG 图标	文件名（不含 .svg）	src/assets/icons 目录

添加自定义图标

将 SVG 文件放入 src/assets/icons 目录即可，命名建议小写字母 + 连字符（如 user-info.svg）。

Props

参数	说明	类型	默认值
modelValue	绑定值（v-model）	string	''
width	组件宽度	string	'500px'