This is an automated email from the ASF dual-hosted git repository. wu-sheng pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
commit 5e64b9debce207bd6d89ce7a5b10349cd4a4ca77 Author: Wu Sheng <[email protected]> AuthorDate: Tue May 12 10:29:07 2026 +0800 ui: inline logo svg via v-html for reliable sizing --- apps/ui/src/components/shell/AppSidebar.vue | 11 ++++++++--- apps/ui/src/views/auth/LoginView.vue | 10 +++++++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/apps/ui/src/components/shell/AppSidebar.vue b/apps/ui/src/components/shell/AppSidebar.vue index 3f924ad..6281ec0 100644 --- a/apps/ui/src/components/shell/AppSidebar.vue +++ b/apps/ui/src/components/shell/AppSidebar.vue @@ -18,7 +18,7 @@ import { ref } from 'vue'; import { RouterLink, useRoute, useRouter } from 'vue-router'; import Icon, { type IconName } from '@/components/icons/Icon.vue'; -import logoSw from '@/assets/icons/logo-sw.svg?url'; +import logoSw from '@/assets/icons/logo-sw.svg?raw'; import { useAuthStore } from '@/stores/auth'; const auth = useAuthStore(); @@ -74,7 +74,7 @@ const admin: NavRow[] = [ <template> <aside class="sw-side"> <RouterLink to="/" class="sw-brand" aria-label="SkyWalking Horizon"> - <img :src="logoSw" alt="SkyWalking" class="brand-logo" /> + <span class="brand-logo" v-html="logoSw" /> <small>Horizon</small> </RouterLink> @@ -155,7 +155,12 @@ const admin: NavRow[] = [ color: inherit; } .brand-logo { - height: 18px; + display: inline-flex; + align-items: center; + color: var(--sw-fg-0); +} +.brand-logo :deep(svg) { + height: 16px; width: auto; display: block; } diff --git a/apps/ui/src/views/auth/LoginView.vue b/apps/ui/src/views/auth/LoginView.vue index 97800da..a3db596 100644 --- a/apps/ui/src/views/auth/LoginView.vue +++ b/apps/ui/src/views/auth/LoginView.vue @@ -17,7 +17,7 @@ <script setup lang="ts"> import { ref } from 'vue'; import { useRoute, useRouter } from 'vue-router'; -import logoSw from '@/assets/icons/logo-sw.svg?url'; +import logoSw from '@/assets/icons/logo-sw.svg?raw'; import { useAuthStore } from '@/stores/auth'; const auth = useAuthStore(); @@ -47,7 +47,7 @@ async function submit(): Promise<void> { <div class="login-wrap"> <form class="login-card" @submit.prevent="submit"> <div class="brand"> - <img :src="logoSw" alt="SkyWalking" class="brand-logo" /> + <span class="brand-logo" v-html="logoSw" /> <div class="brand-sub">Horizon UI</div> </div> @@ -113,7 +113,11 @@ async function submit(): Promise<void> { margin-bottom: 22px; } .brand-logo { - height: 26px; + display: inline-flex; + color: var(--sw-fg-0); +} +.brand-logo :deep(svg) { + height: 24px; width: auto; display: block; }
