Icon 图标

语义化的矢量图形。使用图标组件，你需要安装 @element-plus/icons-vue。

何时使用

• 提供可视化的符号来代替文字。
• 提供操作入口的视觉提示。

代码演示

基础用法

<template>
  <el-space>
    <el-icon><Edit /></el-icon>
    <el-icon><Share /></el-icon>
    <el-icon><Delete /></el-icon>
    <el-icon><Search /></el-icon>
    <el-icon><Loading /></el-icon>
  </el-space>
</template>

<script setup>
import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons-vue'
</script>

不同尺寸

<template>
  <el-space>
    <el-icon :size="20"><Edit /></el-icon>
    <el-icon :size="24"><Edit /></el-icon>
    <el-icon :size="32"><Edit /></el-icon>
    <el-icon :size="40"><Edit /></el-icon>
  </el-space>
</template>

不同颜色

<template>
  <el-space>
    <el-icon color="#409eff"><Edit /></el-icon>
    <el-icon color="#67c23a"><Edit /></el-icon>
    <el-icon color="#e6a23c"><Edit /></el-icon>
    <el-icon color="#f56c6c"><Edit /></el-icon>
  </el-space>
</template>

API

Icon Props

参数	说明	类型	可选值	默认值
size	图标大小	number / string	—	inherit
color	图标颜色	string	—	inherit

图标集合

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

方向性图标

• ArrowLeft
• ArrowRight
• ArrowUp
• ArrowDown
• Back
• Right

提示建议性图标

• Question
• QuestionFilled
• Warning
• WarningFilled
• CircleCheck
• CircleCheckFilled

编辑类图标

• Edit
• EditPen
• Delete
• CopyDocument
• Document
• Folder

数据类图标

• PieChart
• DataBoard
• TrendCharts
• DataAnalysis

更多图标请参考 Element Plus Icons。