From c8ab6d3b6ff51a1ac3f44159c24f5a022565ba98 Mon Sep 17 00:00:00 2001
From: hptangxi <hptangxi@yeah.net>
Date: Sun, 6 Jul 2025 16:15:40 +0800
Subject: [PATCH] change svg to icon

---
 web/src/components/Logout.vue              |  7 ++-----
 web/src/components/keys/GroupFormModal.vue | 23 ++++++----------------
 web/src/components/keys/GroupInfoCard.vue  | 13 +++---------
 web/src/views/Login.vue                    |  7 ++-----
 web/src/views/Settings.vue                 | 21 +++++++-------------
 5 files changed, 20 insertions(+), 51 deletions(-)

diff --git a/web/src/components/Logout.vue b/web/src/components/Logout.vue
index 3b81231..9d79efa 100644
--- a/web/src/components/Logout.vue
+++ b/web/src/components/Logout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthService } from "@/services/auth";
+import { LogOutOutline } from "@vicons/ionicons5";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -14,11 +15,7 @@ const handleLogout = () => {
 <template>
   <n-button quaternary round class="logout-button" @click="handleLogout">
     <template #icon>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"
-        />
-      </svg>
+      <n-icon :component="LogOutOutline" />
     </template>
     退出登录
   </n-button>
diff --git a/web/src/components/keys/GroupFormModal.vue b/web/src/components/keys/GroupFormModal.vue
index d3613d4..fb0120f 100644
--- a/web/src/components/keys/GroupFormModal.vue
+++ b/web/src/components/keys/GroupFormModal.vue
@@ -2,6 +2,7 @@
 import { keysApi } from "@/api/keys";
 import { settingsApi } from "@/api/settings";
 import type { Group, GroupConfigOption, UpstreamInfo } from "@/types/models";
+import { Add, Close, Remove } from "@vicons/ionicons5";
 import {
   NButton,
   NCard,
@@ -271,11 +272,7 @@ async function handleSubmit() {
       <template #header-extra>
         <n-button quaternary circle @click="handleClose">
           <template #icon>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+            <n-icon :component="Close" />
           </template>
         </n-button>
       </template>
@@ -370,9 +367,7 @@ async function handleSubmit() {
                   style="margin-left: 10px"
                 >
                   <template #icon>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M19 13H5v-2h14v2z" />
-                    </svg>
+                    <n-icon :component="Remove" />
                   </template>
                 </n-button>
               </div>
@@ -382,9 +377,7 @@ async function handleSubmit() {
           <n-form-item>
             <n-button @click="addUpstream" dashed style="width: 100%">
               <template #icon>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                </svg>
+                <n-icon :component="Add" />
               </template>
               添加上游地址
             </n-button>
@@ -443,9 +436,7 @@ async function handleSubmit() {
                         style="margin-left: 10px"
                       >
                         <template #icon>
-                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M19 13H5v-2h14v2z" />
-                          </svg>
+                          <n-icon :component="Remove" />
                         </template>
                       </n-button>
                     </div>
@@ -460,9 +451,7 @@ async function handleSubmit() {
                     :disabled="formData.configItems.length >= configOptions.length"
                   >
                     <template #icon>
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                      </svg>
+                      <n-icon :component="Add" />
                     </template>
                     添加配置参数
                   </n-button>
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 1e399de..cc7e852 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -2,6 +2,7 @@
 import { keysApi } from "@/api/keys";
 import type { Group, GroupStats } from "@/types/models";
 import { getGroupDisplayName } from "@/utils/display";
+import { Pencil, Trash } from "@vicons/ionicons5";
 import {
   NButton,
   NCard,
@@ -139,11 +140,7 @@ function copyUrl(url: string) {
           <div class="header-actions">
             <n-button quaternary circle size="small" @click="handleEdit" title="编辑分组">
               <template #icon>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path
-                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                  />
-                </svg>
+                <n-icon :component="Pencil" />
               </template>
             </n-button>
             <n-button
@@ -156,11 +153,7 @@ function copyUrl(url: string) {
               :disabled="!group"
             >
               <template #icon>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path
-                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                  />
-                </svg>
+                <n-icon :component="Trash" />
               </template>
             </n-button>
           </div>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 205f580..0c42b00 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthService } from "@/services/auth";
+import { LockClosedSharp } from "@vicons/ionicons5";
 import { NButton, NCard, NInput, NSpace, useMessage } from "naive-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
@@ -57,11 +58,7 @@ const handleLogin = async () => {
             @keyup.enter="handleLogin"
           >
             <template #prefix>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                  d="M6 10v-4a6 6 0 1 1 12 0v4h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm6-6a4 4 0 0 0-4 4v4h8v-4a4 4 0 0 0-4-4z"
-                />
-              </svg>
+              <n-icon :component="LockClosedSharp" />
             </template>
           </n-input>
 
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index b5443c0..511cc14 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { settingsApi, type SettingCategory } from "@/api/settings";
+import { HelpCircle, Save } from "@vicons/ionicons5";
 import {
   NButton,
   NCard,
@@ -81,13 +82,11 @@ async function handleSubmit() {
                   <n-space align="center" :size="4" :wrap-item="false">
                     <n-tooltip trigger="hover" placement="top">
                       <template #trigger>
-                        <n-icon :size="16" style="cursor: help; color: #9ca3af">
-                          <svg viewBox="0 0 24 24" fill="currentColor">
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-                            />
-                          </svg>
-                        </n-icon>
+                        <n-icon
+                          :component="HelpCircle"
+                          :size="16"
+                          style="cursor: help; color: #9ca3af"
+                        />
                       </template>
                       {{ item.description }}
                     </n-tooltip>
@@ -131,13 +130,7 @@ async function handleSubmit() {
         style="min-width: 200px"
       >
         <template #icon>
-          <n-icon>
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path
-                d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
-              />
-            </svg>
-          </n-icon>
+          <n-icon :component="Save" />
         </template>
         {{ isSaving ? "保存中..." : "保存设置" }}
       </n-button>