vue3+Element-plus icon图标无法显示的问题(已解决)
项目场景:在使用vue3+element-puls时,默认的icon图片无法显示的问题问题描述:在使用element-plus 1.2.0-beta.3版本时,![在这里插入图片描述](https://img-blog.csdnimg.cn/2e0c4a60c82341f3a0aae98ab5479849.PNG?x-oss-process=image/watermark,type_ZHJvaWR
·
项目场景:
在使用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>
此时全部正常显示
更多推荐
所有评论(0)