Icon 图标
Element Plus 提供了一套常用的图标集合。
安装#
使用包管理器
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
注册所有图标#
您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
// main.ts
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
} 浏览器直接引入#
直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlusIconsVue了。
根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。
使用 unpkg
<script src="//unpkg.com/@element-plus/icons-vue"></script>
使用 jsDelivr
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
TIP
我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。
自动导入#
使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。
基础用法
WARNING
因为 HTML 标准已经定义了一个名为 menu 的标签， 如果您注册的 menu 无法正常工作，您需要使用别名来渲染图标。
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
<div>
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<Edit />
</div>
</template>
结合 el-icon 使用#
el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。
<template>
<p>
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
seconds, you can also override this
</p>
<el-icon :size="20">
<Edit />
</el-icon>
<el-icon color="#409EFC" class="no-inherit">
<Share />
</el-icon>
<el-icon>
<Delete />
</el-icon>
<el-icon class="is-loading">
<Loading />
</el-icon>
<el-button type="primary">
<el-icon style="vertical-align: middle">
<Search />
</el-icon>
<span style="vertical-align: middle"> Search </span>
</el-button>
</template>
通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，当然你也可以自己改写想要的动画。
<template>
<div style="font-size: 20px">
<!-- 由于SVG图标默认不携带任何属性 -->
<!-- 你需要直接提供它们 -->
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
<Share style="width: 1em; height: 1em; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />
</div>
</template>
<el-icon><PieChart /></el-icon> <!-- 分析 -->
<el-icon><Coin /></el-icon> <!-- 积分 -->
<el-icon><DataBoard /></el-icon><!-- 数据版 -->
<el-icon><DataAnalysis /></el-icon><!-- 数据分析 -->
<el-icon><Comment /></el-icon><!-- 评论 -->
<el-icon><Histogram /></el-icon><!-- 柱状图 -->
<el-icon><Document /></el-icon> <!-- 文档 -->
<el-icon><Present /></el-icon><!-- 礼物、活动 -->
<el-icon><Box /></el-icon><!-- 打包、专题 -->
<el-icon><User /></el-icon><!-- 用户 -->
<el-icon><CopyDocument /></el-icon><!-- 拷贝文件 -->
<el-icon><LocationInformation /></el-icon> <!-- 位置信息 -->
图标集合
https://element-plus.org/zh-CN/component/icon.html#icon-collection
