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

最新推荐文章于 2025-10-11 15:48:49 发布

原创

最新推荐文章于 2025-10-11 15:48:49 发布 · 785 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #hbase

使用 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 做的就很舒服