Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）

Fxhani

已于 2022-02-18 17:22:48 修改

阅读量2k

点赞数 1

文章标签： vue.js typescript

于 2022-02-18 17:21:21 首次发布

本文链接：https://blog.csdn.net/fxhani/article/details/123007361

版权

1、安装包

# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue

2、全局注册

import { createApp } from 'vue';
// 引入 element-plus UI框架
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ELIcons from '@element-plus/icons-vue';
import App from './App.vue';

const app = createApp(App);
for (const name in ELIcons) {
    app.component(name, (ELIcons as any)[name]);
}
app.use(ElementPlus).mount('#app');

3、在组件中使用

<el-icon :size="20">
 	<edit />
</el-icon>
// 按钮中使用
<el-button type="primary" :icon="Edit"></el-button>

4、动态路由菜单图标

// router 路由文件
export const constantRoutes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: layout,
        redirect: '/home',
        meta: {
            title: '首页',
            icon: 'home-filled',
        },
        children: [
            {
                path: '/home',
                name: '首页',
                component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
            },
        ],
    },
]

// 在用到 el-menu的文件中
<el-menu-item :key="item.path" :index="item.path" :route="item.path">
     <el-icon>
       <component :is="item.meta.icon" />
     </el-icon>
     <template #title>{{ item.meta.title }}</template>
</el-menu-item>