added <svg-icon/>

params:
- url: string - url of the svg icon
- name: string - the icon's name to help with theming

src/renderer/less/helpers.less

@@ -64,7 +64,8 @@
       overflow-y: overlay;
     }
 
-    .modal-footer {}
+    .modal-footer {
+    }
   }
 }
 
@@ -74,7 +75,9 @@
       height: 700px;
       max-height: 700px;
       width: 800px;
-    max-width : 800px;}
+      max-width: 800px;
+    }
+
     overflow: hidden;
 
     .info-header {
@@ -481,6 +484,7 @@
       z-index: -1;
       filter: blur(32px) brightness(50%) saturate(280%);
     }
+
     .popover-artwork {
       width: 200px;
       height: 200px;
@@ -491,6 +495,7 @@
     .song-name {
       font-weight: 600;
     }
+
     .song-artist, .song-album {
       opacity: 0.75;
       cursor: pointer;
@@ -501,3 +506,13 @@
     }
   }
 }
+
+._svg-icon {
+  --icon: url("./assets/chevron-left.svg");
+  width: 1em;
+  height: 1em;
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-position: center;
+  background: white;
+  -webkit-mask-repeat: no-repeat;
+}

src/renderer/main/app.js

@@ -7,6 +7,7 @@ import {Events} from './events.js'
 import { wsapi } from "./wsapi_interop.js"
 import { MusicKitTools } from "./musickittools.js"
 import { spawnMica } from "./mica.js"
+import { svgIcon } from './components/svg-icon.js'
 
 
 // Define window objects

src/renderer/main/components/svg-icon.js

@@ -0,0 +1,16 @@
+export const svgIcon = Vue.component("svg-icon", {
+    template: `
+        <div class="_svg-icon" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
+    `,
+    props: {
+        name: {
+            type: String,
+            required: false
+        },
+        url: {
+            type: String,
+            required: true,
+            default: "./assets/repeat.svg"
+        }
+    }
+})

src/renderer/views/components/settings-window.ejs

@@ -6,7 +6,7 @@
         <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
             <b-tab>
                 <template #title>
-                    <div>⚙️</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-general" /></div>
                     <div>
                         {{ $root.getLz('settings.header.general') }}
                     </div>
@@ -234,7 +234,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔊</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-audio" /></div>
                     <div>
                         {{ $root.getLz('settings.header.audio') }}
                     </div>
@@ -372,7 +372,7 @@
             </b-tab>
             <b-tab v-if="app.cfg.advanced.AudioContext">
                 <template #title>
-                    <div>✨</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-audiolabs" /></div>
                     <div>
                         {{ $root.getLz('settings.option.audio.audioLab') }}
                     </div>
@@ -383,7 +383,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎨</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-visual" /></div>
                     <div>
                         {{ $root.getLz('settings.header.visual') }}
                     </div>
@@ -624,7 +624,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎤</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-lyrics" /></div>
                     <div>
                         {{ $root.getLz('settings.header.lyrics') }}
                     </div>
@@ -963,7 +963,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔌</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-connectivity" /></div>
                     <div>
                         {{ $root.getLz('settings.header.connectivity') }}
                     </div>
@@ -1143,7 +1143,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>💻</div>
+                    <div><svg-icon url="./assets/play.svg" name="settings-advanced" /></div>
                     <div>
                         {{$root.getLz('settings.header.advanced')}}
                     </div>

src/renderer/views/pages/zoo.ejs

@@ -1,5 +1,6 @@
 <script type="text/x-template" id="cider-zoo">
     <div class="content-inner">
+        <svg-icon/>
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}