Element‑Plus icon 图标名称查询 & 和菜单 meta.icon 字段映射
你的后端菜单
meta:{ icon:"User" }，这个字符串要和 Element‑Plus 图标组件名完全一致，<el-icon><User /></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:"Setting"
2、项目中如何使用（Layout 侧边栏渲染菜单图标）
方式 A：完整导入全部图标（开发简单，体积偏大，适合学习项目）
main.js
import * 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 :is="menu.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-icon><User /></el-icon> <el-icon><Setting /></el-icon> </div> </template>页面看效果，复制对应的组件名字，直接填到菜单meta.icon。
