elementui ico
ElementUI 图标使用指南
ElementUI 提供了一套内置的图标库，可以通过 el-icon- 前缀直接使用。这些图标基于字体图标（iconfont）实现，支持灵活的颜色、大小调整。
内置图标调用方式
在 Vue 模板中通过 i 标签配合 class 使用：
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>结合组件使用示例
与 Button 组件配合：
<el-button type="primary" icon="el-icon-search">搜索</el-button>在 Menu 组件中使用：
<el-menu>
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span>导航一</span>
</el-menu-item>
</el-menu>自定义图标样式
通过 CSS 调整图标样式：
.el-icon-edit {
color: #409EFF;
font-size: 20px;
margin-right: 8px;
}扩展第三方图标库
如需使用更多图标，可引入如 Font Awesome：
- 安装依赖：
npm install @fortawesome/fontawesome-free - 在 main.js 中导入：
import '@fortawesome/fontawesome-free/css/all.css' - 模板中使用：
<i class="fas fa-user"></i>
注意事项
- ElementUI 图标默认需要引入样式文件
element-ui/lib/theme-chalk/index.css - 图标作为纯文本渲染，颜色继承自父元素
- 2.13.0+ 版本支持 SVG 图标，可通过
el-icon组件使用
常用图标示例
<el-icon-edit/>
<el-icon-upload/>
<el-icon-download/>
<el-icon-setting/>
