From 3d6d9c205a481cdab6a5550aea206e88299ae878 Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Thu, 29 Aug 2024 18:30:55 +0800
Subject: [PATCH] chore(icon): fix icon in sidebar on desktop devices

---
 .../src/components/AppNavigationDesktop.vue           | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue b/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue
index 4863d551..3cac9361 100644
--- a/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue
+++ b/ui/artalk-sidebar/src/components/AppNavigationDesktop.vue
@@ -2,11 +2,12 @@
 /**
  * The part of the navigation bar that is displayed on desktop
  */
-import SearchIcon from '../assets/nav-icon-search.svg'
 import { useNavigationMenu } from './AppNavigationMenu'
 
 const nav = useNavigationMenu()
 const { t } = useI18n()
+
+const getIconCSSAttribute = (icon: string) => `url('${icon.replace(/'/g, "\\'")}')`
 </script>
 
 <template>
@@ -18,7 +19,7 @@ const { t } = useI18n()
       :class="{ active: pageName === nav.curtPage }"
       @click="nav.goPage(pageName as string)"
     >
-      <span class="icon" :style="{ background: `url('${page.icon}')` }"></span>
+      <span class="icon" :style="{ backgroundImage: getIconCSSAttribute(page.icon) }"></span>
       {{ t(page.label) }}
     </div>
   </div>
@@ -37,7 +38,7 @@ const { t } = useI18n()
 
       <div v-if="nav.isSearchEnabled" class="item-wrap search-btn" @click="nav.showSearch()">
         <div class="item">
-          <div class="icon" :style="{ background: `url('${SearchIcon}')` }"></div>
+          <div class="icon"></div>
         </div>
       </div>
     </div>
@@ -152,6 +153,10 @@ $colorMain: #8ecee2;
 
     &.search-btn {
       margin-left: auto;
+
+      .icon {
+        background-image: url('@/assets/nav-icon-search.svg');
+      }
     }
 
     .item {