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