Element‑Plus icon 图标名称查询 和菜单 meta.icon 字段映射

Element‑Plus icon 图标名称查询 和菜单 meta.icon 字段映射你的后端菜单meta:{ icon:User }这个字符串要和 Element‑Plus 图标组件名完全一致el-iconUser //el-icon才能渲染。1、官方图标在线查看查图标名字官方地址https://element-plus.org/zh-CN/component/icon.html全部图标列表点开就能看到图标组件名称大小写敏感⚠️重点区分组件名JS 使用你 meta.icon 存这个User、Setting、Menu、Document大驼峰开头大写css 类名旧版现在不推荐el-icon-user不要存这个示例用户图标 → 组件名User→meta.icon:User设置图标 → 组件名Setting→meta.icon:Setting2、项目中如何使用Layout 侧边栏渲染菜单图标方式 A完整导入全部图标开发简单体积偏大适合学习项目main.jsimport * as ElementPlusIconsVue from element-plus/icons-vue //全局注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }注册完之后模板直接用字符串名字渲染!-- meta.icon User -- el-icon component :ismenu.meta.icon/component /el-icon:is动态组件直接传入字符串User就会渲染对应图标。所以后端 mock 菜单 meta.icon 直接填写大驼峰图标组件名例如User不要写小写、不要写el-icon-xxx。常用菜单高频图标对照表直接复制给 mock表格meta.icon 存储值 (大驼峰)图标含义Home首页User用户Setting设置Menu菜单Document文档DataBoard数据看板Tools工具Lock权限Edit编辑Delete删除Search搜索Bell通知铃铛mock 菜单示例{ path: /userManage, name: userManage, component: Layout, meta: { title: 用户管理, icon: User }, children: [...] }3、常见踩坑大小写错误user❌ 必须User✅首字母大写大驼峰。存旧版 css 类名el-icon‑user❌动态组件component :is识别不了。忘记全局注册图标控制台报错Component User is not resolved。4、局部按需导入生产推荐减小包体积不全局全部注册layout 组件按需引入script setup import { User, Home, Setting } from element-plus/icons-vue /script但是做后端动态菜单就不适合按需引入不知道后端返回什么 icon学习项目直接全局注册全部图标最简单。5、写一个小调试组件快速测试图标template div el-iconUser //el-icon el-iconSetting //el-icon /div /template页面看效果复制对应的组件名字直接填到菜单meta.icon。