Icon 图标

基于 Element Plus Icon 增强的图标组件，支持 Iconify 图标。

图标使用

有多种方式使用图标：

1. 直接使用 Iconify（推荐）

您可以直接使用 Iconify 的 Tabler Icons，无需安装。查看基础用法了解示例。

2. 安装图标集配合 UnoCSS

安装您喜欢的 Iconify 图标集合并配合 UnoCSS 使用：

pnpm add -D @iconify-json/mdi

然后使用 i- 前缀：

<ep-icon icon="i-mdi:home" />

3. Element Plus 图标

安装并使用 Element Plus 图标集合：

pnpm add @element-plus/icons-vue

<script setup>
import { Edit } from "@element-plus/icons-vue"
</script>

<template>
  <el-icon><Edit /></el-icon>
</template>

基础用法

使用 Iconify 图标名称显示图标。

使用 icon 属性配合 Iconify 图标名称（例如 'tabler:home'）。组件会自动添加 'i-' 前缀（如果不存在）。

<template>
  <div class="icon-example">
    <ep-icon icon="tabler:number-1-small" size="50" />
    <ep-icon icon="tabler:number-2-small" size="50" />
    <ep-icon icon="tabler:number-3-small" size="50" />
    <ep-icon icon="tabler:number-4-small" size="50" />
    <ep-icon icon="tabler:number-5-small" size="50" />
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "basic"
})
</script>
<style scoped>
.icon-example {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
</style>

隐藏源码

Icon API

Icon 属性

名称	说明	类型	默认值
icon	Iconify 图标名称	string	—

Element Plus Icon 属性

名称	说明	类型	默认值
color	SVG 标签的 fill 属性	string	继承自 color
size	SVG 图标大小，宽高相等	number / string	继承自字体大小

Icon 插槽

名称	说明
default	自定义默认内容

Element Plus Icon 插槽

名称	说明
default	自定义默认内容

类型声明

显示声明

export interface EpIconProps {
  icon?: string
}