在Nuxt 3中如何为Element Plus的el-menu-item使用自定义菜单图标？

下面提供几种可行的方案，帮你实现用自定义SVG图标替换Element Plus默认图标：

方案一：将SVG封装为Vue组件直接使用 #

这是最直接的方式，适合单个或少量自定义图标：

1. 在项目的components目录下创建MySettingIcon.vue文件，将你的SVG代码写入模板：

<template>
  <!-- 替换为你的SVG代码，记得保留viewBox和currentColor确保样式兼容 -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.39-1.08-.7-1.66-.94l-.38-2.65c-.03-.24-.24-.42-.48-.42h-4c-.24 0-.45.18-.48.42l-.38 2.65c-.58.24-1.14.55-1.66.94l-2.49-1c-.22-.08-.49 0-.61.22l-2 3.46c-.12.22-.07.49.12.64l2.11 1.65c-.04.32-.07.64-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.39 1.08.7 1.66.94l.38 2.65c.03.24.24.42.48.42h4c.24 0 .45-.18.48-.42l.38-2.65c.58-.24 1.14-.55 1.66-.94l2.49 1c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
  </svg>
</template>

2. 在需要使用的页面/组件中导入并使用：

<script setup>
import MySettingIcon from '~/components/MySettingIcon.vue'
</script>

<template>
  <el-menu-item index="/">
    <el-icon><MySettingIcon /></el-icon>
    Setting
  </el-menu-item>
</template>

方案二：全局自动注册SVG图标（多图标场景） #

如果有大量自定义SVG图标，推荐用unplugin-icons实现自动导入：

1. 安装依赖：

npm install unplugin-icons @iconify/json

2. 在nuxt.config.ts中配置模块：

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt',
    'unplugin-icons/nuxt'
  ],
  icons: {
    compiler: 'vue3',
    autoInstall: true
  }
})

3. 将你的SVG文件放入assets/icons目录（比如assets/icons/MySettingIcon.svg），之后就可以直接在模板中使用：

<template>
  <el-menu-item index="/">
    <el-icon><i-my-setting-icon /></el-icon>
    Setting
  </el-menu-item>
</template>

组件名会根据文件名自动转换为短横线命名格式，也可以通过配置自定义命名规则。

方案三：直接引用SVG文件（快速临时方案） #

无需封装组件，直接用img标签引用SVG文件：

<template>
  <el-menu-item index="/">
    <el-icon>
      <img src="~/assets/icons/setting.svg" alt="设置图标" class="custom-icon" />
    </el-icon>
    Setting
  </el-menu-item>
</template>

<style scoped>
.custom-icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 继承el-icon的颜色 */
}
</style>

注意事项 #

• 确保SVG文件路径正确，Nuxt中~/指向项目根目录，assets下的文件需正确引用。
• SVG文件必须包含viewBox属性，否则可能显示变形。
• 若需要图标颜色跟随Element Plus主题，需给SVG设置fill="currentColor"。

内容的提问来源于stack exchange，提问作者Kishan Bhensadadiya