VUI

Appearance

Icon 图标 ​

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

安装 ​

使用包管理器 ​

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

bash
npm install @element-plus/icons-vue
bash
yarn add @element-plus/icons-vue
bash
pnpm install @element-plus/icons-vue

注册所有图标 ​

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

typescript
// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

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

基础用法 ​

<template>
  <div style="font-size: 24px; display: flex; gap: 16px">
    <v-icon color="#000">
      <Edit />
    </v-icon>
    <v-icon size="24">
      <Share />
    </v-icon>
    <v-icon size="24">
      <Search />
    </v-icon>
    <v-icon size="24">
      <Delete />
    </v-icon>
  </div>
</template>

直接使用 SVG 图标 ​

<template>
  <div style="font-size: 24px; display: flex; gap: 16px">
    <!-- 或者独立使用它，不从父级获取属性 -->
    <!-- 由于SVG图标默认不携带任何属性，你需要直接提供它们 -->
    <Share style="width: 1em; height: 1em" />
    <Delete style="width: 1em; height: 1em" />
    <Search style="width: 1em; height: 1em" />
    <Edit style="width: 1em; height: 1em" />
  </div>
</template>

Icon Attributes ​

属性名说明类型默认值
colorsvg 的 fill 颜色stringinherit
sizeSVG 图标的大小number | stringinherit

Icon Slots ​

插槽名说明
default自定义默认内容