From 1a8529fd99668ad9fd3299bac27cbbbd8c49998a Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Sat, 3 Jun 2023 17:24:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor!:=20=E7=A7=BB=E9=99=A4=20el-icon=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileUpload/index.vue          |  4 +-
 src/components/ImagePreview/index.vue        |  4 +-
 src/components/ImageUpload/index.vue         | 14 ++--
 src/components/ImagesUpload/index.vue        | 22 ++----
 src/components/PageMain/index.vue            |  4 +-
 src/components/SearchBar/index.vue           |  4 +-
 src/components/SvgIcon/index.vue             | 70 +++++++++++++-------
 src/components/Trend/index.vue               |  8 +--
 src/layouts/components/AppSetting/index.vue  | 60 +++++------------
 src/layouts/components/Header/index.vue      |  8 +--
 src/layouts/components/MainSidebar/index.vue |  6 +-
 src/layouts/components/Search/index.vue      | 24 ++-----
 src/layouts/components/SidebarItem/index.vue |  8 +--
 src/layouts/components/Tools/index.vue       | 28 +++-----
 src/layouts/components/Topbar/index.vue      | 10 ++-
 src/layouts/components/views/link.vue        |  4 +-
 src/layouts/index.vue                        |  6 +-
 src/views/index.vue                          |  4 +-
 src/views/login.vue                          | 36 +++-------
 19 files changed, 115 insertions(+), 209 deletions(-)

diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index b1733174..3c6bf11a 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -73,9 +73,7 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     drag
   >
     <div class="slot">
