锐客网

  1. 首页 > it技术 > >

element-plus|element-plus Icon图标统一导入及注册

element-plus官方提示，Icon图标正在向SVG Icon迁移，之前使用的Font Icon
即将被弃用。
element-plus|element-plus Icon图标统一导入及注册
文章图片

  1. 安装
    $ yarn add @element-plus/icons # 或者 $ npm install @element-plus/icons

  2. 基础使用
    在需要加载图标的页面内按需引入所需图标。（ps:这里官方文档并没有详细说明）

  1. 统一导入并注册
    //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，当数组下标为字符串时，会报错。
    element-plus|element-plus Icon图标统一导入及注册
    文章图片

    解决方法：在tsconfig.json内添加如下规则：
    "suppressImplicitAnyIndexErrors": true

  2. 在组件中直接使用
    element-plus|element-plus Icon图标统一导入及注册
    文章图片

    点击图标，复制相应的icon，粘贴到要加载的位置，直接使用。

  3. 【element-plus|element-plus Icon图标统一导入及注册】动态使用
    例如：想要在el-menu组件中动态使用Icon图标，使用动态组件即可实现。
    // router.js const routes = [ { path: '/dashboard', component: Layout, meta: { title: '首页', icon: 'HomeFilled' }, children: [] } ]

    // MenuItem.vue

    推荐阅读


    上一篇：Mybatis源码-加载映射文件与动态代理

    下一篇：伪前端花式调接口