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- | |||