chore: 🔨 本地 SVG 加载方式由 vite-plugin-svg-icons 切换为 @unocss/preset-icons

src/layout/components/NavBar/components/NavbarRight.vue

@@ -23,7 +23,7 @@
 
     <!-- 设置面板 -->
     <div v-if="defaultSettings.showSettings" @click="settingStore.settingsVisible = true">
-      <SvgIcon icon-class="setting" />
+      <div class="i-svg:setting" />
     </div>
   </div>
 </template>

src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue

@@ -1,10 +1,13 @@
 <template>
-  <!-- 根据 icon 类型决定使用的不同类型的图标组件 -->
-  <el-icon v-if="icon && icon.startsWith('el-icon')" class="sub-el-icon">
-    <component :is="icon.replace('el-icon-', '')" />
-  </el-icon>
-  <svg-icon v-else-if="icon" :icon-class="icon" />
-  <svg-icon v-else icon-class="menu" />
+  <template v-if="icon">
+    <el-icon v-if="isElIcon" class="el-icon">
+      <component :is="iconComponent" />
+    </el-icon>
+    <div v-else :class="`i-svg:${icon}`" />
+  </template>
+  <template v-else>
+    <div class="i-svg:menu" />
+  </template>
   <!-- 菜单标题 -->
   <span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
 </template>
@@ -12,30 +15,34 @@
 <script setup lang="ts">
 import { translateRouteTitle } from "@/utils/i18n";
 
-defineProps({
-  icon: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-});
+const props = defineProps<{
+  icon?: string;
+  title?: string;
+}>();
+
+const isElIcon = computed(() => props.icon?.startsWith("el-icon"));
+const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
 </script>
 
 <style lang="scss" scoped>
-.sub-el-icon {
+.el-icon {
   width: 14px !important;
   margin-right: 0 !important;
   color: currentcolor;
 }
 
+[class^="i-svg:"] {
+  width: 14px;
+  height: 14px;
+  margin-right: 0;
+  color: currentcolor !important;
+}
+
 .hideSidebar {
   .el-sub-menu,
   .el-menu-item {
     .svg-icon,
-    .sub-el-icon {
+    .el-icon {
       margin-left: 20px;
     }
   }

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -15,7 +15,7 @@
             <el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
               <component :is="route.meta.icon.replace('el-icon-', '')" />
             </el-icon>
-            <svg-icon v-else :icon-class="route.meta.icon" />
+            <div v-else :class="`i-svg:${route.meta.icon}`" />
           </template>
           <span v-if="route.path === '/'">首页</span>
           <span v-else-if="route.meta && route.meta.title" class="ml-1">

src/layout/components/TagsView/index.vue

@@ -28,27 +28,27 @@
       :style="{ left: left + 'px', top: top + 'px' }"
     >
       <li @click="refreshSelectedTag(selectedTag)">
-        <svg-icon icon-class="refresh" />
+        <div class="i-svg:refresh" />
         刷新
       </li>
       <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <svg-icon icon-class="close" />
+        <div class="i-svg:close" />
         关闭
       </li>
       <li @click="closeOtherTags">
-        <svg-icon icon-class="close_other" />
+        <div class="i-svg:close_other" />
         关闭其它
       </li>
       <li v-if="!isFirstView()" @click="closeLeftTags">
-        <svg-icon icon-class="close_left" />
+        <div class="i-svg:close_left" />
         关闭左侧
       </li>
       <li v-if="!isLastView()" @click="closeRightTags">
-        <svg-icon icon-class="close_right" />
+        <div class="i-svg:close_right" />
         关闭右侧
       </li>
       <li @click="closeAllTags(selectedTag)">
-        <svg-icon icon-class="close_all" />
+        <div class="i-svg:close_all" />
         关闭所有
       </li>
     </ul>

src/layout/index.vue

@@ -27,7 +27,7 @@
         <Settings v-if="defaultSettings.showSettings" />
         <!-- 返回顶部 -->
         <el-backtop target=".app-main">
-          <svg-icon icon-class="backtop" size="24px" />
+          <div class="i-svg:backtop w-6 h-6" />
         </el-backtop>
       </div>
     </div>
@@ -40,7 +40,7 @@
       <Settings v-if="defaultSettings.showSettings" />
       <!-- 返回顶部 -->
       <el-backtop target=".app-main">
-        <svg-icon icon-class="backtop" size="24px" />
+        <div class="i-svg:backtop w-6 h-6" />
       </el-backtop>
     </div>
   </div>