web/SidebarTab: pass icon prop instead of using slot

web/src/components/sidebar/Sidebar.svelte

@@ -19,8 +19,8 @@
     let aboutLink = defaultNavPage("about");
 
     $: screenWidth,
-       settingsLink = defaultNavPage("settings"),
-       aboutLink = defaultNavPage("about");
+        (settingsLink = defaultNavPage("settings")),
+        (aboutLink = defaultNavPage("about"));
 </script>
 
 <svelte:window bind:innerWidth={screenWidth} />
@@ -29,26 +29,14 @@
     <CobaltLogo />
     <div id="sidebar-tabs" role="tablist">
         <div id="sidebar-actions" class="sidebar-inner-container">
-            <SidebarTab tabName="save" tabLink="/">
-                <IconDownload />
-            </SidebarTab>
-            <SidebarTab tabName="remux" tabLink="/remux" beta>
-                <IconRepeat />
-            </SidebarTab>
+            <SidebarTab name="save" path="/" icon={IconDownload} />
+            <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">
-            <SidebarTab tabName="settings" tabLink={settingsLink}>
-                <IconSettings />
-            </SidebarTab>
-            <SidebarTab tabName="donate" tabLink="/donate">
-                <IconHeart />
-            </SidebarTab>
-            <SidebarTab tabName="updates" tabLink="/updates">
-                <IconComet />
-            </SidebarTab>
-            <SidebarTab tabName="about" tabLink={aboutLink}>
-                <IconInfoCircle />
-            </SidebarTab>
+            <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />
+            <SidebarTab name="donate" path="/donate" icon={IconHeart} />
+            <SidebarTab name="updates" path="/updates" icon={IconComet} />
+            <SidebarTab name="about" path={aboutLink} icon={IconInfoCircle} />
         </div>
     </div>
 </nav>

web/src/components/sidebar/SidebarTab.svelte

@@ -3,8 +3,10 @@
 
     import { t } from "$lib/i18n/translations";
 
-    export let tabName: string;
-    export let tabLink: string;
+    export let name: string;
+    export let path: string;
+    export let icon: ConstructorOfATypedSvelteComponent;
+
     export let beta = false;
 
     const firstTabPage = ["save", "remux", "settings"];
@@ -12,14 +14,14 @@
     let tab: HTMLElement;
 
     $: currentTab = $page.url.pathname.split("/")[1];
-    $: baseTabPath = tabLink.split("/")[1];
+    $: baseTabPath = path.split("/")[1];
 
     $: isTabActive = currentTab === baseTabPath;
 
     const showTab = (e: HTMLElement) => {
         if (e) {
             e.scrollIntoView({
-                inline: firstTabPage.includes(tabName) ? "end" : "start",
+                inline: firstTabPage.includes(name) ? "end" : "start",
                 block: "nearest",
                 behavior: "smooth",
             });
@@ -32,10 +34,10 @@
 </script>
 
 <a
-    id="sidebar-tab-{tabName}"
+    id="sidebar-tab-{name}"
     class="sidebar-tab"
     class:active={isTabActive}
-    href={tabLink}
+    href={path}
     bind:this={tab}
     on:focus={() => showTab(tab)}
     role="tab"
@@ -44,8 +46,9 @@
     {#if beta}
         <div class="beta-sign" aria-label={$t("general.beta")}>β</div>
     {/if}
-    <slot></slot>
-    {$t(`tabs.${tabName}`)}
+
+    <svelte:component this={icon} />
+    {$t(`tabs.${name}`)}
 </a>
 
 <style>