From 8591c592fe045521b5a763b0d78179cb55e6d9d2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 19 Mar 2022 11:30:51 -0700
Subject: [PATCH] feat: make icons slottable

---
 src/ContextMenu/ContextMenuOption.svelte      |  8 +++++--
 src/Link/Link.svelte                          | 23 ++++++++++++++-----
 src/Tag/Tag.svelte                            | 12 ++++++----
 src/UIShell/GlobalHeader/HeaderAction.svelte  |  8 +++++--
 .../GlobalHeader/HeaderActionLink.svelte      |  4 +++-
 src/UIShell/SideNav/SideNavLink.svelte        |  6 +++--
 src/UIShell/SideNav/SideNavMenu.svelte        |  6 +++--
 7 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 6cd3e833..d67caa80 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -245,7 +245,9 @@
     >
       {#if indented}
         <div class:bx--menu-option__icon="{true}">
-          <svelte:component this="{icon}" />
+          <slot name="icon">
+            <svelte:component this="{icon}" />
+          </slot>
         </div>
       {/if}
       <span class:bx--menu-option__label="{true}" title="{labelText}">
@@ -268,7 +270,9 @@
     >
       {#if indented}
         <div class:bx--menu-option__icon="{true}">
-          <svelte:component this="{icon}" />
+          <slot name="icon">
+            <svelte:component this="{icon}" />
+          </slot>
         </div>
       {/if}
       <span class:bx--menu-option__label="{true}" title="{labelText}">
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 0da97518..65732cc4 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -45,9 +45,14 @@
     on:mouseenter
     on:mouseleave
   >
-    <slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
-        <svelte:component this="{icon}" />
-      </div>{/if}
+    <slot />
+    {#if !inline && ($$slots.icon || icon)}
+      <div class:bx--link__icon="{true}">
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
+      </div>
+    {/if}
   </p>
 {:else}
   <a
@@ -65,8 +70,14 @@
     on:mouseover
     on:mouseenter
     on:mouseleave
-    ><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
-        <svelte:component this="{icon}" />
-      </div>{/if}</a
   >
+    <slot />
+    {#if !inline && ($$slots.icon || icon)}
+      <div class:bx--link__icon="{true}">
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
+      </div>
+    {/if}
+  </a>
 {/if}
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index a7174d95..3862b1a6 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -120,9 +120,11 @@
     on:mouseenter
     on:mouseleave
   >
-    {#if icon}
+    {#if $$slots.icon || icon}
       <div class:bx--tag__custom-icon="{true}">
-        <svelte:component this="{icon}" />
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
       </div>
     {/if}
     <span>
@@ -153,9 +155,11 @@
     on:mouseenter
     on:mouseleave
   >
-    {#if icon}
+    {#if $$slots.icon || icon}
       <div class:bx--tag__custom-icon="{true}">
-        <svelte:component this="{icon}" />
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
       </div>
     {/if}
     <span>
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 34197d1a..fdf8958e 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -64,9 +64,13 @@
   }}"
 >
   {#if isOpen}
-    <svelte:component this="{closeIcon}" />
+    <slot name="closeIcon">
+      <svelte:component this="{closeIcon}" />
+    </slot>
   {:else}
-    <svelte:component this="{icon}" />
+    <slot name="icon">
+      <svelte:component this="{icon}" />
+    </slot>
   {/if}
   <slot name="text">
     {#if text}<span>{text}</span>{/if}
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index 508594e2..3283b398 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -26,7 +26,9 @@
   rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
   {...$$restProps}
 >
-  <svelte:component this="{icon}" />
+  <slot name="icon">
+    <svelte:component this="{icon}" />
+  </slot>
 </a>
 
 <style>
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index 8053cd49..1132ad00 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -35,12 +35,14 @@
     {...$$restProps}
     on:click
   >
-    {#if icon}
+    {#if $$slots.icon || icon}
       <div
         class:bx--side-nav__icon="{true}"
         class:bx--side-nav__icon--small="{true}"
       >
-        <svelte:component this="{icon}" />
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
       </div>
     {/if}
     <span class:bx--side-nav__link-text="{true}">{text}</span>
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index f261cf96..56ee55cb 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -32,9 +32,11 @@
       expanded = !expanded;
     }}"
   >
-    {#if icon}
+    {#if $$slots.icon || icon}
       <div class:bx--side-nav__icon="{true}">
-        <svelte:component this="{icon}" />
+        <slot name="icon">
+          <svelte:component this="{icon}" />
+        </slot>
       </div>
     {/if}
     <span class:bx--side-nav__submenu-title="{true}">{text}</span>