refactor: load the logo as an inline svg (#664)

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

以 inline svg 的形式加载 Logo，解决因为加载 svg 文件导致的页面抖动问题。

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

测试方式：检查登录页面、初始化页面、侧边菜单顶部的 Logo 是否加载正常。

#### Does this PR introduce a user-facing change?

```release-note
以 inline svg 的形式加载 Logo，解决因为加载 svg 文件导致的页面抖动问题。
```

src/layouts/BasicLayout.vue

@@ -12,7 +12,7 @@ import {
 import { RoutesMenu } from "@/components/menu/RoutesMenu";
 import type { MenuGroupType, MenuItemType } from "@halo-dev/console-shared";
 import type { User } from "@halo-dev/api-client";
-import logo from "@/assets/logo.svg";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import {
   RouterView,
   useRoute,
@@ -185,7 +185,7 @@ onMounted(generateMenus);
   <div class="flex h-full">
     <aside class="navbar fixed hidden h-full overflow-y-auto md:block">
       <div class="logo flex justify-center pt-5 pb-7">
-        <img :src="logo" alt="Halo Logo" style="width: 78px" />
+        <IconLogo />
       </div>
       <div class="px-3">
         <div

src/modules/interface/themes/components/ThemeListModal.vue

@@ -67,8 +67,6 @@ const handleFetchThemes = async () => {
       page: 0,
       size: 0,
       uninstalled: activeTab.value !== "installed",
-      page: 0,
-      size: 0,
     });
     themes.value = data.items;
 

src/modules/interface/themes/components/ThemeUploadModal.vue

@@ -2,7 +2,7 @@
 import { VModal } from "@halo-dev/components";
 import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@/utils/api-client";
-import { computed, mergeProps, ref } from "vue";
+import { computed, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 const props = withDefaults(

src/modules/system/users/Login.vue

@@ -7,13 +7,13 @@ import {
 } from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
 import qs from "qs";
-import logo from "@/assets/logo.svg";
 import { inject, onBeforeMount, onMounted, ref } from "vue";
 import { submitForm } from "@formkit/vue";
 import router from "@/router";
 import axios from "axios";
 import type { User } from "@halo-dev/api-client";
 import { setFocus } from "@/formkit/utils/focus";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 
 interface LoginForm {
   _csrf: string;
@@ -73,7 +73,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
-    <img :src="logo" alt="Logo" class="mb-8 w-20" />
+    <IconLogo class="mb-8" />
     <div class="login-form flex w-72 flex-col gap-4">
       <FormKit
         id="login-form"

src/views/system/Setup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import logo from "@/assets/logo.svg";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import { useSettingForm } from "@/composables/use-setting-form";
 import { useSystemStatesStore } from "@/stores/system-states";
 import { apiClient } from "@/utils/api-client";
@@ -115,7 +115,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
-    <img :src="logo" alt="Logo" class="mb-8 w-20" />
+    <IconLogo class="mb-8" />
     <div class="flex w-72 flex-col gap-4">
       <FormKit
         id="setup-form"

vite.config.ts

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from "url";
+import fs from "fs";
 import { defineConfig, loadEnv } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import VueJsx from "@vitejs/plugin-vue-jsx";
@@ -8,6 +9,30 @@ import { VitePWA } from "vite-plugin-pwa";
 import Icons from "unplugin-icons/vite";
 import { setupLibraryExternal } from "./src/build/library-external";
 
+export const sharedPlugins = [
+  Vue(),
+  VueJsx(),
+  VueSetupExtend(),
+  Compression(),
+  Icons({
+    compiler: "vue3",
+    customCollections: {
+      core: {
+        logo: () => fs.readFileSync("./src/assets/logo.svg", "utf-8"),
+      },
+    },
+  }),
+  VitePWA({
+    manifest: {
+      name: "Halo",
+      short_name: "Halo",
+      description: "Web Client For Halo",
+      theme_color: "#fff",
+    },
+    disable: true,
+  }),
+];
+
 export default ({ mode }: { mode: string }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const isProduction = mode === "production";
@@ -15,20 +40,7 @@ export default ({ mode }: { mode: string }) => {
   return defineConfig({
     base: env.VITE_BASE_URL,
     plugins: [
-      Vue(),
+      ...sharedPlugins,
-      VueJsx(),
-      VueSetupExtend(),
-      Compression(),
-      Icons({ compiler: "vue3" }),
-      VitePWA({
-        manifest: {
-          name: "Halo",
-          short_name: "Halo",
-          description: "Web Client For Halo",
-          theme_color: "#fff",
-        },
-        disable: true,
-      }),
       ...setupLibraryExternal(isProduction, env.VITE_BASE_URL),
     ],
     resolve: {

vitest.config.ts

@@ -1,10 +1,10 @@
 import { defineConfig } from "vitest/config";
-import Vue from "@vitejs/plugin-vue";
-import VueJsx from "@vitejs/plugin-vue-jsx";
 import { fileURLToPath, URL } from "url";
 
+import { sharedPlugins } from "./vite.config";
+
 export default defineConfig({
-  plugins: [Vue(), VueJsx()],
+  plugins: [sharedPlugins],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),