Adam的博客
Search K

Appearance

Element Plus 全局注册图标并使用别名 ​

项目中需要动态的配置侧边导航菜单中的图标，所以需要所有的 Element Plus 的图标。 因为 HTML 标准已经定义了一个名为 menu 的标签，需要使用别名来 menu 渲染图标。 所以采取了全局注册 Element Plus 的图标并注册别名的方法。

注册所有图标 ​

js
// 导入 '@element-plus/icons-vue'
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 注册所有的图标, 并设置别名。 前面添加了`el-icon-`作为别名。
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(`ElIcon${key}`, component);
}

使用方法 ​

因为全局注册并使用了别名，使用的时候不需要导入图标，但是需要通过别名来使用图标组件。 需要在图标组件前面加上el-icon-使用。比如 xxx 图标， 那么需要通过 el-icon-xxx 别名使用。

请使用如下的写法。

html
<el-icon><el-icon-menu /></el-icon>
<el-icon><el-icon-setting /></el-icon>
<el-icon><el-icon-document /></el-icon>

对应 Element Plus 的 menu 图标、setting 图标和 document 图标。

注 ​

无

参考 ​

Element Plus 注册所有图标