elementui icons

ElementUI Icons 使用指南

ElementUI 提供了一套丰富的图标库，基于 Font Awesome 和 ElementUI 自定义图标。以下是使用 ElementUI 图标的方法：

安装 ElementUI

确保项目中已安装 ElementUI：

npm install element-ui

引入 ElementUI 和图标

在 main.js 中全局引入：

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

Vue.use(ElementUI);

使用内置图标

ElementUI 提供了 <el-icon> 组件，支持以下常见图标：

<el-icon name="el-icon-edit"></el-icon>
<el-icon name="el-icon-share"></el-icon>
<el-icon name="el-icon-delete"></el-icon>

使用 Font Awesome 图标

ElementUI 支持部分 Font Awesome 图标，需手动引入：

<el-icon name="fa fa-user"></el-icon>
<el-icon name="fa fa-home"></el-icon>

自定义 SVG 图标

如果需要使用自定义 SVG 图标，可以通过 icon-class 属性：

<el-icon class="custom-icon">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/>
  </svg>
</el-icon>

图标列表参考

ElementUI 内置图标包括但不限于：

• el-icon-edit（编辑）
• el-icon-delete（删除）
• el-icon-share（分享）
• el-icon-search（搜索）
• el-icon-setting（设置）

完整列表可查阅 ElementUI 官方文档。

注意事项

• 图标名称需严格匹配，区分大小写。
• 如需更多图标，可结合第三方库如 @fortawesome/fontawesome-free。
• 图标样式可通过 CSS 调整大小和颜色：

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