change svg to icon

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>
 

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>