From d2ceb6e35e70d398be044158e43d8c4236094544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Fri, 16 Aug 2024 16:23:20 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20=E5=9B=BE=E6=A0=87=E7=A6=BB=E7=BA=BF?=
 =?UTF-8?q?=E3=80=81=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/components/IconifyIcon/index.ts           |  9 +++
 .../IconifyIcon/src/iconifyIconOffline.ts     | 30 ++++++++++
 .../IconifyIcon/src/iconifyIconOnline.ts      | 30 ++++++++++
 src/components/IconifyIcon/src/offlineIcon.ts | 54 +++++++++++++++++
 src/layout/compoenets/Breadcrumb.vue          | 10 ++--
 src/layout/compoenets/LeftMenu.vue            |  4 +-
 src/layout/index.vue                          |  1 +
 src/main.ts                                   | 24 +++++---
 src/router/index.ts                           | 12 ++--
 src/views/about/index.vue                     | 11 +---
 src/views/config/index.vue                    | 58 ++++++++-----------
 src/views/download/index.vue                  | 16 +----
 src/views/home/index.vue                      | 15 +++--
 src/views/proxy/index.vue                     | 40 ++++++-------
 15 files changed, 212 insertions(+), 103 deletions(-)
 create mode 100644 src/components/IconifyIcon/index.ts
 create mode 100644 src/components/IconifyIcon/src/iconifyIconOffline.ts
 create mode 100644 src/components/IconifyIcon/src/iconifyIconOnline.ts
 create mode 100644 src/components/IconifyIcon/src/offlineIcon.ts

