elementui icons

ElementUI 图标使用指南

ElementUI 提供了丰富的图标库，基于 ElIcon 组件实现。以下为常用方法和注意事项：

基础用法

直接通过 el-icon-* 类名使用内置图标：

<el-icon-edit></el-icon-edit>
<el-icon-share></el-icon-share>

或通过组件形式调用：

<el-icon><edit /></el-icon>
<el-icon><share /></el-icon>

图标集合

ElementUI 图标分为以下几类（部分示例）：

• 操作类：delete、edit、search
• 导航类：arrow-up、arrow-left、back
• 状态类：success、warning、error
• 文件类：document、folder、tickets

完整列表可参考 ElementUI 官方图标文档。

自定义图标

通过 el-icon 组件包裹自定义 SVG：

<el-icon>
  <svg viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"/>
  </svg>
</el-icon>

调整图标样式

通过 CSS 控制大小和颜色：

.el-icon {
  font-size: 24px;
  color: #409EFF;
}

注意事项

1. 需要单独引入图标组件（若按需引入）：

   import { ElIcon } from 'element-plus'
   import { Edit, Share } from '@element-plus/icons-vue'

2. ElementUI 2.x 与 3.x 的图标 API 存在差异，需注意版本兼容性。