-      <el-icon class="el-icon--upload">
-        <svg-icon name="ep:upload-filled" />
-      </el-icon>
+      <svg-icon name="ep:upload-filled" class="el-icon--upload" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 683cd8ab..1133ae45 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -28,9 +28,7 @@ const realHeight = computed(() => {
   <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
     <template #error>
       <div class="image-slot">
-        <el-icon>
-          <svg-icon name="image-load-fail" />
-        </el-icon>
+        <svg-icon name="image-load-fail" />
       </div>
     </template>
   </el-image>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 173544af..ec0c4431 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -104,9 +104,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
         <template #error>
           <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <el-icon>
-              <svg-icon name="ep:plus" />
-            </el-icon>
+            <svg-icon name="ep:plus" />
           </div>
         </template>
       </el-image>
@@ -115,14 +113,10 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <div class="mask">
           <div class="actions">
             <span title="预览" @click.stop="preview">
-              <el-icon>
-                <svg-icon name="ep:zoom-in" />
-              </el-icon>
+              <svg-icon name="ep:zoom-in" />
             </span>
             <span title="移除" @click.stop="remove">
-              <el-icon>
-                <svg-icon name="ep:delete" />
-              </el-icon>
+              <svg-icon name="ep:delete" />
             </span>
           </div>
         </div>
@@ -185,7 +179,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index f7303500..9dd70e1a 100644
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -112,24 +112,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       <div class="mask">
         <div class="actions">
           <span title="预览" @click="preview(index)">
-            <el-icon>
-              <svg-icon name="ep:zoom-in" />
-            </el-icon>
+            <svg-icon name="ep:zoom-in" />
           </span>
           <span title="移除" @click="remove(index)">
-            <el-icon>
-              <svg-icon name="ep:delete" />
-            </el-icon>
+            <svg-icon name="ep:delete" />
           </span>
           <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <el-icon>
-              <svg-icon name="ep:back" />
-            </el-icon>
+            <svg-icon name="ep:back" />
           </span>
           <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <el-icon>
-              <svg-icon name="ep:right" />
-            </el-icon>
+            <svg-icon name="ep:right" />
           </span>
         </div>
       </div>
@@ -148,9 +140,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       class="images-upload"
     >
       <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <el-icon>
-          <svg-icon name="ep:plus" />
-        </el-icon>
+        <svg-icon name="ep:plus" />
       </div>
       <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
         <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
@@ -218,7 +208,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index 5ee1a64d..e1a853e8 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -40,9 +40,7 @@ function unCollaspe() {
     </div>
     <slot />
     <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
-      <el-icon>
-        <svg-icon name="ep:arrow-down" />
-      </el-icon>
+      <svg-icon name="ep:arrow-down" />
     </div>
   </div>
 </template>
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index 9eb6732d..51af7bd9 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -44,9 +44,7 @@ function toggle() {
     <div v-if="showToggle" class="toggle">
       <el-button text size="small" @click="toggle">
         <template #icon>
-          <el-icon>
-            <svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
-          </el-icon>
+          <svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
         </template>
         {{ isFold ? '展开' : '收起' }}
       </el-button>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 38d8d755..657c520f 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,48 +1,68 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
-const props = withDefaults(
-  defineProps<{
-    name: string
-    flip?: 'horizontal' | 'vertical' | 'both' | ''
-    rotate?: number
-  }>(),
-  {
-    flip: '',
-    rotate: 0,
-  },
-)
+const props = defineProps<{
+  name: string
+  flip?: 'horizontal' | 'vertical' | 'both'
+  rotate?: number
+  color?: string
+  size?: string | number
+}>()
 
 defineOptions({
   name: 'SvgIcon',
 })
 
-const transformStyle = computed(() => {
-  const style = []
-  if (props.flip !== '') {
+const style = computed(() => {
+  const transform = []
+  if (props.flip) {
     switch (props.flip) {
       case 'horizontal':
-        style.push('rotateY(180deg)')
+        transform.push('rotateY(180deg)')
         break
       case 'vertical':
-        style.push('rotateX(180deg)')
+        transform.push('rotateX(180deg)')
         break
       case 'both':
-        style.push('rotateX(180deg)')
-        style.push('rotateY(180deg)')
+        transform.push('rotateX(180deg)')
+        transform.push('rotateY(180deg)')
         break
     }
   }
-  if (props.rotate !== 0) {
-    style.push(`rotate(${props.rotate}deg)`)
+  if (props.rotate) {
+    transform.push(`rotate(${props.rotate % 360}deg)`)
+  }
+  return {
+    ...(props.color && { color: props.color }),
+    ...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
+    ...(transform.length && { transform: transform.join(' ') }),
   }
-  return `transform: ${style.join(' ')};`
 })
 </script>
 
 <template>
-  <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
-  <svg v-else :style="transformStyle" aria-hidden="true">
-    <use :xlink:href="`#icon-${name}`" />
-  </svg>
+  <i class="icon" :style="style">
+    <Icon v-if="name.indexOf('ep:') === 0" :icon="name" />
+    <svg v-else aria-hidden="true">
+      <use :xlink:href="`#icon-${name}`" />
+    </svg>
+  </i>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentcolor;
+
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}
+</style>
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
index aa05ddc2..054b4b54 100644
--- a/src/components/Trend/index.vue
+++ b/src/components/Trend/index.vue
@@ -33,9 +33,7 @@ const isUp = computed(() => {
     <span v-if="prefix" class="prefix">{{ prefix }}</span>
     <span class="text">{{ value }}</span>
     <span v-if="suffix" class="suffix">{{ suffix }}</span>
-    <el-icon>
-      <svg-icon name="ep:caret-top" />
-    </el-icon>
+    <svg-icon name="ep:caret-top" />
   </div>
 </template>
 
@@ -52,12 +50,12 @@ const isUp = computed(() => {
   &.down {
     color: var(--el-color-danger);
 
-    .el-icon {
+    .icon {
       transform: rotate(180deg);
     }
   }
 
-  .el-icon {
+  .icon {
     margin-left: 5px;
     transition: transform 0.3s;
   }
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index 19fe7f90..cac966b4 100644
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -51,9 +51,7 @@ function handleCopy() {
       <el-divider>颜色主题</el-divider>
       <div class="color-scheme">
         <div class="switch" :class="settingsStore.settings.app.colorScheme" @click="settingsStore.settings.app.colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
-          <el-icon class="icon">
-            <svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
-          </el-icon>
+          <svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
         </div>
       </div>
       <el-divider v-if="settingsStore.mode === 'pc'">
@@ -63,25 +61,19 @@ function handleCopy() {
         <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
           <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
             <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
+            <svg-icon name="ep:check" />
           </div>
         </el-tooltip>
         <el-tooltip content="顶部模式" placement="top" :show-after="500">
           <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
             <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
+            <svg-icon name="ep:check" />
           </div>
         </el-tooltip>
         <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
           <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
             <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
+            <svg-icon name="ep:check" />
           </div>
         </el-tooltip>
       </div>
@@ -90,9 +82,7 @@ function handleCopy() {
         <div class="label">
           主导航切换跳转
           <el-tooltip content="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
@@ -101,9 +91,7 @@ function handleCopy() {
         <div class="label">
           次导航保持展开一个
           <el-tooltip content="开启该功能后，次导航只保持单个菜单的展开" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
@@ -148,9 +136,7 @@ function handleCopy() {
         <div class="label">
           全屏
           <el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.toolbar.enableFullscreen" />
@@ -159,9 +145,7 @@ function handleCopy() {
         <div class="label">
           页面刷新
           <el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.toolbar.enablePageReload" />
@@ -170,9 +154,7 @@ function handleCopy() {
         <div class="label">
           颜色主题
           <el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.toolbar.enableColorScheme" />
@@ -191,9 +173,7 @@ function handleCopy() {
         <div class="label">
           是否启用
           <el-tooltip content="对导航进行快捷搜索" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.navSearch.enable" />
@@ -240,9 +220,7 @@ function handleCopy() {
         <div class="label">
           是否开启
           <el-tooltip content="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.home.enable" />
@@ -258,9 +236,7 @@ function handleCopy() {
         <div class="label">
           组件尺寸
           <el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-radio-group v-model="settingsStore.settings.app.elementSize" size="small">
@@ -285,9 +261,7 @@ function handleCopy() {
         <div class="label">
           载入进度条
           <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.app.enableProgress" />
@@ -296,9 +270,7 @@ function handleCopy() {
         <div class="label">
           动态标题
           <el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
+            <svg-icon name="ep:question-filled" />
           </el-tooltip>
         </div>
         <el-switch v-model="settingsStore.settings.app.enableDynamicTitle" />
@@ -306,9 +278,7 @@ function handleCopy() {
       <template v-if="isSupported" #footer>
         <el-button type="primary" @click="handleCopy">
           <template #icon>
-            <el-icon>
-              <svg-icon name="ep:document-copy" />
-            </el-icon>
+            <svg-icon name="ep:document-copy" />
           </template>
           复制配置
         </el-button>
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index 0b5a09fd..f3917291 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -34,9 +34,7 @@ function handlerMouserScroll(event: WheelEvent) {
             <template v-for="(item, index) in menuStore.allMenus" :key="index">
               <div v-if="item.children && item.children.length !== 0" class="item-container" :class="{ active: index === menuStore.actived }">
                 <div class="item" @click="switchTo(index)">
-                  <el-icon v-if="item.meta?.icon">
-                    <svg-icon :name="item.meta.icon" />
-                  </el-icon>
+                  <svg-icon v-if="item.meta?.icon" :name="item.meta.icon" />
                   <span v-if="item.meta?.title">{{ item.meta.title }}</span>
                 </div>
               </div>
@@ -147,7 +145,7 @@ header {
           background-color: var(--g-header-menu-hover-bg);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
           vertical-align: middle;
         }
@@ -171,7 +169,7 @@ header {
   :deep(.tools) {
     padding: 0;
 
-    .buttons .item .el-icon {
+    .buttons .item .icon {
       color: var(--g-header-color);
     }
 
diff --git a/src/layouts/components/MainSidebar/index.vue b/src/layouts/components/MainSidebar/index.vue
index 7bae4d59..12efaf15 100644
--- a/src/layouts/components/MainSidebar/index.vue
+++ b/src/layouts/components/MainSidebar/index.vue
@@ -25,9 +25,7 @@ const { switchTo } = useMenu()
               active: index === menuStore.actived,
             }" :title="item.meta?.title ?? '[ 无标题 ]'" @click="switchTo(index)"
           >
-            <el-icon v-if="item.meta?.icon">
-              <svg-icon :name="item.meta.icon" />
-            </el-icon>
+            <svg-icon v-if="item.meta?.icon" :name="item.meta.icon" />
             <span>{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
           </div>
         </template>
@@ -89,7 +87,7 @@ const { switchTo } = useMenu()
         background-color: var(--g-main-sidebar-menu-active-bg);
       }
 
-      .el-icon {
+      .icon {
         margin: 0 auto;
         font-size: 24px;
       }
diff --git a/src/layouts/components/Search/index.vue b/src/layouts/components/Search/index.vue
index d0da594f..a39cfc34 100644
--- a/src/layouts/components/Search/index.vue
+++ b/src/layouts/components/Search/index.vue
@@ -246,9 +246,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
       <div class="search-box" @click.stop>
         <el-input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
           <template #prefix>
-            <el-icon>
-              <svg-icon name="ep:search" />
-            </el-icon>
+            <svg-icon name="ep:search" />
           </template>
         </el-input>
         <div v-if="settingsStore.mode === 'pc'" class="tips">
@@ -262,14 +260,10 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
           </div>
           <div class="tip">
             <el-tag type="info" size="large">
-              <el-icon>
-                <svg-icon name="search-up" />
-              </el-icon>
+              <svg-icon name="search-up" />
             </el-tag>
             <el-tag type="info" size="large">
-              <el-icon>
-                <svg-icon name="search-down" />
-              </el-icon>
+              <svg-icon name="search-down" />
             </el-tag>
             <el-tag type="info" size="large">
               切换搜索结果
@@ -277,9 +271,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
           </div>
           <div class="tip">
             <el-tag type="info" size="large">
-              <el-icon>
-                <svg-icon name="search-enter" />
-              </el-icon>
+              <svg-icon name="search-enter" />
             </el-tag>
             <el-tag type="info" size="large">
               访问页面
@@ -297,9 +289,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
       </div>
       <div ref="searchResultRef" class="result">
         <a v-for="(item, index) in resultList" :key="item.path" :ref="setSearchResultItemRef" class="item" :class="{ actived: index === actived }" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
-          <el-icon class="icon">
-            <svg-icon v-if="item.icon" :name="item.icon" />
-          </el-icon>
+          <svg-icon v-if="item.icon" :name="item.icon" />
           <div class="info">
             <div class="title">
               {{ item.title ?? '[ 无标题 ]' }}
@@ -307,9 +297,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
             <div class="breadcrumb">
               <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
                 {{ bc ?? '[ 无标题 ]' }}
-                <el-icon>
-                  <svg-icon name="ep:arrow-right" />
-                </el-icon>
+                <svg-icon name="ep:arrow-right" />
               </span>
             </div>
             <div class="path">{{ item.path }}</div>
diff --git a/src/layouts/components/SidebarItem/index.vue b/src/layouts/components/SidebarItem/index.vue
index aedb2bdc..dfb2a44c 100644
--- a/src/layouts/components/SidebarItem/index.vue
+++ b/src/layouts/components/SidebarItem/index.vue
@@ -38,18 +38,14 @@ const hasChildren = computed(() => {
     <router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
       <a :href="item.meta?.link ? item.meta.link : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="item.meta?.link ? '_blank' : '_self'" @click="navigate">
         <el-menu-item :title="item.meta?.title ?? '[ 无标题 ]'" :index="resolveRoutePath(basePath, item.path || '')">
-          <el-icon v-if="item.meta?.icon" class="title-icon">
-            <svg-icon :name="item.meta.icon" />
-          </el-icon>
+          <svg-icon v-if="item.meta?.icon" :name="item.meta.icon" class="title-icon" />
           <span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
         </el-menu-item>
       </a>
     </router-link>
     <el-sub-menu v-else :title="item.meta?.title ?? '[ 无标题 ]'" :index="settingsStore.settings.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path) : JSON.stringify(item)">
       <template #title>
-        <el-icon v-if="item.meta?.icon" class="title-icon">
-          <svg-icon :name="item.meta.icon" />
-        </el-icon>
+        <svg-icon v-if="item.meta?.icon" :name="item.meta.icon" class="title-icon" />
         <span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
       </template>
       <template v-for="route in (item.children as Menu.recordRaw[])">
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 1ab73dd8..9092cbf0 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -42,38 +42,26 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
   <div class="tools">
     <div class="buttons">
       <span v-if="settingsStore.settings.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
-        <el-icon>
-          <svg-icon name="ep:search" />
-        </el-icon>
+        <svg-icon name="ep:search" />
       </span>
       <span v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen" class="item" @click="toggle">
-        <el-icon>
-          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
-        </el-icon>
+        <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
       </span>
       <span v-if="settingsStore.settings.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
-        <el-icon>
-          <svg-icon name="ep:refresh-right" />
-        </el-icon>
+        <svg-icon name="ep:refresh-right" />
       </span>
       <span v-if="settingsStore.settings.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark')">
-        <el-icon>
-          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
-          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
-        </el-icon>
+        <svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
+        <svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
       </span>
     </div>
     <el-dropdown class="user-container" size="default" @command="userCommand">
       <div class="user-wrapper">
         <el-avatar size="small">
-          <el-icon>
-            <svg-icon name="ep:user-filled" />
-          </el-icon>
+          <svg-icon name="ep:user-filled" />
         </el-avatar>
         {{ userStore.account }}
-        <el-icon>
-          <svg-icon name="ep:caret-bottom" />
-        </el-icon>
+        <svg-icon name="ep:caret-bottom" />
       </div>
       <template #dropdown>
         <el-dropdown-menu class="user-dropdown">
@@ -114,7 +102,7 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
       cursor: pointer;
       vertical-align: middle;
 
-      .el-icon {
+      .icon {
         color: var(--el-text-color-primary);
         transition: var(--el-transition-color);
       }
diff --git a/src/layouts/components/Topbar/index.vue b/src/layouts/components/Topbar/index.vue
index 55918339..1475d82d 100644
--- a/src/layouts/components/Topbar/index.vue
+++ b/src/layouts/components/Topbar/index.vue
@@ -64,9 +64,7 @@ function pathCompile(path: string) {
   >
     <div class="left-box">
       <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
-        <el-icon>
-          <svg-icon name="toolbar-collapse" />
-        </el-icon>
+        <svg-icon name="toolbar-collapse" />
       </div>
       <el-breadcrumb v-if="settingsStore.settings.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'">
         <transition-group name="breadcrumb">
@@ -119,16 +117,16 @@ function pathCompile(path: string) {
       height: 50px;
       cursor: pointer;
 
-      .el-icon {
+      .icon {
         color: var(--el-text-color-primary);
         transition: var(--el-transition-color), var(--el-transition-md-fade);
       }
 
-      &:hover .el-icon {
+      &:hover .icon {
         color: var(--el-color-primary);
       }
 
-      &.is-collapse .el-icon {
+      &.is-collapse .icon {
         transform: rotateZ(-180deg);
       }
 
diff --git a/src/layouts/components/views/link.vue b/src/layouts/components/views/link.vue
index fd13a9ad..14cb8922 100644
--- a/src/layouts/components/views/link.vue
+++ b/src/layouts/components/views/link.vue
@@ -23,9 +23,7 @@ function open() {
           </div>
           <el-button type="primary" plain round @click="open">
             <template #icon>
-              <el-icon>
-                <svg-icon name="ep:link" />
-              </el-icon>
+              <svg-icon name="ep:link" />
             </template>
             立即访问
           </el-button>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 6a874829..b3e841f3 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -95,9 +95,7 @@ onUnmounted(() => {
     <Search />
     <HotkeysIntro />
     <div v-if="settingsStore.settings.app.enableAppSetting">
-      <el-icon class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
-        <svg-icon name="ep:setting" />
-      </el-icon>
+      <svg-icon name="ep:setting" class="app-setting" @click="eventBus.emit('global-app-setting-toggle')" />
       <AppSetting />
     </div>
   </div>
@@ -247,7 +245,7 @@ header:not(.header-leave-active) + .wrapper {
   background-color: var(--el-color-primary);
   cursor: pointer;
 
-  svg {
+  :deep(svg) {
     animation: rotate 5s linear infinite;
   }
 
diff --git a/src/views/index.vue b/src/views/index.vue
index 06614b47..db45bfcd 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -67,9 +67,7 @@ const oneStepAdminInfo = ref({
         <el-dropdown>
           <el-button type="primary" size="large">
             代码仓库
-            <el-icon class="el-icon--right">
-              <svg-icon name="ep:arrow-down" />
-            </el-icon>
+            <svg-icon name="ep:arrow-down" class="el-icon--right" />
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
diff --git a/src/views/login.vue b/src/views/login.vue
index 72c6e4da..974e7224 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -165,18 +165,14 @@ function testAccount(account: string) {
           <el-form-item prop="account">
             <el-input v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
+                <svg-icon name="ep:user" />
               </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
             <el-input v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="on" show-password @keyup.enter="handleLogin">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
+                <svg-icon name="ep:lock" />
               </template>
             </el-input>
           </el-form-item>
@@ -218,18 +214,14 @@ function testAccount(account: string) {
           <el-form-item prop="account">
             <el-input v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
+                <svg-icon name="ep:user" />
               </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="captcha">
             <el-input v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:key" />
-                </el-icon>
+                <svg-icon name="ep:key" />
               </template>
               <template #append>
                 <el-button>发送验证码</el-button>
@@ -239,18 +231,14 @@ function testAccount(account: string) {
           <el-form-item prop="password">
             <el-input v-model="registerForm.password" type="password" placeholder="密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
+                <svg-icon name="ep:lock" />
               </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="checkPassword">
             <el-input v-model="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4" autocomplete="on" show-password>
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
+                <svg-icon name="ep:lock" />
               </template>
             </el-input>
           </el-form-item>
@@ -275,18 +263,14 @@ function testAccount(account: string) {
           <el-form-item prop="account">
             <el-input v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
+                <svg-icon name="ep:user" />
               </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="captcha">
             <el-input v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:key" />
-                </el-icon>
+                <svg-icon name="ep:key" />
               </template>
               <template #append>
                 <el-button>发送验证码</el-button>
@@ -296,9 +280,7 @@ function testAccount(account: string) {
           <el-form-item prop="newPassword">
             <el-input v-model="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
+                <svg-icon name="ep:lock" />
               </template>
             </el-input>
           </el-form-item>