vue element plus Icon 图标

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

使用图标#

如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
如若需要查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue@1.x@element-plus/icons-vue@latest 和有关 Icon Collection 的源码 element-plus-icons

安装#

使用包管理器#

# 选择一个你喜欢的包管理器# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

注册所有图标#

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

// main.ts// 如果您正在使用CDN引入，请删除下面一行。
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 提供商有不同的引入方式，根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 和 jsDelivr 举例。你也可以使用其它的 CDN 供应商。

使用 unpkg#

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

使用 jsDelivr#

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

TIP

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

自动导入#

使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。您可以参考此模板。

基础用法#

WARNING

因为 HTML 标准已经定义了一个名为 menu 的标签，如果您注册的 menu 无法正常工作，您需要使用别名来渲染图标。

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template><div><el-icon :size="size" :color="color"><Edit /></el-icon><!-- 或者独立使用它，不从父级获取属性 --><Edit /></div>
</template>

结合 el-icon 使用#

el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。

<template><p>with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2seconds, 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"><!-- 由于SVG图标默认不携带任何属性 --><!-- 你需要直接提供它们 --><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>