1，前言

源于一段话

Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移，请多多留意更新日志, 及时获取到更新信息，Font Icon 将会在第一个正式发布被废弃，请尽快迁移

在此记录一下如何使用element-plus中的icon组件

环境：

Vue：3.2.16
Element-Plus：1.2.0-beta.3
TypeScript：4.4.3
Vite：2.6.4

2，使用

文档原话：如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用

在main.ts中先导入

import * as Icons from '@element-plus/icons'

2.1，方式一

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')// 注册全局组件
Object.keys(Icons).forEach(key => {app.component(key, Icons[key as keyof typeof Icons])
})

在xxx.vue文件中

// html
<template><el-icon :size="20"><alarm-clock /></el-icon>
</template>

或使用动态组件

// html
<template><component class="xxx" :is="iconName"></component>
</template>

// script
export default {name: 'Login',setup() {const iconName = 'Search'return {iconName}}
}

2.2，方式二

在main.ts中

import { createApp, createVNode } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import * as Icons from '@element-plus/icons'const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')// 创建Icon组件
const Icon = (props: { icon: string }) => {const { icon } = propsreturn createVNode(Icons[icon as keyof typeof Icons])
}
// 注册Icon组件
app.component('Icon', Icon)

使用动态组件

// html
<template><Icon class="xxx" :icon="iconName"></Icon>
</template>

// script
export default {name: 'Login',setup() {const iconName = 'Search'return {iconName}}
}

如果看了觉得有帮助的，我是@上进的鹏多多，欢迎点赞关注评论；
END

往期文章

助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超详细！Vue的九种通信方式
超详细！Vuex手把手教程
使用nvm管理node.js版本以及更换npm淘宝镜像源
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
超详细！Vue-Router手把手教程

个人主页

CSDN
GitHub
简书
博客园
掘金

Vue3+TS使用element-plus 动态Icon图标相关推荐

Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
问题解决：Element不显示Icon图标
第一种方法 (1)在文件下方加入以下代码,如下图所示. @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.cs ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标.而我的图标是全局导入的,默认 ...
vue3+ant design vue 动态加载Icon图标
问题与思路在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
Vue3动态引入Element-plus icon图标
直接贴代码 list数据: const list = reactive([{path: "/user",name: "user",label: "用户 ...
在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...

Vue3+TS使用element-plus 动态Icon图标

目录

1，前言

2，使用

2.1，方式一

2.2，方式二

Vue3+TS使用element-plus 动态Icon图标相关推荐

最新文章

热门文章