diff --git a/package.json b/package.json
index e4e0416..75e4212 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "electron:generate-icons": "electron-icon-builder --input=./public/logo.png --output=build --flatten"
   },
   "devDependencies": {
+    "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/vue": "^4.1.1",
     "@types/nedb": "^1.8.16",
     "@vitejs/plugin-vue": "^4.3.3",
diff --git a/src/components/IconifyIcon/index.ts b/src/components/IconifyIcon/index.ts
new file mode 100644
index 0000000..1dfa8df
--- /dev/null
+++ b/src/components/IconifyIcon/index.ts
@@ -0,0 +1,9 @@
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
+
+/** 本地图标组件 */
+const IconifyIconOffline = iconifyIconOffline;
+/** 在线图标组件 */
+const IconifyIconOnline = iconifyIconOnline;
+
+export {IconifyIconOffline, IconifyIconOnline};
diff --git a/src/components/IconifyIcon/src/iconifyIconOffline.ts b/src/components/IconifyIcon/src/iconifyIconOffline.ts
new file mode 100644
index 0000000..06a2a7c
--- /dev/null
+++ b/src/components/IconifyIcon/src/iconifyIconOffline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+
+// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
+export default defineComponent({
+  name: "IconifyIconOffline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      default: null
+    }
+  },
+  render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: this.icon,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
diff --git a/src/components/IconifyIcon/src/iconifyIconOnline.ts b/src/components/IconifyIcon/src/iconifyIconOnline.ts
new file mode 100644
index 0000000..a5f5822
--- /dev/null
+++ b/src/components/IconifyIcon/src/iconifyIconOnline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+export default defineComponent({
+  name: "IconifyIconOnline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
diff --git a/src/components/IconifyIcon/src/offlineIcon.ts b/src/components/IconifyIcon/src/offlineIcon.ts
new file mode 100644
index 0000000..fda725e
--- /dev/null
+++ b/src/components/IconifyIcon/src/offlineIcon.ts
@@ -0,0 +1,54 @@
+import {addIcon} from "@iconify/vue/dist/offline";
+
+/**
+ * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+ */
+
+// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
+import Cloud from "@iconify-icons/material-symbols/cloud";
+import RocketLaunchRounded from "@iconify-icons/material-symbols/rocket-launch-rounded";
+import Download from "@iconify-icons/material-symbols/download-2";
+import Settings from "@iconify-icons/material-symbols/settings";
+import FileCopySharp from "@iconify-icons/material-symbols/file-copy-sharp";
+import InfoSharp from "@iconify-icons/material-symbols/info-sharp";
+import refreshRounded from "@iconify-icons/material-symbols/refresh-rounded";
+
+import MoreVert from "@iconify-icons/material-symbols/more-vert";
+import Add from "@iconify-icons/material-symbols/add";
+import BringYourOwnIpRounded from "@iconify-icons/material-symbols/bring-your-own-ip-rounded";
+import DeleteRounded from "@iconify-icons/material-symbols/delete-rounded";
+import RefreshRounded from "@iconify-icons/material-symbols/refresh-rounded";
+import CancelPresentation from "@iconify-icons/material-symbols/cancel-presentation";
+import GestureSelect from "@iconify-icons/material-symbols/gesture-select";
+import SaveRounded from "@iconify-icons/material-symbols/save-rounded";
+import Info from "@iconify-icons/material-symbols/info";
+import QuestionMark from "@iconify-icons/material-symbols/question-mark";
+import CheckCircleRounded from "@iconify-icons/material-symbols/check-circle-rounded";
+import Error from "@iconify-icons/material-symbols/error";
+import ContentCopy from "@iconify-icons/material-symbols/content-copy";
+import ContentPasteGo from "@iconify-icons/material-symbols/content-paste-go";
+import Edit from "@iconify-icons/material-symbols/edit";
+
+addIcon("cloud", Cloud);
+addIcon("rocket-launch-rounded", RocketLaunchRounded);
+addIcon("download", Download);
+addIcon("settings", Settings);
+addIcon("file-copy-sharp", FileCopySharp);
+addIcon("info-sharp", InfoSharp);
+addIcon("refresh-rounded", refreshRounded);
+addIcon("more-vert", MoreVert);
+addIcon("add", Add);
+addIcon("bring-your-own-ip-rounded", BringYourOwnIpRounded);
+addIcon("delete-rounded", DeleteRounded);
+addIcon("cancel-presentation", CancelPresentation);
+addIcon("gesture-select", GestureSelect);
+addIcon("save-rounded", SaveRounded);
+addIcon("refresh-rounded", RefreshRounded);
+addIcon("info", Info);
+addIcon("question-mark", QuestionMark);
+addIcon("check-circle-rounded", CheckCircleRounded);
+addIcon("error", Error);
+addIcon("content-copy", ContentCopy);
+addIcon("content-paste-go", ContentPasteGo);
+addIcon("edit", Edit);
+
diff --git a/src/layout/compoenets/Breadcrumb.vue b/src/layout/compoenets/Breadcrumb.vue
index 48091e8..8497f00 100644
--- a/src/layout/compoenets/Breadcrumb.vue
+++ b/src/layout/compoenets/Breadcrumb.vue
@@ -3,6 +3,7 @@ import { Icon } from "@iconify/vue";
 import { computed, defineComponent } from "vue";
 import router from "@/router";
 
+
 defineComponent({
   name: "Breadcrumb"
 });
@@ -15,10 +16,11 @@ const currentRoute = computed(() => {
 <template>
   <div class="flex justify-between">
     <div class="breadcrumb">
-      <Icon
-        class="inline-block mr-2"
-        :icon="currentRoute.meta['icon'] as string"
-      />
+      <IconifyIconOffline class="inline-block mr-2" :icon="currentRoute.meta['icon'] as string"/>
+<!--      <Icon-->
+      <!--        class="inline-block mr-2"-->
+      <!--        :icon="currentRoute.meta['icon'] as string"-->
+      <!--      />-->
       <span>{{ currentRoute.meta["title"] }}</span>
     </div>
     <div class="right">
diff --git a/src/layout/compoenets/LeftMenu.vue b/src/layout/compoenets/LeftMenu.vue
index 0e73ef5..88fe4ea 100644
--- a/src/layout/compoenets/LeftMenu.vue
+++ b/src/layout/compoenets/LeftMenu.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import {computed, defineComponent, onMounted, ref} from "vue";
-import {Icon} from "@iconify/vue";
 import router from "@/router";
 import {RouteRecordRaw} from "vue-router";
 import pkg from '../../../package.json';
 
+
 defineComponent({
   name: "AppMain"
 });
@@ -58,7 +58,7 @@ onMounted(() => {
           :key="r.name"
           @click="handleMenuChange(r)"
       >
-        <Icon class="animate__animated" :icon="r?.meta?.icon as string"/>
+        <IconifyIconOffline class="animate__animated" :icon="r?.meta?.icon as string"></IconifyIconOffline>
       </li>
     </ul>
     <div class="version mb-2 animate__animated" @click="handleOpenGitHubReleases">
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 957aa21..d59ede9 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,6 +2,7 @@
 import { defineComponent } from "vue";
 import AppMain from "./compoenets/AppMain.vue";
 import LeftMenu from "./compoenets/LeftMenu.vue";
+import "@/components/IconifyIcon/src/offlineIcon";
 
 defineComponent({
   name: "Layout"
diff --git a/src/main.ts b/src/main.ts
index 7f50939..f306a9f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,22 @@
-import { createApp } from "vue";
+import {createApp} from "vue";
 import App from "./App.vue";
 import router from "./router";
 import "./styles/index.scss";
 import 'animate.css';
 import ElementPlus from "element-plus";
+import {
+    IconifyIconOffline,
+    IconifyIconOnline,
+} from "./components/IconifyIcon";
 
-createApp(App)
-  .use(router)
-  .use(ElementPlus)
-  .mount("#app")
-  .$nextTick(() => {
-    postMessage({ payload: "removeLoading" }, "*");
-  });
+const app = createApp(App);
+app.component("IconifyIconOffline", IconifyIconOffline);
+app.component("IconifyIconOnline", IconifyIconOnline);
+
+
+app.use(router)
+    .use(ElementPlus)
+    .mount("#app")
+    .$nextTick(() => {
+        postMessage({payload: "removeLoading"}, "*");
+    });
diff --git a/src/router/index.ts b/src/router/index.ts
index 2237e01..2bd4f3c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
         name: "Home",
         meta: {
           title: "连接",
-          icon: "material-symbols:rocket-launch-rounded",
+          icon: "rocket-launch-rounded",
           keepAlive: true
         },
         component: () => import("@/views/home/index.vue")
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
         name: "Proxy",
         meta: {
           title: "穿透列表",
-          icon: "material-symbols:cloud",
+          icon: "cloud",
           keepAlive: true
         },
         component: () => import("@/views/proxy/index.vue")
@@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
         name: "Download",
         meta: {
           title: "版本下载",
-          icon: "material-symbols:download-2",
+          icon: "download",
           keepAlive: true
         },
         component: () => import("@/views/download/index.vue")
@@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [
         name: "Config",
         meta: {
           title: "系统配置",
-          icon: "material-symbols:settings",
+          icon: "settings",
           keepAlive: true
         },
         component: () => import("@/views/config/index.vue")
@@ -54,7 +54,7 @@ const routes: RouteRecordRaw[] = [
         name: "Logger",
         meta: {
           title: "日志",
-          icon: "material-symbols:file-copy-sharp",
+          icon: "file-copy-sharp",
           keepAlive: true,
           hidden: false
         },
@@ -65,7 +65,7 @@ const routes: RouteRecordRaw[] = [
         name: "About",
         meta: {
           title: "关于",
-          icon: "material-symbols:info-sharp",
+          icon: "info-sharp",
           keepAlive: true,
           hidden: true
         },
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 8d69e3d..5944e06 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -103,8 +103,6 @@ defineComponent({
              class="w-[95px] h-[95px] mt-[-50px] animate__animated animate__flip" alt="Logo"/>
         <div class="mt-[8px] text-2xl">Frpc Desktop</div>
         <div class="mt-[8px] text-neutral-400 flex items-center">
-
-          <!--          <span class="font-bold">  v{{ pkg.version }}</span>-->
           <el-link
               :class="!isLastVersion? 'line-through': ''"
               class="ml-2 font-bold">v{{ pkg.version }}
@@ -114,11 +112,8 @@ defineComponent({
                    class="ml-2 text-[#67C23A] font-bold"
                    type="success">v{{ latestVersionInfo.name }}
           </el-link>
-          <!--          <span class="ml-2 text-[#67C23A] font-bold"-->
-          <!--                @click="handleOpenNewVersion"-->
-          <!--                v-if="!isLastVersion && latestVersionInfo">v{{ latestVersionInfo.name }}</span>-->
-          <Icon class="ml-1.5 cursor-pointer check-update" icon="material-symbols:refresh-rounded"
-                @click="handleGetLastVersion"></Icon>
+          <IconifyIconOffline class="ml-1.5 cursor-pointer check-update" icon="refresh-rounded"
+                              @click="handleGetLastVersion"/>
         </div>
         <div class="mt-[8px] text-sm text-center">
           <p>
@@ -134,7 +129,7 @@ defineComponent({
             仓库地址
           </el-button>
           <el-button type="danger" plain @click="handleOpenGitHubIssues">
-            <Icon class="cursor-pointer mr-2" icon="material-symbols:question-mark"/>
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="question-mark"/>
             反馈问题
           </el-button>
         </div>
diff --git a/src/views/config/index.vue b/src/views/config/index.vue
index 529cdd4..17667d4 100644
--- a/src/views/config/index.vue
+++ b/src/views/config/index.vue
@@ -5,9 +5,9 @@ import {ElMessage, ElMessageBox, FormInstance, FormRules} from "element-plus";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
 import {useDebounceFn} from "@vueuse/core";
 import {clone} from "@/utils/clone";
-import {Icon} from "@iconify/vue";
 import {Base64} from "js-base64";
 
+
 defineComponent({
   name: "Config"
 });
@@ -331,24 +331,13 @@ onUnmounted(() => {
                 </el-select>
                 <div class="w-full flex justify-end">
                   <el-link type="primary" @click="handleLoadVersions">
-                    <Icon class="mr-1" icon="material-symbols:refresh-rounded"/>
+                    <iconify-icon-offline class="mr-1" icon="refresh-rounded"/>
                     手动刷新
                   </el-link>
-                  <!--                  <el-button type="text" @click="handleLoadVersions">-->
-                  <!--                    <Icon class="mr-1" icon="material-symbols:refresh-rounded"/>-->
-                  <!--                    手动刷新-->
-                  <!--                  </el-button>-->
                   <el-link class="ml-2" type="primary" @click="$router.replace({ name: 'Download' })">
-                    <Icon class="mr-1" icon="material-symbols:download-2"/>
+                    <IconifyIconOffline class="mr-1" icon="download"/>
                     点击这里去下载
                   </el-link>
-                  <!--                  <el-button-->
-                  <!--                      type="text"-->
-                  <!--                      @click="$router.replace({ name: 'Download' })"-->
-                  <!--                  >-->
-                  <!--                    <Icon class="mr-1" icon="material-symbols:download-2"/>-->
-                  <!--                    点击这里去下载-->
-                  <!--                  </el-button>-->
                 </div>
               </el-form-item>
             </el-col>
@@ -356,10 +345,8 @@ onUnmounted(() => {
               <div class="h2 flex justify-between">
                 <div>服务器配置</div>
                 <div class="flex items-center justify-center">
-                  <Icon @click="handleCopyServerConfig2Base64" class="mr-2 cursor-pointer text-xl font-bold"
-                        icon="material-symbols:content-copy"/>
-                  <Icon @click="handlePasteServerConfig4Base64" class="mr-2 cursor-pointer text-xl font-bold"
-                        icon="material-symbols:content-paste-go"/>
+                  <IconifyIconOffline class="mr-2 cursor-pointer text-xl font-bold" icon="content-copy"/>
+                  <IconifyIconOffline class="mr-2 cursor-pointer text-xl font-bold" icon="content-paste-go"/>
                 </div>
               </div>
 
@@ -377,7 +364,7 @@ onUnmounted(() => {
                           class="font-black text-[#5A3DAA]">IP</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -414,7 +401,8 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">auth.method</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <!--                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -445,7 +433,7 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">auth.token</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -470,7 +458,7 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">user</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -495,7 +483,7 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">metadatas.token</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -522,7 +510,7 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatInterval</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -554,7 +542,7 @@ onUnmounted(() => {
                         对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatTimeout</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -597,7 +585,7 @@ onUnmounted(() => {
                           对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.certFile</span>
                         </template>
                         <template #reference>
-                          <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                         </template>
                       </el-popover>
                     </div>
@@ -625,7 +613,7 @@ onUnmounted(() => {
                           对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.keyFile</span>
                         </template>
                         <template #reference>
-                          <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                         </template>
                       </el-popover>
                     </div>
@@ -653,7 +641,7 @@ onUnmounted(() => {
                           对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.trustedCaFile</span>
                         </template>
                         <template #reference>
-                          <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                         </template>
                       </el-popover>
                     </div>
@@ -681,7 +669,7 @@ onUnmounted(() => {
                           对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.serverName</span>
                         </template>
                         <template #reference>
-                          <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                         </template>
                       </el-popover>
                     </div>
@@ -719,7 +707,7 @@ onUnmounted(() => {
                           对应参数：<span class="font-black text-[#5A3DAA]">transport.proxyURL</span>
                         </template>
                         <template #reference>
-                          <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                         </template>
                       </el-popover>
                     </div>
@@ -764,7 +752,7 @@ onUnmounted(() => {
                         开机自动启动 <br/><span class="font-black text-[#5A3DAA]">Frpc Desktop</span>
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -789,7 +777,7 @@ onUnmounted(() => {
 
                       </template>
                       <template #reference>
-                        <Icon class="text-base" color="#5A3DAA" icon="material-symbols:info"/>
+                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
                       </template>
                     </el-popover>
                   </div>
@@ -804,7 +792,7 @@ onUnmounted(() => {
             <el-col :span="24">
               <el-form-item>
                 <el-button plain type="primary" @click="handleSubmit">
-                  <Icon class="mr-1" icon="material-symbols:save"/>
+                  <IconifyIconOffline icon="save"/>
                   保 存
                 </el-button>
               </el-form-item>
@@ -829,7 +817,9 @@ onUnmounted(() => {
         <div class="dialog-footer">
 
           <el-button plain type="primary" @click="handlePasteServerConfigBase64">
-            <Icon class="cursor-pointer mr-2" icon="material-symbols:label-important-rounded"/>导 入</el-button>
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="label-important-rounded"/>
+            导 入
+          </el-button>
         </div>
       </template>
 
diff --git a/src/views/download/index.vue b/src/views/download/index.vue
index 4b68fb1..5cda352 100644
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@@ -3,10 +3,10 @@ import {defineComponent, onMounted, onUnmounted, ref} from "vue";
 import {ipcRenderer} from "electron";
 import moment from "moment";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
-import {Icon} from "@iconify/vue";
 import {ElMessage} from "element-plus";
 import {useDebounceFn} from "@vueuse/core";
 
+
 defineComponent({
   name: "Download"
 });
@@ -141,20 +141,10 @@ onUnmounted(() => {
           <div class="right">
             <div v-if="version.download_completed">
               <el-button type="text">已下载</el-button>
-              <!--              <span-->
-              <!--                  class="primary-text text-sm font-bold ml-2"-->
-              <!--              >已下载</span>-->
-
               <el-button type="text" class="danger-text" @click="handleDeleteVersion(version)">
-                <Icon class="mr-1" icon="material-symbols:delete"/>
+                <IconifyIconOffline class="mr-1" icon="delete-rounded"/>
                 删除
               </el-button>
-              <!--              <div>-->
-              <!--                <Icon class="mr-1" icon="material-symbols:download-2"/>-->
-              <!--                <span-->
-              <!--                    class="danger-text text-sm font-bold ml-2"-->
-              <!--                >删除下载</span>-->
-              <!--              </div>-->
 
             </div>
 
@@ -166,7 +156,7 @@ onUnmounted(() => {
                 />
               </div>
               <el-button v-else size="small" type="primary" @click="handleDownload(version)">
-                <Icon class="mr-1" icon="material-symbols:download-2"/>
+                <IconifyIconOffline class="mr-1" icon="download"/>
                 下载
               </el-button>
             </template>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 53a8636..a3d3ffc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,6 @@
 import {defineComponent, onMounted, onUnmounted, ref} from "vue";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
 import {ipcRenderer} from "electron";
-import {Icon} from "@iconify/vue";
 import {ElMessageBox} from "element-plus";
 import router from "@/router";
 import {useDebounceFn} from "@vueuse/core";
@@ -89,16 +88,22 @@ onUnmounted(() => {
             <div
                 class="bg-white z-10 w-full h-full bg-white absolute rounded-full flex justify-center items-center"
             >
-              <Icon icon="material-symbols:rocket-launch-rounded"/>
+              <IconifyIconOffline icon="rocket-launch-rounded"/>
             </div>
           </div>
           <div class="flex justify-center items-center">
             <div class="pl-8 h-28 w-52 flex flex-col justify-between">
               <transition name="fade">
                 <div class="font-bold text-2xl text-center">
-                  <Icon v-if="running" class="text-[#7EC050] inline-block relative top-1"
-                        icon="material-symbols:check-circle-rounded"/>
-                  <Icon v-else class="text-[#E47470] inline-block relative top-1" icon="material-symbols:error"/>
+                  <IconifyIconOffline
+                      v-if="running"
+                      class="text-[#7EC050]
+                       inline-block relative top-1"
+                      icon="check-circle-rounded"/>
+                  <IconifyIconOffline
+                      v-else
+                      class="text-[#E47470] inline-block relative top-1"
+                      icon="error"/>
                   Frpc {{ running ? "已启动" : "已断开" }}
                 </div>
               </transition>
diff --git a/src/views/proxy/index.vue b/src/views/proxy/index.vue
index 1c655b2..b8c8ce2 100644
--- a/src/views/proxy/index.vue
+++ b/src/views/proxy/index.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
-import {Icon} from "@iconify/vue";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
 import {ElMessage, FormInstance, FormRules} from "element-plus";
 import {ipcRenderer} from "electron";
 import {clone} from "@/utils/clone";
 import {useDebounceFn} from "@vueuse/core";
+import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
+
 
 defineComponent({
   name: "Proxy"
@@ -274,7 +275,7 @@ onUnmounted(() => {
           class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"
           @click="handleOpenInsert"
       >
-        <Icon icon="material-symbols:add"/>
+        <IconifyIconOffline icon="add"/>
       </div>
     </breadcrumb>
     <div class="app-container-breadcrumb" v-loading="loading.list > 0">
@@ -315,20 +316,20 @@ onUnmounted(() => {
                     <a href="javascript:void(0)"
                        class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]"
                     >
-                      <Icon icon="material-symbols:more-vert"/>
+                      <IconifyIconOffline icon="more-vert"/>
                     </a>
                     <template #dropdown>
                       <el-dropdown-menu>
                         <el-dropdown-item @click="handleOpenUpdate(proxy)">
-                          <Icon
-                              icon="material-symbols:edit"
+                          <IconifyIconOffline
+                              icon="edit"
                               class="primary-text text-[14px]"
                           />
                           <span class="ml-1">修 改</span>
                         </el-dropdown-item>
                         <el-dropdown-item @click="handleDeleteProxy(proxy)">
-                          <Icon
-                              icon="material-symbols:delete-rounded"
+                          <IconifyIconOffline
+                              icon="delete-rounded"
                               class="text-red-500 text-[14px]"
                           />
                           <span class="ml-1">删 除</span>
@@ -411,7 +412,7 @@ onUnmounted(() => {
                   controls-position="right"
               />
               <el-button class="ml-[10px]" plain type="primary" @click="handleOpenLocalPortDialog">
-                <Icon class="cursor-pointer mr-2" icon="material-symbols:bring-your-own-ip-rounded"/>
+                <IconifyIconOffline class="cursor-pointer mr-2" icon="bring-your-own-ip-rounded"/>
                 本地端口
               </el-button>
             </el-form-item>
@@ -457,16 +458,13 @@ onUnmounted(() => {
                     placeholder="github.com"
                     v-model="editForm.customDomains[di]"
                 />
-                <!--                <div class="domain-input-button !bg-[#67c23a]">-->
-                <!--                  <Icon icon="material-symbols:add" />-->
-                <!--                </div>-->
                 <el-button
                     class="ml-[10px]"
                     type="primary"
                     plain
                     @click="handleAddDomain"
                 >
-                  <Icon icon="material-symbols:add"/>
+                  <IconifyIconOffline icon="add"/>
                 </el-button>
                 <el-button
                     type="danger"
@@ -474,11 +472,8 @@ onUnmounted(() => {
                     @click="handleDeleteDomain(di)"
                     :disabled="editForm.customDomains.length === 1"
                 >
-                  <Icon icon="material-symbols:delete-rounded"/>
+                  <IconifyIconOffline icon="delete-rounded"/>
                 </el-button>
-                <!--                <div class="domain-input-button !bg-[#d3585b]">-->
-                <!--                  <Icon icon="material-symbols:delete-rounded" />-->
-                <!--                </div>-->
               </el-form-item>
             </el-col>
           </template>
@@ -486,10 +481,12 @@ onUnmounted(() => {
             <el-form-item>
               <div class="w-full flex justify-end">
                 <el-button @click="edit.visible = false">
-                  <Icon class="cursor-pointer mr-2" icon="material-symbols:cancel-presentation"/>
-                  关 闭</el-button>
+                  <iconify-icon-offline class="cursor-pointer mr-2" icon="cancel-presentation"/>
+                  关 闭
+                </el-button>
                 <el-button plain type="primary" @click="handleSubmit"
-                ><Icon class="cursor-pointer mr-2" icon="material-symbols:save-rounded"/>
+                >
+                  <IconifyIconOffline class="cursor-pointer mr-2" icon="save-rounded"/>
                   保 存
                 </el-button>
               </div>
@@ -512,16 +509,13 @@ onUnmounted(() => {
         <el-table-column label="操作" :width="80">
           <template #default="scope">
             <el-button type="text" @click="handleSelectLocalPort(scope.row.port)">
-              <Icon class="cursor-pointer mr-2" icon="material-symbols:gesture-select"/>
+              <IconifyIconOffline class="cursor-pointer mr-2" icon="gesture-select"/>
               选择
             </el-button>
           </template>
 
         </el-table-column>
       </el-table>
-      <!--      <div class="h-[400px] overflow-y-scroll">-->
-      <!--       -->
-      <!--      </div>-->
     </el-dialog>
   </div>
 </template>