Icon 图标
Element Ultra 提供了一套常用的图标集合。
使用图标
如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
如若想查看所有可用的 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 无法正常工作，则需要使用别名来渲染图标。
<!-- Use el-icon to provide attributes to SVG icon -->
<template>
<div>
<el-icon :size="size" :color="color">
<edit></edit>
</el-icon>
<!-- Or use it independently without derive attributes from parent -->
<edit></edit>
</div>
</template>
结合 el-icon 使用
el-icon 为原始的 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 度，但让你也可以自己改写想要的动画。
直接使用 SVG 图标
<template>
<div style="font-size: 20px;">
<!-- Since svg icons do not carry any attributes by default -->
<!-- You need to provide attributes directly -->
<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 | - |
Icon 插槽
| 名称 | 说明 |
|---|---|
| — | 自定义默认内容 |