4.7 KiB
| title | lang |
|---|---|
| Icon | en-US |
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 |