element-plus的el-icon和@element-plus/icons vue3 组件封装与使用

最新推荐文章于 2025-04-20 23:38:00 发布

菜鸡张大民

最新推荐文章于 2025-04-20 23:38:00 发布

阅读量1.8w

点赞数 14

分类专栏： vuejs js 文章标签： vue.js javascript vue3 element-plus icons

本文链接：https://blog.youkuaiyun.com/m0_38085253/article/details/121339633

版权

vuejs 同时被 2 个专栏收录

6 篇文章

订阅专栏

2 篇文章

订阅专栏

博主对于Element Plus中图标组件的使用感到不便，因为需要单独安装和引入每个图标。他们对比了Vant的简洁用法，并决定自己封装一个组件来实现按需加载所有图标。通过在main.js中注册一个插件一次性引入所有图标，并创建一个名为HyIcon的组件，利用vue3的resolveComponent动态引入所需图标。这样，就可以通过传入不同名称来使用不同的图标，大大简化了使用流程。

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

使用 element-plus 时发现了一个问题：icon 需要单独安装和引入，让我很是难受，官网是这么说的（大概意思如下）：

$ yarn add @element-plus/icons 
# 或者 
$ npm install @element-plus/icons

import { defineComponent } from 'vue' 
import { Edit, Share, Delete, Search } from '@element-plus/icons' 
export default defineComponent({ 
    components: { Edit, Share, Delete, Search } 
})

<template> 
    <div style="font-size: 20px;"> 
    <!-- Since svg icons do not carry any attributes by default --> 
    <!-- You need to provide attributes directly --> 
        <el-icon size="1em"><edit /></el-icon>
        <el-icon size="1em"><share /></el-icon> 
        <el-icon size="1em"><delete /></el-icon> 
        <el-icon size="1em"><search /></el-icon> 
    </div> 
</template>

........................................................................ 说真的，我一万个难受

这玩意不能忍，之前看到 vant 的 icon 做的就很舒服

<van-icon name="chat-o" />

既然这样，那封装一个组件吧

element团队的意思很明显，就是按需加载

那咱们就退而求其次，一次加载完，在src/目录下创建plugins(如果已有的兄弟姐妹请无视)

然后，在这个文件夹中引入 icons 所有组件，并且全部注册进去

import * as Icons from '@element-plus/icons' 
export default (app) => {
   for (const key in Icons) {
     app.component(transElIconName(key), Icons[key])   
   } 
} 

// 此处是借鉴（抄袭）一位大佬的写法，勿喷 
// https://blog.youkuaiyun.com/Alloom/article/details/119415984 
function transElIconName(iconName) {
   return 'vue' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()) 
}

然后在main.js文件内注册

import { createApp } from 'vue' 
import App from './App.vue' 
const app = createApp(App) 
// code ... 
// 使用
icons elementPlusIcons(app)

然后核心的部分来了：

在components文件夹中创建一个组件（组件名字随便取），我这里暂且叫HyIcon

这里核心的方法是 vue3 的新方法 resolveComponent，根据组件名动态引入已加载的组件，具体请参照：全局 API | Vue.js

<script> 
import { h, resolveComponent, defineComponent } from 'vue' 
export default defineComponent({
   props: {
     name: {
       type: String,
       required: true
     }
   },
   render() {
     return <el-icon {...this.$attrs}>
       {h(resolveComponent(this.name))}
     </el-icon>
   }
 }) 
</script>

引入方法如下：

1. 全局引入(main.js)

import { createApp } from 'vue' 
import App from './App.vue' 
import HyIcon from '@/components/HyIcon'
const app = createApp(App) 
// code ... 
// 使用icons 
elementPlusIcons(app) 
app.component('HyIcon', HyIcon)

2. 局部引入（具体组件）：

<template>
   <hy-icon size="100" color="red" name="vue-add-location" />
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue' 
export default defineComponent({
   components: {
     HyIcon: defineAsyncComponent(() => import('@/components/HyIcon'))
   }
 })
</script>

上面用到了 vue 的 defineAsyncComponent 方法

也可以这么用：

<template>
   <hy-icon size="100" color="red" name="vue-add-location" />
</template>
<script> 
import { defineComponent, defineAsyncComponent } from 'vue' 
import { HyIcon } from '@/components/HyIcon' 
export default defineComponent({
   components: { HyIcon } 
})
</script>

完成

如果小伙伴们有好点的建议或者意见，可以提给我，我会及时改进，欧了，古德拜！