1、安装包
# NPMnpm install @element-plus/icons-vue# Yarnyarn 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) {ponent(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>
如果觉得《Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）》对你有帮助，请点赞、收藏，并留下你的观点哦！
