vue3 使用element-plus动态渲染Icon图标

最新推荐文章于 2025-02-08 10:55:56 发布

coder-涛

最新推荐文章于 2025-02-08 10:55:56 发布

阅读量2.6k

点赞数 1

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_55660255/article/details/130991476

版权

博客介绍了Element-Plus和Element-UI中使用图标时的不同。Element-UI可直接绑定class动态渲染图标，而Element-Plus因使用svg图标，不能用此方式。在Element-Plus中需先给图标对象/数组，使用时在特定标签里传:is动态绑定图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-plus中使用icon图标与elemnet-ui中不一样

element-ui中可以直接绑定:class='el-icon-deit‘动态的渲染出自己想要的图标

<el-icon :size="20">
    <Edit />
  </el-icon>

element-plus中由于使用svg图标所以不能用element-ui的方式直接动态的绑定class

element-plus中动态绑定icon图标先要给一个你需要得图标的对象/数组

使用图标时在<el-icon></el-icon>中的<component :is="icons[item.id]" />传:is='icons[item.id]'就可以动态绑定自己想要得图标

以上纯属个人观点可以借鉴学习，我也在不断学习

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coder-涛

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - Element Plus 动态渲染＜el-icon＞图标组件，根据三元表达式条件、v-if 指令动态判断图标并渲染图标组件， v-for 循环动态图标组件（提供详细示例代码教程）

王二红

09-08

6260

vue3viteelementplusUI组件库，el-icon图标组件，vue3elementplus如何动态渲染图标icon组件，vue3之element-plus的动态图标，Vue3+TS使用element-plus动态Icon图标，vue3element组件库动态加载el-icon图标，elementplus怎么v-for渲染图标，elementplus的图标组件怎么使用三元表达式判断，用v-if根据条件渲染el-icon图标组件，vue3动态渲染Element-plus

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，

每天都要努力学习哦~~

01-25

347

官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的Svg。最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。

1 条评论您还未登录，请先登录后发表或查看评论

Element-Plus-动态渲染 ICON

Sunny_boy

05-17

1342

【代码】Element-Plus-动态渲染 ICON。

「vue3-element-admin」使用 @unocss/preset-icons 加载本地 SVG 图标替代 vite-plugin-svg-icons

最新发布

有来技术

02-08

1174

vite-plugin-svg-icons 停止维护，部分依赖过时，vue3-element-admin 迁移至 @unocss/preset-icons，优化本地 SVG 图标管理，提升兼容性和长期可维护性。

vue3 elementplus el-Icon 动态渲染点击切换icon图标组件

qq_45864922的博客

01-08

4588

vue3 elementplus Icon 动态渲染切换icon组件

关于element-plus中动态渲染icon的方法

qq_39287986的博客

11-29

1286

【代码】关于element-plus中动态渲染icon的方法。

elementPlusicon动态的渲染(菜单渲染)

huang_hai_an的博客

08-17

318

elementPlusicon动态的渲染(菜单渲染)

elment-plus 动态使用icon

weixin_66501371的博客

03-17

398

elment-plus 动态使用icon

Vue3中element-plus全局使用Icon图标

m0_67393342的博客

03-09

2842

Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app

利用 vite 初始化一个vue3项目实现element-plus以及element-icon页面渲染

guinue的博客

04-09

471

原文改编自：http://t.csdn.cn/W0Vtl。前人栽树，后人乘凉。

Vue3 element-plus动态Icon图标解决方法

su6666v的博客

04-06

2377

然后在main.js或者mian.ts中导入并设置全局变量。至于图标名称，则是官网上列举的这些。

Element Plus动态Icon的使用方法

PKQ1023的博客

10-31

4789

Vue + Element Plus 更新后动态icon的使用方式

vue3+ts中使用自动导入图标插件后想动态渲染图标

balder_girl的博客

12-03

1116

做侧边栏的折叠效果时候需要根据settingStore.collapsed的值动态渲染图标，想用的是element-plus中的这两个图标。如果想使用element-plus里面的图标，前缀要这样写（i+图标集名ep+elementplus中的图标名），然后ctrl+左键，就能进入components.d.ts这个存放组件的文件，这里就有路径，复制过来即可。在vue3+ts中，用了自动导入图标插件unplugin-icons后，想动态渲染图标。：根据路由的meta值，动态渲染icon图标，生成动态菜单。

Vue3动态引入Element-plus icon图标

a1071626267的博客

12-14

2862

Vue3动态引入Element-plus icon图标

vue3 动态加载el-icon图标

热门推荐

周家大小姐

05-28

1万+

安装插件 cnpm install @element-plus/icons main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { store, key } from './store/index' import ElementPlus from 'element-plus' import 'element-plus/dis

Vue-动态渲染样式

zhangxy的博客

11-23

2856

在Vue项目中页面的element穿梭框组件中，要对每一条数据是否标记做出样式的区分，写小程序时一直用的三元表达式觉得判断很简洁，便看文档找到了Vue动态设置样式的方法：效果图： <div class="allList"> <div v-for="(item,index) in allData" :class="[i...

Element Plus如何动态切换icon

weixin_54048131的博客

04-06

1431

vue3+ElementPlus-【动态绑定icon】

weixin_55049839的博客

07-31

766

官网找到icon图标使用说明，并安装。2. 把需要用到的图标正确导入。4.在template使用。

vue3使用element-plus图标动态生成图标

01-19

### 动态生成Element Plus图标的方法在Vue3项目中实现动态生成Element Plus图标的用法涉及几个关键步骤。为了确保图标能够被正确加载并显示，需遵循特定的方式引入和注册这些组件。 #### 安装依赖库首先确认已经安装了`element-plus`以及其图标包： ```bash npm install element-plus @element-plus/icons-vue ``` #### 导入所需图标对于按需导入单个图标的情况，在脚本部分通过ES6语法单独引入所需的图标组件[^2]： ```javascript import { Star as IconStar, Search as IconSearch } from '@element-plus/icons-vue'; ``` 接着可以在模板里像常规组件一样使用它们： ```html <template> <div>  <icon-star />  <component :is="currentIcon"></component> </div> </template> <script setup> // 假设 currentIcon 是响应式的 prop 或 data 属性 const props = defineProps({ currentIcon: String, }); </script> ``` #### 动态切换图标如果希望基于某些条件或状态变化而改变所使用的图标，则可以利用`:is`特性配合计算属性或者方法返回不同的图标名称字符串[^4]： ```html <template> <button @click="toggleIcon"> Toggle Icon <component :is="dynamicIconComponent"/> </button> </template> <script setup> import { ref, computed } from 'vue' import { Star as IconStar, Location as IconLocation } from '@element-plus/icons-vue' let isStarActive = ref(true) function toggleIcon() { isStarActive.value = !isStarActive.value; } const dynamicIconComponent = computed(() => isStarActive.value ? IconStar : IconLocation ); </script> ``` 上述代码展示了如何创建一个按钮点击事件处理器 `toggleIcon()` 来切换两个不同类型的图标之间的显示；同时定义了一个计算属性 `dynamicIconComponent` ，它根据布尔值的状态返回对应的图标组件对象。