vue3 Element Plus中icon图标不显示的解决方案
作者:Y猿某人
这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
在vue组件中使用了Element Plus中icon图标<el-icon>
方法想要显示图标
程序能运行但在浏览器中图标无法显示
解决办法
根据Element Plus官方文档给出的教程以及实践操作
解决办法如下:
1.安装
在终端运行下面指令
npm install --save @element-plus/icons
注意:
- Element Plus官方文档给出的指令为npm install
- @element-plus/icons-vue,但运行时终端可能会提供更正确的指令,可以都尝试运行一下看哪个可行
2.在vue文档中写入代码
你想要显示在哪个vue组件文档,就在那个文档写入如下代码:
<script > //首先是导入图标们,要用哪个就导入哪个 //例如Search就是那个放大镜的图标 import {Search,Edit,Check,Message,Star,Delete,} from "@element-plus/icons"; export default { //其次是写入components中 components: { Search, Edit, Check, Message, Star, Delete, } }; </script>
3.使用
同时在该vue组件文档中插入代码
<el-icon><Search /></el-icon>
4.效果
总结
显示成功!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。