Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单
1、安装图标库
npm install @element-plus/icons
2、注册
main.ts文件中引入并注册
import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import * as ElIcons from '@element-plus/icons'const app = createApp(App)for (const name in ElIcons){ponent(name,(ElIcons as any)[name])}app.use(ElementPlus).mount('#app')
3、在组件中直接使用
// 结合按钮使用<el-button type="primary" icon="Edit" >编辑</el-button><el-buttonsize="mini"type="primary"class="inline-block"icon="More"title="详情"@click="handleDetail(row.id)"/>// 结合el-icon使用<el-icon><delete /></el-icon>
4、在el-menu组件中动态使用
如果想在渲染菜单时动态使用icon图标，需要使用动态组件，举个栗子：
// 路由文件export const routes: Array<RouteRecordRaw> = [{path: '/',component: Layout,redirect: 'home',children: [{path: '/home',component: () => import('@/views/Home.vue'),name: 'Home',meta: { title: '首页', icon: 'HomeFilled' },},],},]// 使用el-menu的文件<template><div><el-scrollbar wrap-class="scrollbar-wrapper"><el-menurouter:default-active="activeMenu"@open="handleOpen"@close="handleClose"><template v-for="route in menuList" :key="route.path"><el-menu-item v-if="!route.children" :index="route.path"><el-icon><component :is="route.meta.icon" /></el-icon><span>{{ route.meta.title }}</span></el-menu-item><el-sub-menu v-else :index="route.path"><template #title><el-icon><component :is="route.meta.icon" /></el-icon><span>{{ route.meta.title }}</span></template><el-menu-itemv-for="subRoute in route.children":key="subRoute.path":index="subRoute.path"><el-icon><component :is="subRoute.meta.icon" /></el-icon><span>{{ subRoute.meta.title }}</span></el-menu-item></el-sub-menu></template></el-menu></el-scrollbar></div></template><script lang="ts">import { defineComponent, computed } from 'vue'import { useRoute } from 'vue-router'import { routes } from '@/router/index'export default defineComponent({setup() {const route = useRoute()const activeMenu = computed(() => {const { meta, path } = routeif (meta.activeMenu) {return meta.activeMenu}return path})const menuList = computed(() => (routes as any).find((item: any) => item.path === '/').children)return { activeMenu, menuList }},})</script>
