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。