vue3+Element-plus icon图标无法显示的问题(已解决)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
![](https://devpress.csdnimg.cn/6deffb34f7114cc1a2e1e686a67e0027.png)
·
项目场景:
在使用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>
此时全部正常显示
![]( https://profile-avatar.csdnimg.cn/default.jpg)
![](https://devpress.csdnimg.cn/7174e1ca86c447029bb12f9ec0bd281c.png)
![](https://devpress.csdnimg.cn/096f7827187446559bd7b6030eb5db38.png)
![](https://devpress.csdnimg.cn/6deffb34f7114cc1a2e1e686a67e0027.png)
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:22 天前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 2 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
所有评论(0)