关于vue3:elementplus-Icon图标统一导入及注册

51次阅读

共计 1358 个字符，预计需要花费 4 分钟才能阅读完成。

element-plus 官网提醒，Icon 图标正在向 SVG Icon 迁徙，之前应用的 Font Icon 行将被弃用。

装置

$ yarn add @element-plus/icons
# 或者
$ npm install @element-plus/icons

根底应用

在须要加载图标的页面内按需引入所需图标。（ps: 这里官网文档并没有具体阐明）

<template>
  <el-icon>
    <setting />
  </el-icon>
</template>

<script setup lang="ts">
import {Setting} from '@element-plus/icons'
</script>

对立导入并注册

//main.ts 文件
import * as ElIconModules from '@element-plus/icons'

const app = createApp(App)
// 对立注册 Icon 图标
for (const iconName in ElIconModules) {if (Reflect.has(ElIconModules, iconName)) {const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}

ps: 应用 ts，当数组下标为字符串时，会报错。

解决办法：在 tsconfig.json 内增加如下规定：

"suppressImplicitAnyIndexErrors": true

在组件中间接应用

点击图标，复制相应的 icon，粘贴到要加载的地位，间接应用。
```
<el-icon><alarm-clock /></el-icon>
```

动静应用
例如：想要在 el-menu 组件中动静应用 Icon 图标，应用动静组件<component :is=”***” /> 即可实现。

// router.js
const routes = [
  {
    path: '/dashboard',
    component: Layout,
    meta: {
      title: '首页',
      icon: 'HomeFilled'
    },
    children: []}
]

// MenuItem.vue
<template>
  <template v-for="menu in menuList" :key="menu.path">
    <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.path">
      <template #title>
        <el-icon>
          <component :is="menu.meta.icon" />
        </el-icon>
        <span>{{menu.meta.title}}</span>
      </template>
      <menu-item :menu-list="menu.children"></menu-item>
    </el-sub-menu>

    <el-menu-item v-else :index="menu.path" style="color: #f4f5f5">
      <el-icon>
        <component :is="menu.meta.icon" />
      </el-icon>
      <template #title>{{menu.meta.title}}</template>
    </el-menu-item>
  </template>
</template>

正文完