---
title: Icon 图标
---

# 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](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.

- If you want to see all available SVG icons please check [@deppon/deppon-ui/icons-vue@1.x](https://unpkg.com/browse/@deppon/deppon-ui/icons-vue@1/dist/es/)[@deppon/deppon-ui/icons-vue@latest](https://unpkg.com/browse/@deppon/deppon-ui/icons-vue@latest/dist/types/components/) and the source [element-plus-icons](https://github.com/element-plus/element-plus-icons) out or [Icon Collection](#icon-collection)

## Installation

### Using packaging manager

Choose a package manager you like.

::: code-group

```shell [npm]
$ npm install @deppon/deppon-ui/icons-vue
```

```shell [yarn]
$ yarn add @deppon/deppon-ui/icons-vue
```

```shell [pnpm]
$ pnpm install @deppon/deppon-ui/icons-vue
```

:::

### Register All Icons

You need import all icons from `@deppon/deppon-ui/icons-vue` and register them globally.

```ts
// main.ts

// if you're using CDN, please remove this line.
import * as ElementPlusIconsVue from '@deppon/deppon-ui/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
```

You can also refer to [this template](https://codepen.io/sxzz/pen/xxpvdrg).

### Import in Browser

Import Element Plus Icons through browser HTML tags directly, and use global variable `ElementPlusIconsVue`.

According to different CDN providers, there are different introduction methods.
Here we use [unpkg](https://unpkg.com) and [jsDelivr](https://jsdelivr.com) as example.
You can also use other CDN providers.

::: code-group

```html [unpkg]
<script src="//unpkg.com/@deppon/deppon-ui/icons-vue"></script>
```

```html [jsDelivr]
<script src="//cdn.jsdelivr.net/npm/@deppon/deppon-ui/icons-vue"></script>
```

:::

:::tip

We recommend using CDN to import Element Plus users to lock the version
on the link address, so as not to be affected by incompatible updates when Element Plus
is upgraded in the future. Please check [unpkg.com](https://unpkg.com) for
the method to lock the version.

:::

### Auto Import

Use [unplugin-icons](https://github.com/antfu/unplugin-icons) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
to automatically import any icon collections from iconify.
You can refer to [this template](https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58).

## Simple Usage

:::warning

Because HTML standard has already defined a tag named [menu](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu),
so you need to use an alias in order to render the icon, if you register `Menu` directly it will not work.

:::

:::example

icon/simple

:::

## Combined with el-icon

`el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.

:::example

icon/with-el-icon

:::

## Using SVG icon directly

:::example

icon/svg-direct

:::

## Icon Collection{#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**

:::

<IconList />

## API

### Attributes

| Name  | Description                | Type                  | Default                |
| ----- | -------------------------- | --------------------- | ---------------------- |
| color | SVG tag's fill attribute   | ^[string]             | inherit from color     |
| size  | SVG icon size, size x size | ^[number] / ^[string] | inherit from font size |

### Slots

| Name    | Description               |
| ------- | ------------------------- |
| default | Customize default content |