图标

Element Plus 提供了一套常用的图标集合。

使用方法

如果您想像示例一样**直接使用**，您需要全局注册这些组件之后再使用。
如果您想查看所有可用的 SVG 图标，请查看 @element-plus/[email protected]@element-plus/icons-vue@latest，和 element-plus-icons 仓库，或者查看图标集合

安装

使用包管理器

选择一个你喜欢的包管理器。

npmyarnpnpm

shell

$ npm install @element-plus/icons-vue

shell

$ yarn add @element-plus/icons-vue

shell

$ pnpm install @element-plus/icons-vue

注册所有图标

你需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

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

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

您也可以参考这个模板。

浏览器直接引入

通过浏览器 HTML 标签直接导入 Element Plus 图标，并使用全局变量 ElementPlusIconsVue。

根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 和 jsDelivr 举例。你也可以使用其它的 CDN 提供商。

unpkg

html

<script src="//unpkg.com/@element-plus/icons-vue"></script>

jsDelivr

html

<script src="//cdn.jsdelivr.net.cn/npm/@element-plus/icons-vue"></script>

提示

我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

自动导入

使用 unplugin-icons 和 unplugin-auto-import 来自动导入任何图标集。您可以参考这个模板。

简单用法

警告

由于 HTML 标准定义了一个名为 menu 的标签，为了渲染图标，您需要使用一个别名。如果您直接注册 Menu，它将无法正常工作。

vue

<!-- Use el-icon to provide attributes to SVG icon -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- Or use it independently without derive attributes from parent -->
    <Edit />
  </div>
</template>

配合 el-icon

el-icon 为原生 SVG 图标提供额外的属性，更多细节请阅读到最后。

vue

<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 图标

vue

<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>