element-plus——图标推荐

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

html 复制代码

<!-- 编辑相关 -->
<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 中导入才能使用，例如：

javascript 复制代码

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

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

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

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

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

html 复制代码

<!-- 引入 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（阿里图标库）：可自定义上传图标，支持生成项目专属图标库

html 复制代码

<!-- 引入自定义 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 组件注册为全局可用的图标：

javascript 复制代码

// 导入 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,
  // 可添加更多自定义图标
})

使用时：

html 复制代码

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

3. 封装自定义图标组件

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

javascript 复制代码

<!-- 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>

使用时传入具体路径：

html 复制代码

<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 图标则更适合需要高度个性化图标的场景。