elementui图标
Element UI 图标使用指南
Element UI 提供了一套丰富的图标库，基于 ElIcon 组件实现，支持直接使用内置图标或自定义第三方图标（如 Font Awesome）。
内置图标的使用
Element UI 内置图标通过 <el-icon> 组件调用，需配合图标名使用。例如：
<el-icon><edit /></el-icon>
<el-icon><delete /></el-icon>图标名称需转换为小写驼峰格式（如 el-icon-edit 对应 <edit />）。完整图标列表可参考 Element UI 官方图标文档。
安装与引入
确保项目中已安装 Element UI：
npm install element-ui全局引入时，图标会自动注册：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);按需引入需单独注册图标组件：
import { ElIcon } from 'element-ui';
import 'element-ui/lib/theme-chalk/icon.css';
Vue.component('el-icon', ElIcon);自定义第三方图标
通过 el-icon 包装第三方图标（如 Font Awesome）：
<el-icon>
<i class="fas fa-user"></i>
</el-icon>需先引入第三方图标的 CSS 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">图标属性配置
el-icon 支持以下常用属性：
color: 设置图标颜色（如#409EFF）。size: 调整大小（如20px或2em）。
示例：
<el-icon color="#F56C6C" size="24px"><share /></el-icon>注意事项
- 图标命名：内置图标需去掉
el-icon-前缀，使用小写驼峰格式。 - 按需引入优化：若使用按需引入，需通过插件（如
babel-plugin-component）减少打包体积。 - 兼容性：Element UI 图标基于 SVG，兼容现代浏览器，IE 需 polyfill 支持。
通过上述方法，可灵活应用 Element UI 图标或扩展自定义图标库。
