element-plus——图标推荐

以下是 Element Plus 中适合编辑页面使用的图标组件示例:

<!-- 编辑相关 -->
<el-icon><Edit /></el-icon>                <!-- 基础编辑图标 -->
<el-icon><EditPen /></el-icon>             <!-- 钢笔样式编辑图标 -->
<el-icon><EditUnderline /></el-icon>       <!-- 下划线编辑图标 --><!-- 内容操作 -->
<el-icon><Plus /></el-icon>                <!-- 添加图标 -->
<el-icon><Minus /></el-icon>               <!-- 减少/删除图标 -->
<el-icon><Delete /></el-icon>              <!-- 删除图标 -->
<el-icon><Copy /></el-icon>                <!-- 复制图标 -->
<el-icon><Cut /></el-icon>                 <!-- 剪切图标 -->
<el-icon><Paste /></el-icon>               <!-- 粘贴图标 --><!-- 状态操作 -->
<el-icon><Check /></el-icon>                <!-- 确认/保存图标 -->
<el-icon><Close /></el-icon>                <!-- 取消/关闭图标 -->
<el-icon><Undo /></el-icon>                 <!-- 撤销操作 -->
<el-icon><Redo /></el-icon>                 <!-- 重做操作 --><!-- 格式设置 -->
<el-icon><Bold /></el-icon>                 <!-- 粗体格式 -->
<el-icon><Italic /></el-icon>               <!-- 斜体格式 -->
<el-icon><FontColor /></el-icon>            <!-- 字体颜色设置 -->
<el-icon><AlignLeft /></el-icon>            <!-- 左对齐 -->
<el-icon><AlignCenter /></el-icon>          <!-- 居中对齐 -->
<el-icon><AlignRight /></el-icon>           <!-- 右对齐 --><!-- 其他常用 -->
<el-icon><Refresh /></el-icon>              <!-- 刷新内容 -->
<el-icon><Save /></el-icon>                 <!-- 保存操作 -->
<el-icon><Search /></el-icon>               <!-- 搜索功能 -->
<el-icon><Expand /></el-icon>               <!-- 展开内容 -->
<el-icon><Collapse /></el-icon>             <!-- 折叠内容 -->

• 数据操作场景1：
  • 添加数据：推荐使用<el-icon><Plus /></el-icon>，直观表示添加操作，常用于表单添加按钮、列表添加项按钮等位置。
  • 编辑数据：<el-icon><Edit /></el-icon>或<el-icon><EditPen /></el-icon>比较合适，如在表格中每行的操作列，点击该图标可进入该行数据的编辑状态。
  • 删除数据：可使用<el-icon><Delete /></el-icon>或<el-icon><Minus /></el-icon>，通常用于表格、列表项的删除按钮，提示用户执行删除操作。
• 状态指示场景1：
  • 保存成功：<el-icon><Check /></el-icon>能很好地表示操作成功，比如在表单提交后，若保存成功可显示该图标给予用户反馈。
  • 操作取消：适合用<el-icon><Close /></el-icon>，如在弹出的编辑窗口中，点击取消按钮时可展示此图标。
  • 加载中：可考虑自定义一个加载中的图标，或者使用 Element Plus 的加载组件配合图标，如<el-loading><el-icon><Loading /></el-icon></el-loading>，用于表示数据加载、操作处理等正在进行的状态。
• 格式设置场景1：
  • 文本加粗：使用<el-icon><Bold /></el-icon>，在文本编辑区域，可用于表示设置文本为粗体的功能按钮。
  • 文本颜色：推荐<el-icon><FontColor /></el-icon>，点击可弹出颜色选择器，让用户设置文本颜色。
  • 对齐方式：<el-icon><AlignLeft /></el-icon>、<el-icon><AlignCenter /></el-icon>、<el-icon><AlignRight /></el-icon>分别用于表示左对齐、居中对齐、右对齐，常在富文本编辑等场景中使用。
• 导航与布局场景1：
  • 展开内容：<el-icon><Expand /></el-icon>可用于表示展开折叠面板、菜单等内容，点击后显示更多信息。
  • 折叠内容：搭配<el-icon><Collapse /></el-icon>，与展开图标对应，用于将展开的内容收起。
  • 返回上一级：若有层级导航，可使用<el-icon><ArrowUp /></el-icon>或<el-icon><ArrowLeft /></el-icon>表示返回上一级页面或菜单。
• 搜索与筛选场景1：
  • 搜索：<el-icon><Search /></el-icon>是经典的搜索图标，常用于搜索框旁，提示用户可进行搜索操作。
  • 筛选：可使用<el-icon><Filter /></el-icon>，表示对数据进行筛选，一般在表格、列表上方的筛选条件区域使用。

这些图标组件都需要先从 Element Plus 中导入才能使用，例如：

import { Edit, Plus, Delete, Check, Undo, Redo } from '@element-plus/icons-vue'

Element Plus 的图标库是可以进行扩展的：

1. 使用第三方图标库（推荐）

Element Plus 支持与主流第三方图标库结合使用，无需复杂配置即可扩展图标资源：

• Font Awesome：最常用的图标库之一，包含大量通用图标

<!-- 引入 Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><!-- 在 Element 组件中使用 -->
<el-button icon="fa fa-github">GitHub</el-button>

Iconfont（阿里图标库）：可自定义上传图标，支持生成项目专属图标库

<!-- 引入自定义 Iconfont 样式 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_xxxxxxx.css"><!-- 使用方式 -->
<el-icon><i class="iconfont icon-my-custom-icon"></i></el-icon>
<el-button icon="iconfont icon-add"></el-button>

2. 注册自定义 SVG 图标

如果需要使用自己设计的 SVG 图标，可以通过 Element Plus 提供的 Icon 组件注册为全局可用的图标：

// 导入 Element Plus 的 createApp 和 Icon 组件
import { createApp } from 'vue'
import { Icon } from 'element-plus'
import App from './App.vue'// 定义自定义 SVG 图标（例如一个"代码"图标）
const CodeIcon = {render: () => h('svg', {width: '1em',height: '1em',viewBox: '0 0 1024 1024',xmlns: 'http://www.w3.org/2000/svg'}, [h('path', {d: 'M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.2c0-8.5-3.4-16.7-9.4-22.6zM790.2 866H233.8V156h301.7l254.7 254.7V866z',fill: 'currentColor'})])
}const app = createApp(App)
// 全局注册自定义图标，使用时通过 name 调用
app.component('CodeIcon', CodeIcon)// 也可以通过 Icon 组件的 register 方法批量注册
Icon.register({'my-code': CodeIcon,// 可添加更多自定义图标
})

使用时：

<el-icon><CodeIcon /></el-icon>
<!-- 或使用注册的名称 -->
<el-icon><my-code /></el-icon>

3. 封装自定义图标组件

对于频繁使用的业务图标，可以封装为独立组件，保持代码复用性：

<!-- components/CustomIcons.vue -->
<template><svg :width="size" :height="size" :viewBox="viewBox" fill="currentColor"><slot /></svg>
</template><script setup>
defineProps({size: {type: String,default: '1em'},viewBox: {type: String,default: '0 0 1024 1024'}
})
</script>

使用时传入具体路径：

<el-icon><CustomIcons><path d="M480 64C256 64 64 256 64 480s192 416 416 416 416-192 416-416S704 64 480 64z" /></CustomIcons>
</el-icon>

通过以上方式，能够灵活扩展 Element Plus 的图标体系，满足不同场景下的图标需求。其中，使用 Iconfont 或 Font Awesome 是最便捷的方案，而自定义 SVG 图标则更适合需要高度个性化图标的场景。