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

---
 src/assets/icons/pro.svg                      |  1 -
 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/BuyIt/index.vue        | 18 ++---
 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        | 71 +++----------------
 src/layouts/components/Topbar/index.vue       | 10 ++-
 src/layouts/components/views/link.vue         |  4 +-
 src/layouts/index.vue                         |  6 +-
 .../components/button.vue                     | 64 +++++------------
 .../components/icon.vue                       | 18 ++---
 .../components/input.vue                      |  8 +--
 .../components/link.vue                       |  8 +--
 src/views/component_basic_example/index.vue   |  4 +-
 .../pageheader.demo.vue                       |  4 +-
 .../searchbar.demo.vue                        | 32 +++------
 .../component_extend_example/svg.demo.vue     | 28 +++-----
 src/views/index.vue                           |  4 +-
 src/views/jsx_example/index.tsx               |  4 +-
 src/views/login.vue                           | 36 +++-------
 src/views/mock_example/index.vue              |  4 +-
 31 files changed, 167 insertions(+), 393 deletions(-)
 delete mode 100644 src/assets/icons/pro.svg

diff --git a/src/assets/icons/pro.svg b/src/assets/icons/pro.svg
deleted file mode 100644
index 9329c6ad..00000000
--- a/src/assets/icons/pro.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#FC455D" d="M798.663 952.212h-565.04a165.7 165.7 0 0 1-165.701-165.7v-426.68a55.234 55.234 0 0 1 82.85-47.225l156.311 94.173 165.701-175.92A53.024 53.024 0 0 1 512 213.187a55.234 55.234 0 0 1 40.32 18.227l157.416 174.538 152.998-93.344a55.234 55.234 0 0 1 82.85 47.224V693.72a55.234 55.234 0 0 1-110.467 0V458.147l-107.982 66.004a55.234 55.234 0 0 1-69.87-10.218L512 350.165 357.346 515.866a55.234 55.234 0 0 1-68.766 9.39l-110.467-66.833v326.983a55.234 55.234 0 0 0 55.233 55.234h565.317a55.234 55.234 0 0 1 0 110.467z"/><path fill="#FF9B57" d="M118.694 239.439a55.234 55.234 0 1 0 78.112-78.112 55.234 55.234 0 1 0-78.112 78.112zm354.137-101.691a55.234 55.234 0 1 0 78.113-78.113 55.234 55.234 0 1 0-78.113 78.113zm345.427 101.656a55.234 55.234 0 1 0 78.113-78.112 55.234 55.234 0 1 0-78.113 78.112z"/><path fill="#FD8F9E" d="M517.247 795.349a41.425 41.425 0 0 1-32.864-17.123l-93.62-128.142a41.425 41.425 0 0 1 66.003-48.606l57.167 78.985 49.434-77.051a41.425 41.425 0 1 1 69.595 44.739l-82.85 128.142a41.425 41.425 0 0 1-33.693 19.056z"/></svg>
\ No newline at end of file
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/BuyIt/index.vue b/src/layouts/components/BuyIt/index.vue
index 8ba96a2c..cdf310f7 100644
--- a/src/layouts/components/BuyIt/index.vue
+++ b/src/layouts/components/BuyIt/index.vue
@@ -45,27 +45,19 @@ function open(url: string) {
 <template>
   <div class="buy-it" :class="{ actived: isActived }">
     <div class="item" @click="open(`https://fantastic-admin.gitee.io/buy.html`)">
-      <el-icon>
-        <svg-icon name="fixed-right-buy" />
-      </el-icon>
+      <svg-icon name="fixed-right-buy" />
       <span class="title">购买<br>专业版</span>
     </div>
     <div class="item" @click="open('https://gitee.com/fantastic-admin/basic')">
-      <el-icon>
-        <svg-icon name="fixed-right-code" />
-      </el-icon>
+      <svg-icon name="fixed-right-code" />
       <span class="title">下载<br>基础版</span>
     </div>
     <div class="item" @click="open(`https://fantastic-admin.gitee.io`)">
-      <el-icon>
-        <svg-icon name="fixed-right-doc" />
-      </el-icon>
+      <svg-icon name="fixed-right-doc" />
       <span class="title">开发<br>文档</span>
     </div>
     <div class="item" @click="open(`https://fantastic-admin.gitee.io/support.html`)">
-      <el-icon>
-        <svg-icon name="fixed-right-chat" />
-      </el-icon>
+      <svg-icon name="fixed-right-chat" />
       <span class="title">技术<br>支持</span>
     </div>
   </div>
@@ -129,7 +121,7 @@ function open(url: string) {
       background-color: #343b42;
     }
 
-    .el-icon {
+    .icon {
       display: block;
       margin: 0 auto;
       font-size: 20px;
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 85d1123f..9092cbf0 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -36,53 +36,32 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
       break
   }
 }
-function pro() {
-  window.open('https://fantastic-admin.gitee.io/pro-example/', '_blank')
-}
 </script>
 
 <template>
   <div class="tools">
     <div class="buttons">
-      <span v-if="settingsStore.mode === 'pc'" class="item item-pro" @click="pro">
-        <el-icon>
-          <svg-icon name="pro" />
-        </el-icon>
-        <span class="title">查看专业版</span>
-      </span>
       <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">
@@ -123,45 +102,11 @@ function pro() {
       cursor: pointer;
       vertical-align: middle;
 
-      .el-icon {
+      .icon {
         color: var(--el-text-color-primary);
         transition: var(--el-transition-color);
       }
     }
-
-    .item-pro {
-      display: inline-flex;
-      align-items: center;
-      width: auto;
-      padding: 0 10px;
-      transform-origin: right center;
-      animation: pro-text 3s ease-out infinite;
-
-      @keyframes pro-text {
-        0%,
-        20% {
-          transform: scale(1);
-        }
-
-        50%,
-        70% {
-          transform: scale(1.2);
-        }
-
-        100% {
-          transform: scale(1);
-        }
-      }
-
-      .title {
-        padding-left: 5px;
-        font-weight: bold;
-        font-size: 14px;
-        background-image: linear-gradient(to right, #ffa237, #fc455d);
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
   }
 }
 
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 cfbef94d..4d8ecb32 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -96,9 +96,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>
     <BuyIt />
@@ -249,7 +247,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/component_basic_example/components/button.vue b/src/views/component_basic_example/components/button.vue
index 6cbd8ace..76248a20 100644
--- a/src/views/component_basic_example/components/button.vue
+++ b/src/views/component_basic_example/components/button.vue
@@ -64,44 +64,32 @@
     <el-row>
       <el-button circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:search" />
-          </el-icon>
+          <svg-icon name="ep:search" />
         </template>
       </el-button>
       <el-button type="primary" circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:edit" />
-          </el-icon>
+          <svg-icon name="ep:edit" />
         </template>
       </el-button>
       <el-button type="success" circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:check" />
-          </el-icon>
+          <svg-icon name="ep:check" />
         </template>
       </el-button>
       <el-button type="info" circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:message" />
-          </el-icon>
+          <svg-icon name="ep:message" />
         </template>
       </el-button>
       <el-button type="warning" circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:star" />
-          </el-icon>
+          <svg-icon name="ep:star" />
         </template>
       </el-button>
       <el-button type="danger" circle>
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:delete" />
-          </el-icon>
+          <svg-icon name="ep:delete" />
         </template>
       </el-button>
     </el-row>
@@ -174,76 +162,56 @@
     </el-divider>
     <el-button type="primary">
       <template #icon>
-        <el-icon>
-          <svg-icon name="i-ep:edit" />
-        </el-icon>
+        <svg-icon name="ep:edit" />
       </template>
     </el-button>
     <el-button type="primary">
       <template #icon>
-        <el-icon>
-          <svg-icon name="i-ep:share" />
-        </el-icon>
+        <svg-icon name="ep:share" />
       </template>
     </el-button>
     <el-button type="primary">
       <template #icon>
-        <el-icon>
-          <svg-icon name="i-ep:delete" />
-        </el-icon>
+        <svg-icon name="ep:delete" />
       </template>
     </el-button>
     <el-button type="primary">
       <template #icon>
-        <el-icon>
-          <svg-icon name="i-ep:search" />
-        </el-icon>
+        <svg-icon name="ep:search" />
       </template>
       搜索
     </el-button>
     <el-button type="primary">
       上传
-      <el-icon class="el-icon--right">
-        <svg-icon name="i-ep:upload" />
-      </el-icon>
+      <svg-icon name="ep:upload" class="el-icon--right" />
     </el-button>
     <el-divider content-position="left">
       按钮组
     </el-divider>
     <el-button-group style="margin-right: 10px;">
       <el-button type="primary">
-        <el-icon class="el-icon--left">
-          <svg-icon name="i-ep:arrow-left" />
-        </el-icon>
+        <svg-icon name="ep:arrow-left" class="el-icon--left" />
         上一页
       </el-button>
       <el-button type="primary">
         下一页
-        <el-icon class="el-icon--right">
-          <svg-icon name="i-ep:arrow-right" />
-        </el-icon>
+        <svg-icon name="ep:arrow-right" class="el-icon--right" />
       </el-button>
     </el-button-group>
     <el-button-group>
       <el-button type="primary">
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:edit" />
-          </el-icon>
+          <svg-icon name="ep:edit" />
         </template>
       </el-button>
       <el-button type="primary">
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:share" />
-          </el-icon>
+          <svg-icon name="ep:share" />
         </template>
       </el-button>
       <el-button type="primary">
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:delete" />
-          </el-icon>
+          <svg-icon name="ep:delete" />
         </template>
       </el-button>
     </el-button-group>
diff --git a/src/views/component_basic_example/components/icon.vue b/src/views/component_basic_example/components/icon.vue
index 37f1bd5d..85ac96d9 100644
--- a/src/views/component_basic_example/components/icon.vue
+++ b/src/views/component_basic_example/components/icon.vue
@@ -5,14 +5,12 @@ import { icons } from '@iconify-json/ep'
 <template>
   <div>
     <div class="demo">
-      <el-icon><svg-icon name="ep:edit" /></el-icon>
-      <el-icon><svg-icon name="ep:share" /></el-icon>
-      <el-icon><svg-icon name="ep:delete" /></el-icon>
+      <svg-icon name="ep:edit" />
+      <svg-icon name="ep:share" />
+      <svg-icon name="ep:delete" />
       <el-button type="primary">
         <template #icon>
-          <el-icon>
-            <svg-icon name="ep:search" />
-          </el-icon>
+          <svg-icon name="ep:search" />
         </template>
         搜索
       </el-button>
@@ -22,9 +20,7 @@ import { icons } from '@iconify-json/ep'
     </el-divider>
     <div v-for="(item, index) in icons.icons" :key="index" class="list-icon">
       <el-tooltip class="item" effect="dark" :content="`ep:${index}`" placement="top">
-        <el-icon>
-          <svg-icon :name="`ep:${index}`" />
-        </el-icon>
+        <svg-icon :name="`ep:${index}`" />
       </el-tooltip>
     </div>
   </div>
@@ -32,7 +28,7 @@ import { icons } from '@iconify-json/ep'
 
 <style lang="scss" scoped>
 .demo {
-  > .el-icon {
+  > .icon {
     color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
@@ -48,7 +44,7 @@ import { icons } from '@iconify-json/ep'
   display: inline-block;
   margin: 10px;
 
-  .el-icon {
+  .icon {
     font-size: 32px;
     color: #606266;
   }
diff --git a/src/views/component_basic_example/components/input.vue b/src/views/component_basic_example/components/input.vue
index 018e42c5..a2ea7af5 100644
--- a/src/views/component_basic_example/components/input.vue
+++ b/src/views/component_basic_example/components/input.vue
@@ -28,16 +28,12 @@ const textarea = ref('')
     </el-divider>
     <el-input v-model="input1" placeholder="请选择日期">
       <template #suffix>
-        <el-icon class="el-input__icon">
-          <svg-icon name="i-ep:calendar" />
-        </el-icon>
+        <svg-icon name="ep:calendar" />
       </template>
     </el-input>
     <el-input v-model="input2" placeholder="请输入内容">
       <template #prefix>
-        <el-icon class="el-input__icon">
-          <svg-icon name="i-ep:search" />
-        </el-icon>
+        <svg-icon name="ep:search" />
       </template>
     </el-input>
     <el-divider content-position="left">
diff --git a/src/views/component_basic_example/components/link.vue b/src/views/component_basic_example/components/link.vue
index c6568a95..bcf5b2aa 100644
--- a/src/views/component_basic_example/components/link.vue
+++ b/src/views/component_basic_example/components/link.vue
@@ -53,16 +53,12 @@
       图标
     </el-divider>
     <el-link>
-      <el-icon class="el-icon--left">
-        <svg-icon name="i-ep:edit" />
-      </el-icon>
+      <svg-icon name="i-ep:edit" class="el-icon--left" />
       编辑
     </el-link>
     <el-link>
       查看
-      <el-icon class="el-icon--right">
-        <svg-icon name="i-ep:view" />
-      </el-icon>
+      <svg-icon name="i-ep:view" class="el-icon--right" />
     </el-link>
   </div>
 </template>
diff --git a/src/views/component_basic_example/index.vue b/src/views/component_basic_example/index.vue
index e9286ee7..c5fc6eb5 100644
--- a/src/views/component_basic_example/index.vue
+++ b/src/views/component_basic_example/index.vue
@@ -40,9 +40,7 @@ function open(url: string) {
     <page-header title="基础组件" content="由 Element Plus 提供，本页仅展示部分组件，更多组件及使用说明请查看 Element Plus 官网">
       <el-button @click="open('https://element-plus.org/#/zh-CN')">
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:link" />
-          </el-icon>
+          <svg-icon name="ep:link" />
         </template>
         Element Plus 官网
       </el-button>
diff --git a/src/views/component_extend_example/pageheader.demo.vue b/src/views/component_extend_example/pageheader.demo.vue
index 11913ca7..5bf22a5e 100644
--- a/src/views/component_extend_example/pageheader.demo.vue
+++ b/src/views/component_extend_example/pageheader.demo.vue
@@ -13,9 +13,7 @@ meta:
       </template>
       <el-button round>
         <template #icon>
-          <el-icon>
-            <svg-icon name="ep:arrow-left" />
-          </el-icon>
+          <svg-icon name="ep:arrow-left" />
         </template>
         返回
       </el-button>
diff --git a/src/views/component_extend_example/searchbar.demo.vue b/src/views/component_extend_example/searchbar.demo.vue
index 5c85862a..af3ce9b6 100644
--- a/src/views/component_extend_example/searchbar.demo.vue
+++ b/src/views/component_extend_example/searchbar.demo.vue
@@ -87,9 +87,7 @@ function toggle(fold: boolean) {
             <el-form-item>
               <el-button type="primary">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon name="ep:search" />
-                  </el-icon>
+                  <svg-icon name="ep:search" />
                 </template>
                 筛选
               </el-button>
@@ -156,9 +154,7 @@ function toggle(fold: boolean) {
             <el-form-item>
               <el-button type="primary">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon name="ep:search" />
-                  </el-icon>
+                  <svg-icon name="ep:search" />
                 </template>
                 筛选
               </el-button>
@@ -225,9 +221,7 @@ function toggle(fold: boolean) {
             <el-form-item>
               <el-button type="primary">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon name="ep:search" />
-                  </el-icon>
+                  <svg-icon name="ep:search" />
                 </template>
                 筛选
               </el-button>
@@ -294,9 +288,7 @@ function toggle(fold: boolean) {
             <el-form-item>
               <el-button type="primary">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon name="ep:search" />
-                  </el-icon>
+                  <svg-icon name="ep:search" />
                 </template>
                 筛选
               </el-button>
@@ -347,17 +339,13 @@ function toggle(fold: boolean) {
             <el-form-item>
               <el-button type="primary">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon name="ep:search" />
-                  </el-icon>
+                  <svg-icon name="ep:search" />
                 </template>
                 筛选
               </el-button>
               <el-button link @click="isFold2 = !fold">
                 <template #icon>
-                  <el-icon>
-                    <svg-icon :name="fold ? 'ep:caret-bottom' : 'ep:caret-top' " />
-                  </el-icon>
+                  <svg-icon :name="fold ? 'ep:caret-bottom' : 'ep:caret-top' " />
                 </template>
                 {{ fold ? '展开' : '收起' }}
               </el-button>
@@ -416,17 +404,13 @@ function toggle(fold: boolean) {
                 <el-form-item label-width="0" class="action-box">
                   <el-button type="primary">
                     <template #icon>
-                      <el-icon>
-                        <svg-icon name="ep:search" />
-                      </el-icon>
+                      <svg-icon name="ep:search" />
                     </template>
                     筛选
                   </el-button>
                   <el-button link @click="isFold3 = !fold">
                     <template #icon>
-                      <el-icon>
-                        <svg-icon :name="fold ? 'epcaret-bottom' : 'ep:caret-top' " />
-                      </el-icon>
+                      <svg-icon :name="fold ? 'epcaret-bottom' : 'ep:caret-top' " />
                     </template>
                     {{ fold ? '展开' : '收起' }}
                   </el-button>
diff --git a/src/views/component_extend_example/svg.demo.vue b/src/views/component_extend_example/svg.demo.vue
index 3d016919..8439e106 100644
--- a/src/views/component_extend_example/svg.demo.vue
+++ b/src/views/component_extend_example/svg.demo.vue
@@ -8,7 +8,7 @@ defineOptions({
   name: 'ComponentExampleSvg',
 })
 
-const flip = ref<'horizontal' | 'vertical' | 'both' | ''>('')
+const flip = ref<'horizontal' | 'vertical' | 'both'>()
 const rotate = ref(0)
 </script>
 
@@ -16,25 +16,13 @@ const rotate = ref(0)
   <div>
     <page-header title="SVG Icon" content="除了使用 Element Plus 提供的图标外，你还可以使用自己的 SVG 图标" />
     <page-main>
-      <el-icon class="example-icon">
-        <svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" />
-      </el-icon>
-      <el-icon class="example-icon">
-        <svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" />
-      </el-icon>
-      <el-icon class="example-icon">
-        <svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" />
-      </el-icon>
+      <svg-icon name="example-emotion-line" :flip="flip" :rotate="rotate" />
+      <svg-icon name="example-emotion-laugh-line" :flip="flip" :rotate="rotate" />
+      <svg-icon name="example-emotion-unhappy-line" :flip="flip" :rotate="rotate" />
       <p>也支持彩色 SVG Icon</p>
-      <el-icon class="example-icon">
-        <svg-icon name="example-crown" :flip="flip" :rotate="rotate" />
-      </el-icon>
-      <el-icon class="example-icon">
-        <svg-icon name="example-star" :flip="flip" :rotate="rotate" />
-      </el-icon>
-      <el-icon class="example-icon">
-        <svg-icon name="example-vip" :flip="flip" :rotate="rotate" />
-      </el-icon>
+      <svg-icon name="example-crown" :flip="flip" :rotate="rotate" />
+      <svg-icon name="example-star" :flip="flip" :rotate="rotate" />
+      <svg-icon name="example-vip" :flip="flip" :rotate="rotate" />
       <div>
         <p>翻转：</p>
         <el-radio-group v-model="flip">
@@ -64,7 +52,7 @@ const rotate = ref(0)
 </template>
 
 <style scoped>
-.example-icon {
+.icon {
   font-size: 48px;
 }
 </style>
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/jsx_example/index.tsx b/src/views/jsx_example/index.tsx
index 76617179..acc9e86e 100644
--- a/src/views/jsx_example/index.tsx
+++ b/src/views/jsx_example/index.tsx
@@ -11,9 +11,7 @@ export default defineComponent({
     const icons = (
       iconsArr.value.map((v) => {
         return (
-          <el-icon key={v} class={styles['example-icon']}>
-            <svg-icon name={v} />
-          </el-icon>
+          <svg-icon name={v} key={v} class={styles['example-icon']} />
         )
       })
     )
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>
diff --git a/src/views/mock_example/index.vue b/src/views/mock_example/index.vue
index c40d2cfa..29144231 100644
--- a/src/views/mock_example/index.vue
+++ b/src/views/mock_example/index.vue
@@ -29,9 +29,7 @@ function open(url: string) {
     <page-header title="Mock" content="通过拦截 Ajax 请求，返回模拟的响应数据，可以让前端工程师独立于后端进行开发，本演示站的登录和权限获取就是通过 mock 实现的。更多 Mock 语法规则请查询官方文档">
       <el-button @click="open('http://mockjs.com/')">
         <template #icon>
-          <el-icon>
-            <svg-icon name="i-ep:link" />
-          </el-icon>
+          <svg-icon name="ep:link" />
         </template>
         Mock.js 官网
       </el-button>