feat:element-plus字体图标不显示问题修复

src/layout/components/Navbar.vue

@@ -1,51 +1,55 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+               @toggleClick="toggleSideBar"/>
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-<!--        <search id="header-search" class="right-menu-item" />
+        <!--        <search id="header-search" class="right-menu-item" />
-
+                <error-log class="errLog-container right-menu-item hover-effect" />-->
-        <error-log class="errLog-container right-menu-item hover-effect" />-->
+        <screenfull id="screenfull" class="right-menu-item hover-effect"/>
-
+        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+                  <size-select id="size-select" class="right-menu-item hover-effect" />
-
+                </el-tooltip>-->
-<!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
-
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-
+          <el-icon>
-          <i class="el-icon-caret-bottom" />
+            <caret-bottom/>
+          </el-icon>
         </div>
-        <el-dropdown-menu slot="dropdown">
+
-          <router-link to="/">
+        <template #dropdown>
-            <el-dropdown-item>Dashboard</el-dropdown-item>
+          <el-dropdown-menu>
-          </router-link>
+            <router-link to="/">
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+              <el-dropdown-item>首页</el-dropdown-item>
-            <el-dropdown-item>Github</el-dropdown-item>
+            </router-link>
-          </a>
+            <a target="_blank" href="https://github.com/hxrui">
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+              <el-dropdown-item>Github</el-dropdown-item>
-            <el-dropdown-item>Docs</el-dropdown-item>
+            </a>
-          </a>
+            <a target="_blank" href="https://gitee.com/haoxr">
-          <el-dropdown-item divided @click.native="logout">
+              <el-dropdown-item>Gitee</el-dropdown-item>
-            <span style="display:block;">Log Out</span>
+            </a>
-          </el-dropdown-item>
+            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
-        </el-dropdown-menu>
+              <el-dropdown-item>项目文档</el-dropdown-item>
+            </a>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display:block;">退出</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
       </el-dropdown>
     </div>
   </div>
 </template>
 <script>
-import {reactive,computed,toRefs} from "vue";
+import {reactive, computed, toRefs} from "vue";
 import {useStore} from "@/store";
-import {useRoute,useRouter} from "vue-router"
+import {useRoute, useRouter} from "vue-router"
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
 import Screenfull from '@/components/screenfull/index.vue'
@@ -71,16 +75,16 @@ export default {
       return store.state.user.avatar
     })
 
-    const state=reactive({
+    const state = reactive({
-      toggleSideBar:()=>{
+      toggleSideBar: () => {
         store.dispatch('app/toggleSideBar', false)
       },
-      logout:()=>{
+      logout: () => {
         store.dispatch('user/logout')
         router.push(`/login?redirect=${route.fullPath}`)
       }
     })
-    return{
+    return {
       sidebar,
       device,
       avatar,

src/main.ts

@@ -5,16 +5,26 @@ import {store,key} from './store'
 import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/index.css'
-
 import 'virtual:svg-icons-register';
 
 
+// @see https://blog.csdn.net/qq_37213281/article/details/121422027
+import * as ElIconModules from '@element-plus/icons'
+
+
 import '@/permission'
 
 const app=createApp(App)
+
+// 统一注册el-icon图标
+for(let iconName in ElIconModules){
+    // @ts-ignore
+    app.component(iconName,ElIconModules[iconName] )
+}
+
 app
     .use(router)
     .use(store,key)
     .use(ElementPlus)
-    .mount('#app')
+    .mount('#app')