vue3+Element-plus icon图标没办法显示的问题(已解决)

项目场景：

在使用vue3 element-puls时,默认的icon图片无法显示的问题

---

问题描述：

在使用element-plus 1.2.0-beta.3版本时



引入侧栏组件时,导航左侧icon图标无法显示

效果图应该是
源码如下

<el-row class="tac">
    <el-col :span="12">
      <h5>Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
 </el-row>

---

原因分析：

个人认为新版本的icon引入方式改变,之前是默认引入的,现在需要单独引入

---

解决方案：

方案一

使用过的图标单独引入并注册

<script>
    import {Location, Setting, Menu ,Document} from '@element-plus/icons'

    export default {
        components: {
            Location, Setting, Menu ,Document
        },
        name: "Aside"
    }
</script>

此时的效果为

发现menu图标仍然未成功显示,查询官网后标签名称如下

修改icon-menu为menu后还是没有成功

<el-menu-item index="2">
          <el-icon><menu/></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>

个人认为menu标签具有特殊语义,此时采用方案二

方案二

找到Icon图标选项

将选项置于Copy Svg Content

复制相应代码,此处复制Memu并插入源代码中

  <el-menu-item index="2">
                        <el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-394d1fd8=""><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"></path></svg></el-icon>
                        <span>Navigator Two</span>
                    </el-menu-item>

此时全部正常显示

这篇好文章是转载于：学新通技术网