elementui icon

ElementUI 图标使用指南

ElementUI 提供了一套丰富的图标库，基于阿里巴巴的 Iconfont 平台。这些图标可以方便地用于 Vue.js 项目中，增强用户界面的视觉效果。

引入 ElementUI 图标

确保项目中已经安装了 ElementUI。如果尚未安装，可以通过以下命令添加：

npm install element-ui -S

在 main.js 文件中全局引入 ElementUI 及其图标：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用图标组件

ElementUI 的图标通过 <i> 标签配合 el-icon- 前缀的类名使用。例如显示一个搜索图标：

<i class="el-icon-search"></i>

图标可以与其他 ElementUI 组件结合使用，比如按钮：

<el-button type="primary" icon="el-icon-search">搜索</el-button>

常用图标示例

以下是一些常用的 ElementUI 图标及其类名：

• 搜索：el-icon-search
• 编辑：el-icon-edit
• 删除：el-icon-delete
• 上传：el-icon-upload
• 下载：el-icon-download
• 消息：el-icon-message
• 设置：el-icon-setting

自定义图标大小和颜色

通过 CSS 可以轻松调整图标的样式：

<i class="el-icon-search" style="font-size: 24px; color: #ff0000;"></i>

图标集合参考

ElementUI 的完整图标集合可以在官方文档中查看。访问 ElementUI 图标文档 获取所有可用图标的列表和示例。