Icon 图标
Element Plus 提供了一套常用的图标集合。
使用图标
如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
如若想查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue 和 element-plus-icons 的源代码或当前页的 Icon Collection
CDN 导入和 自动导入 正在开发中。
安装
使用包管理器
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
基础用法
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 为原始的 SVG 图标提供额外的属性，更多细节详见结尾。
<template>
<p>
当增加了 <b>is-loading</b> 类时，图标可以每两秒完整转 360
度，你也可以覆写该属性
</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;"> 搜索 </span>
</el-button>
</template>
通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，但让你也可以自己改写想要的动画。
直接使用 SVG 图标
<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>
图标集合
TIP
只要你安装了图标组件库，即可在任意版本中使用 SVG 图标
您可以点击图标复制代码
Copy icon code
Icon 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ----- | --------------------------- | ------------------------------ | ------ | ------- | ------- | | color | svg 的 fill 颜色 | Pick<CSSProperties, 'color'> | - | inherit | | size | SVG 图标的大小，size x size | number/ | string | - | inherit |
Icon 插槽
| 名称 | 说明 |
|---|---|
| — | 自定义默认内容 |