change svg to icon

This commit is contained in:
hptangxi
2025-07-06 16:15:40 +08:00
parent cad61239eb
commit c8ab6d3b6f
5 changed files with 20 additions and 51 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>