安装icon
npm install @element-plus/icons-vue
当前版本
"dependencies": {"@element-plus/icons-vue": "^0.2.4","core-js": "^3.8.3","element-plus": "^1.3.0-beta.1","node-sass": "^7.0.1","sass-loader": "^12.4.0","vue": "^3.2.13","vue-router": "^4.0.3","vuex": "^4.0.0"},
路由中指定icon
const routes = [{path: "/",component: () => import("@/views/HomeView"),name: "Home",meta: {title: "首页", icon: "HomeFilled" },},{path: "/electricity",name: "Electricity",meta: {title: "电表", icon: "Box" },component: () => import("@/views/electricity/setting"),},{path: "/about",component: () => import("@/views/AboutView"),name: "About",meta: {title: "系统管理", icon: "Tools" },},];
全局注册icon
import * as ElIconModules from "@element-plus/icons-vue";Object.keys(ElIconModules).forEach(function (key) {ponent(ElIconModules[key].name, ElIconModules[key]);});
示例
import {createApp } from "vue";import App from "./App.vue";import router from "./router";import store from "./store";import ElementPlus from "element-plus";import "element-plus/theme-chalk/index.css";import * as ElIconModules from "@element-plus/icons-vue";import "@/styles/index.scss";const app = createApp(App);app.use(store);app.use(router);app.use(ElementPlus);Object.keys(ElIconModules).forEach(function (key) {ponent(ElIconModules[key].name, ElIconModules[key]);});app.mount("#app");
图标使用方法
<el-icon><component :is="route.meta.icon" /></el-icon>
菜单示例
<el-menu router :default-active="$route.path"><el-menu-itemv-for="route in routes":key="route.path":index="route.path"><template #title><el-icon><component :is="route.meta.icon" /></el-icon><!-- <i :class="route.meta.icon"></i> --><span>{{ route.meta.title }}</span></template></el-menu-item></el-menu>
效果图
