el-icon 是 Element Plus 提供的图标组件,用于在界面中展示 SVG 图标,适用于 UI 图标、按钮图标、状态指示和各类视觉元素。
主要能力:通过 color 属性设置 SVG 填充色(默认继承父级),通过 size 属性设置图标尺寸(数字或字符串,默认继承字号);默认插槽用于放置 SVG 图标组件。图标集合包含 300+ 图标,涵盖操作类(Edit、Delete、Share、Download、Upload)、箭头类(ArrowLeft、ArrowRight、ArrowUp、ArrowDown)、状态类(SuccessFilled、WarningFilled、CircleCloseFilled、InfoFilled)、媒体类(Picture、VideoCamera、Microphone)等。
使用方式:先安装图标包 npm install @element-plus/icons-vue,再按需引入具体图标组件,放入 el-icon 中并传入 size、color。也可直接使用 SVG 图标组件并自行设置样式;还可在 main.ts 中遍历注册全部图标为全局组件。加载动画可给 el-icon 添加 is-loading 类。
最佳实践:用 el-icon 包裹以保持尺寸一致,按需单独引入图标以支持 tree-shaking。
限制:资料未提供收费、价格、平台兼容性等更多信息。