@element-plus/icons-vue使用过程中，结合el-icon使用svg图标不生效，但单独使用svg图标生效

最新推荐文章于 2024-07-18 23:37:19 发布
最新推荐文章于 2024-07-18 23:37:19 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumisu666/article/details/124137048
版权

Element Plus 全局注册 SVG图标 版本更新 问题解决
关键词由CSDN通过智能技术生成

我的情况：
在main.js 中使用了全局注册icon
在这里插入图片描述

在页面中使用图标时，发现：结合el-icon使用svg图标不生效，但单独使用svg图标生效
（在main.js中全局注册了图标之后，再到页面中使用就不需要再次引入了，直接使用就行）
在这里插入图片描述
解决办法：更新 element-plus的版本。我之前的版本是1.0.2。更新到2.1.9版本就ok了！
在这里插入图片描述

真的困扰了好久，搜了好多百度。。。哎。硬是没想到就是版本的问题

苏米素
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-Plus从font-icon迁移至SVG-icon
Ziuc的博客
06-13 655
element-plus
vue-tabler-icons:完全可定制的免费SVG图标制作为Vue组件
04-28
Tabler图标作为Vue组件 预览图标 </p> 安装 yarn add vue-tabler-icons # or npm i vue-tabler-icons 用法 < script > // MyComponent.vue import { BoldIcon } from 'vue-tabler-icons' ; export default...
在Vue3中使用Element Plus时 el-icon无法显示的问题
没刮胡子的程序员专栏
11-15 1万+
问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon>&
Vue 3项目安装Element-Plus
最新发布
洛*璃的博客
07-18 1532
是一个基于的现代前端UI框架，它旨在提升开发体验，并为开发者提供高效、优雅的组件。如果你正在使用进行项目开发，那么安装和集成是一个不错的选择。在本文中，博主将详细介绍如何在项目中安装。
【已解决】Vue3+Element-plus中icon图标不显示的问题
慢热型网友的博客
06-27 5316
今天博主正在学习Springboot+Vue的后台管理项目，对着B站的教程视频在模仿着敲，发现和up主的代码一样但是图标 不 显 示！ 在摸索了近半个小时之后，发现新版的Element Plus在进行图标引入时需要按需引入官网：https://element-plus.gitee.io/zh-CN/ 图标教程：https://element-plus.gitee.io/zh-CN/component/icon.html 前面的安装以及注册所有图标在这里就不多描述了，直接放上代码...
使用element-plus插件icon组件SVG 图标不显示解决方案
MscdnTjc的博客
11-04 4546
最近在做vue3中项目的时候，结合element-plus使用icon组件中的SVG图标组件的时候，按照文档提示显示不出来，通过在git文档库踩坑发现，可以这么操作使用。 1.先安装组件 npm install @element-plus/icons 2.注册icon图标名称 components:{ Aim, //注册图标组件名称 }, 3.导入icon图标 import {Aim} from '@element-plus/icons' //图标名称要大写
vue3引用element-plus图标失效
m0_60689237的博客
07-08 1066
如何使用element-plus的图标
Vue3 icons 图标无效
zhang2383906154的博客
08-28 709
需要在账号/密码处加上icon图标，但是引用完element-plus/icons之后，还是不行，不显示icon图标。后面发现，当前版本的emement-plus的icon图标不能直接使用了。
vue-feather-icon-set:使用SVG参考为Vue优化的Feather图标集
05-01
使用SVG参考为Vue优化的图标集 :rocket: 安装 npm i vue-feather-icon-set :woman::school: 用法 将IconLayer放在应用程序的顶部。 IconLayer必须是顶层的，高于任何图标的用法。 只要在使用任何图标之前就可以将...
ant-design-icons：:white_medium_star:Ant Design SVG图标
01-31
:white_medium_star: 蚂蚁设计SVG图标的抽象树。配套香草： React： React Native： 角度： Vue： 贡献指南贡献指南@ ant-design / icons-svg：｜执照
vue-sample-svg-icons：关于如何在Vue.js应用程序中使用SVG图标的观点很明确的示例
02-06
Vue.js的SVG图标用法示例一个演示，展示了我希望在Vue.js中设置SVG图标系统的方式。 您可以观看。 您不必这样做，这是一个自以为是的例子。 为什么在以这种方式设置它的更多详细信息。构建设置# install ...
v-svg-icons-website-server:VueJS的SVG图标
05-25
下载后，v-svg-icons即可在您的vue.js应用程序中使用 用法 将V-svg-icons组件导出到main.js文件 import icons from "v-svg-icons" ; 用您想要的任何名称注册v-svg-icons组件 Vue . component ( "icon" , icons ) ...
iconfont 图标不生效
DRNB666的博客
03-24 1493
在项目设置中，将前缀取消然后正常iconfont (类名)使用即可
el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
Alloom的博客
08-05 3万+
2021.8.5 Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。 文档：组件 | Element (element-plus.org) 注意：当前图标只适用于vue3。 首先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版...
Vue3+Element-plus icon图标不展示问题_vue3引入icon页面不显示(1)
2401_84435700的博客
05-16 478
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
vue element Icon图标没显示
fang5211的博客
03-02 1039
vue element 图标没显示
【Element-UI】解决el-icon图标显示不出来的问题
热门推荐
AXIMI的博客
04-28 8万+
element-ui 图标icon的使用详见官网： https://element.eleme.cn/#/en-US/component/icon 问题背景： vue框架中使用element-ui，我的vue工程是使用脚手架创建的，是个vue webpack项目。 遇到的问题是： 在vue中加入elment-ui中的图标，但是页面上没有显示。页面部分代码为： <el-menu-item i...
Element-ui关于el-icon无法正常显示的问题（已解决）
Astronaut224的博客
10-27 7330
在使用element-ui组件库的时候，使用自带的图标不显示，查了好多篇博客，都说是element-ui的版本老了，在package.json中修改版本重新安装就行，但是我的情况不是这样。
Vue项目中element-plus图标失效的一种解决办法
walkertc的博客
03-19 1803
引入官网的配置文件后，icon仍然不能正常显示，解决办法是在对应的vue文件中映入需要的icon图标即可。这个图标就需要做如下配置。
vue中使用存储地址是./node_modules/gc-starter-ui-plus/packages/assets/icons下的svg图标
07-27
在Vue项目中使用存储地址为`./node_modules/gc-starter-ui-plus/packages/assets/icons`下的SVG图标，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了`gc-starter-ui-plus`这个包。你可以在项目的`package...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值