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

src/layout/components/Navbar.vue

@@ -1,43 +1,47 @@
 <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"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <!--        <search id="header-search" class="right-menu-item" />
-
                 <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">
                   <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">
+
+        <template #dropdown>
+          <el-dropdown-menu>
             <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
+              <el-dropdown-item>首页</el-dropdown-item>
             </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+            <a target="_blank" href="https://github.com/hxrui">
               <el-dropdown-item>Github</el-dropdown-item>
             </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <a target="_blank" href="https://gitee.com/haoxr">
-            <el-dropdown-item>Docs</el-dropdown-item>
+              <el-dropdown-item>Gitee</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
+              <el-dropdown-item>项目文档</el-dropdown-item>
             </a>
             <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+              <span style="display:block;">退出</span>
             </el-dropdown-item>
           </el-dropdown-menu>
+        </template>
       </el-dropdown>
     </div>
   </div>

src/main.ts

@@ -5,14 +5,24 @@ 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)