当前位置:首页 > 前端教程

elementui ico

2026-03-05 17:59:24前端教程

ElementUI 图标使用指南

ElementUI 默认使用 字体图标(通过 el-icon-xxx 类名),但在新版本中也支持了 SVG 图标(通过 <el-icon> 组件)。以下是两种方式的具体使用方法:

字体图标(传统方式)

在 ElementUI 中,字体图标通过类名调用,例如 el-icon-edit。使用时需在 i 标签或按钮等组件中添加对应的类名。

<i class="el-icon-edit"></i>
<el-button icon="el-icon-search">搜索</el-button>

SVG 图标(推荐方式)

ElementUI 从 2.0 版本开始支持 SVG 图标,需单独引入 @element-plus/icons(Element Plus)或使用内置的 SVG 图标组件。

elementui ico

<template>
  <el-icon><Edit /></el-icon>
  <el-button :icon="Search" />
</template>

<script>
import { Edit, Search } from '@element-plus/icons'
export default {
  components: { Edit, Search }
}
</script>

自定义图标

如需使用第三方图标库(如 Font Awesome 或自定义 SVG),可通过以下方式集成:

  1. 覆盖默认图标
    通过修改 el-icon 的 CSS 或替换组件实现。

    elementui ico

  2. 直接引入第三方库
    例如使用 Font Awesome:

<i class="fas fa-user"></i>

图标集合查询

ElementUI 提供的完整图标列表可参考官方文档:

注意事项

  • 字体图标需引入 ElementUI 的 CSS 文件。
  • SVG 图标需单独安装依赖(如 @element-plus/icons)。
  • 图标类名需严格匹配,大小写敏感。

标签: elementuiico
分享给朋友:

相关文章

elementui select

elementui select

ElementUI Select 组件使用指南 ElementUI 是基于 Vue.js 的组件库,其中 Select 组件用于提供下拉选择功能。以下是常见用法和配置方法。 基础用法 通过 v-mo…

elementui和

elementui和

ElementUI 简介 ElementUI 是一套基于 Vue.js 的桌面端组件库,由饿了么前端团队开发并开源。它提供了丰富的 UI 组件(如表格、表单、弹窗等),适用于快速构建企业级中后台管理系…

elementui progress

elementui progress

Element UI Progress 组件 Element UI 提供了一个 Progress 组件,用于展示操作的当前进度。该组件支持多种样式和配置选项,适用于文件上传、任务完成度等场景。 基本…

elementui多选

elementui多选

ElementUI 多选组件使用指南 ElementUI 提供了 el-select 组件支持多选功能,通过设置 multiple 属性即可启用。以下是具体实现方法和常见场景示例: 基础多选实现 设…

elementui系列

elementui系列

Element UI 系列概述 Element UI 是一套基于 Vue.js 的桌面端组件库,由饿了么前端团队开发并开源。它提供了丰富的 UI 组件,适用于快速构建企业级中后台产品。以下是 Elem…

elementui selecttree

elementui selecttree

使用 ElementUI 的 TreeSelect 组件 ElementUI 提供了 el-tree-select 组件,用于结合树形结构和下拉选择功能。以下是其基本用法和常见配置。 基本使用…