elementUI(Vue2)和elementPlus(Vue3)图标icon差异
Vue2用法
<i class="el-icon-edit"></i><el-button type="primary" icon="el-icon-search">搜索</el-button>Vue3用法
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template><div><el-icon :size="size" :color="color"><Edit /></el-icon><!-- 或者独立使用它，不从父级获取属性 --><Edit /></div>
</template>| Vue2 | Vue3 | 图标 | 备注 |
|---|---|---|---|
| https://element.eleme.cn/#/zh-CN/component/icon | https://element-plus.org/zh-CN/component/icon.html | ||
| 手动复制 | 只要安装了 @element-plus/icons-vue，就可以在任意版本里使用 SVG 图标。 可以点击图标复制代码。 | ||
| 无 | ArrowDownBold |  | |
| 无 | ArrowLeftBold |  | |
| 无 | ArrowRightBold |  | |
| 无 | CloseBold |  | 加粗 |
| 无 | ArrowUpBold |  | |
| 无 | Compass |  | |
| el-icon-message-solid | BellFilled |  | |
| el-icon-s-cooperation | Briefcase |  | |
| el-icon-s-open | BrushFilled |  | |
| el-icon-tableware | Bowl |  | |
| el-icon-s-custom | Avatar |  | |
| el-icon-date | Calendar |  | |
| el-icon-mobile-phone | Cellphone |  | |
| el-icon-success | CircleCheckFilled |  | |
| el-icon-s-claim | Checked |  | |
| el-icon-error | CircleCloseFilled |  | |
| el-icon-circle-plus-outline | CirclePlus |  | |
| el-icon-time | Clock |  | |
| el-icon-circle-plus | CirclePlusFilled |  | |
| el-icon-camera-solid | CameraFilled |  | |
| el-icon-bank-card | CreditCard |  | |
| el-icon-dish-1 | DishDot |  | |
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||
| el-icon- | |||