elementPlus的图标怎么去引入？

最新推荐文章于 2024-03-03 21:28:08 发布
最新推荐文章于 2024-03-03 21:28:08 发布
阅读量396 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51357044/article/details/126214090
版权

之前呢也是一直用vue2，所以图标还是可以进行动态切换，现在呢换到了vue3，结果发现它图标是这样子的

<el-icon>
	<AddLocation />
</el-icon>

我*****这我还怎么去动态切换了
在这里插入图片描述
好了废话不多说，想要动态切换就用以下代码

// 图标名称去官网复制就可以了
<component class="fold-menu" is="图标名称" />

在这里插入图片描述
对了vue3的框架不是element-ui了更换成element-Plus
另外vue3想要用图标需要进行安装以及在main.js文件注册一下

《Vue3笔记》第10节：Vue3项目引入Element Plus图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-27 337
这篇文章基于之前的项目代码之上，介绍Vue3项目中如何引入Element Plus的图标库组件。
Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
王二红
09-08 7897
vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme
html使用element-plus中的icon
weixin_56381842的博客
07-20 544
for ([name, comp] of Object.entries(ElementPlusIconsVue)) { //显示icon用 app.component(name, comp); }
element ui Tree 插入图片
weixin_45966674的博客
03-03 593
<template> <div id="app"> <el-tree :data="deptOptions" ref="tree" default-expand-all > <span class="custom-tree-node" style="display:flex;align-items: center;" slot-sco
创建vue3项目和引入Element Plus组件库
yuyangll的博客
04-13 889
1.创建vue3项目 使用vue cli创建 在文件目录输入命令 vue create 项目名 回车后会弹出一下页面 用方向盘上下键移动选择第一个【vue3】后回车 随机创建项目 跳转到目录下输入 npm run serve 就项目跑起来 2 引入Element Plus Element Plus是基于 Vue 3，面向设计师和开发者的组件库 在终端输入 安装element-plus npm install --save element-plus 安装...
element plus 引入icon
qq_42949209的博客
04-29 5931
vue升级到3版本后，引入的element 就是element plus了 不管是从官方文档还是自己使用过程中突然发现element plus引入icon是需要单独去引用的，其实说实话有点鸡肋，不明白为什么单独引用。 废话不多说，上解决办法 1、全局引入 main.js 引入 import * as ElIcons from "@element-plus/icons-vue"; for (const iconName in ElIcons) { vue.component(iconName,
element-plus使用icon图标
m0_60067716的博客
04-06 2664
element-plus使用icon图标
vue3引入elementplus图标都有哪些
最新发布
12-30
### 如何在 Vue3 中引入 Element Plus 图标 #### 方法一：全局注册图标组件 为了使项目中的所有地方都能使用到 `Element Plus` 的图标，可以在项目的入口文件中进行全局注册。通过遍历 `ELIcons` 对象来实现这一点...
Vue3+ElementPlus项目使用iconfont阿里图标
qq_45438471的博客
09-11 5747
回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。   那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
elementplus图标全局注册
01-07
要实现elementplus图标的全局注册，首先需要在项目中安装elementplus组件库，并在main.js文件中进行全局注册。 在main.js文件中，首先引入elementplus的样式文件和组件库。然后使用Vue.use()方法全局注册...
Vue ElementUI图片引入注意事项
Trainer2107的博客
10-03 237
【代码】Vue ElementUI图片引入注意事项。
21.vue3加载Element-plus的字体图标
快乐的大大大飞猪
09-24 726
不仅仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用。
新版element-plus图标全局导入及在input标签内部插入图标
qq_41961383的博客
04-27 3406
新版element-plus图标全局导入 首先安装新版图标库 npm install @element-plus/icons-vue 其次在全局配置main.js里面添加以下代码 // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons-vue' const app=createApp(App) // 统一注册el-icon图标 for(let iconName in ElIconModules){ app.compo
element-ui如何在表格中插入图片
热门推荐
白小白的小白的博客
06-20 2万+
第一种： <el-table-column label="精品图片"> <template slot-scope="scope"> <el-popover placement="top-start" title="" trigger="hover"> <img :src="scope.row.product.cover" alt="" style="width: 150px;height: 150
vue项目+element-ui 走马灯添加图片、图片自适应
qq_49097495的博客
07-06 3390
/ 通过浏览器宽度(图片宽度)计算高度。//imagebox是assets下一个放图片的文件夹。// 窗口大小发生改变时,调用一次。--动态将图片轮播图的容器高度设置成与图片一致-->// 首次加载时,需要调用一次。/*设置图片宽度和浏览器宽度一致*/
vue项目引入element-plus
JiuMeilove的博客
03-03 2504
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全部解决。Element Plus 有那些升级？Element Plus 使用 Vue 3 与 TypeScript开发，提供完整的类型定义文件，使用 Composition API 简化逻辑，降低耦合。
#html直接引用vue和element-ui的方法
Daydreame_r的博客
02-14 3794
html直接引用vue和element-ui的方法。本地引入element-ui，图标不显示不展示的问题。
vue项目引入Element Plus
qq_67983277的博客
11-14 2781
vue项目引入Element Plus
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 1万+
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙子cms

node+express扫码获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值