From ca419149cea8e078bfd257c8b16efdb3cfd150b9 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 28 Jun 2022 15:21:20 -0700
Subject: [PATCH] added <svg-icon/> to several places

---
 src/renderer/index.js                         |  2 +-
 src/renderer/less/directives.less             |  8 ++++++--
 src/renderer/style.less                       |  6 ++++++
 src/renderer/views/app/sidebar.ejs            | 19 +++----------------
 .../views/components/sidebar-playlist.ejs     |  6 +++---
 src/renderer/views/main.ejs                   |  4 ++--
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 6868dd26..ddfc7b2b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
   },
   async mounted() {
     if (this.svgIcon) {
-      this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
+      this.svgIconData = this.svgIcon;
     }
   },
   methods: {},
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 978c0707..6b7ea0a1 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -338,7 +338,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 110px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
@@ -353,7 +355,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 60px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 5f2d4808..0d986506 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -858,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-sidebar-item {
+  --iconSize: 18px;
   display: flex;
   width: 100%;
   padding: 8px 12px;
@@ -872,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   transition: transform 0.1s;
   text-align: left;
   align-items: center;
+  gap: 12px;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;
@@ -887,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     }
   }
 
+  >._svg-icon {
+    --size: var(--iconSize);
+  }
+
 }
 
 .app-sidebar-item:hover {
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 8d30c9dd..3e43cf80 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -158,23 +158,10 @@
       </div>
       <template v-if="!cfg.general.sidebarCollapsed.playlists">
         <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
-          <div class="sidebar-icon">
-            <svg
-              width="46"
-              height="46"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M12 5v14"></path>
-              <path d="M5 12h14"></path>
-            </svg>
+          <svg-icon url="./assets/feather/plus.svg"></svg-icon>
+          <div class="sidebar-item-text">
+            {{ getLz("action.createNew") }}
           </div>
-          {{ getLz("action.createNew") }}
         </button>
         <sidebar-playlist
           v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 82bbe83c..6d276618 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='clickEvent()'>
             <template v-if="!renaming">
-                <div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }}
+                <svg-icon :url="icon"/> {{ item.attributes.name }}
                 <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
@@ -57,9 +57,9 @@
         },
         async mounted() {
             if (this.item.type !== "library-playlist-folders") {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+                this.icon = ("./assets/feather/list.svg")
             } else {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
+                this.icon = ("./assets/feather/folder.svg")
             }
             let playlistMap = this.$root.playlists.trackMapping
             if (this.relateMediaItems.length != 0) {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 3cbe864c..32bee000 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -123,8 +123,8 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
-        {{ name }}
+        <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
+        <span class="sidebar-item-text">{{ name }}</span>
     </button>
 </script>