Icon
Element Plus provides a set of common icons.
Icon Usage
If you want to use directly like the example, you need to globally register the components before using it.
If you want to see all available SVG icons please check @element-plus/icons-vue and the source element-plus-icons out or Icon Collection
CDN importing and auto importing is under developing.
Installation
Using packaging manager
# Choose a package manager you like.
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
Simple usage
WARNING
Because HTML standard has already defined a tag named menu, so you need to use an alias in order to render the icon, if you register Menu directly it will not work.
<!-- 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>
Combined with el-icon
el-icon provides extra attributes for raw SVG icon, for more detail, please read to the end.
<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>
with extra class is-loading, your icon is able to rotate 360 deg in 2 seconds, you can also override this
Using SVG icon directly
<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>
Icon Collection
TIP
You can use SVG icon in any version as long as you install it
You can click the icon to copy it
Icon Attributes
| Attribute | Description | Type | Acceptable Value | Default |
|---|---|---|---|---|
| color | SVG tag's fill attribute | Pick<CSSProperties, 'color'> | - | inherit from color |
| size | SVG icon size, size x size | number | string | - | inherit from font size |
Icon Slots
| Name | Description |
|---|---|
| — | customize default content |