From 63ef51209d5902ef7d55ad3c14b3070693098669 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 27 Jan 2021 14:16:07 -0800
Subject: [PATCH] feat: make renderIcon/icon prop consistent (#496)

---
 COMPONENT_INDEX.md                            | 54 +++++++++----------
 docs/src/COMPONENT_API.json                   | 18 +++----
 docs/src/pages/_layout.svelte                 |  2 +-
 src/Notification/NotificationButton.svelte    |  4 +-
 src/UIShell/GlobalHeader/HeaderAction.svelte  | 12 ++---
 .../GlobalHeader/HeaderActionLink.svelte      |  8 +--
 src/UIShell/SideNav/SideNavLink.svelte        |  8 +--
 src/UIShell/SideNav/SideNavMenu.svelte        | 10 ++--
 types/Notification/NotificationButton.d.ts    |  2 +-
 types/UIShell/GlobalHeader/HeaderAction.d.ts  |  4 +-
 .../GlobalHeader/HeaderActionLink.d.ts        |  4 +-
 types/UIShell/SideNav/SideNavLink.d.ts        |  4 +-
 types/UIShell/SideNav/SideNavMenu.d.ts        |  4 +-
 13 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 07454755..13881a05 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1400,13 +1400,13 @@ export interface HeaderActionSlideTransition {
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                                                                                  | Default value                  | Description                                                                                                   |
-| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                                            | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
-| isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                                                  | <code>false</code>             | Set to `true` to open the panel                                                                               |
-| icon       | <code>let</code> | No       | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | --                             | Specify the icon props                                                                                        |
-| text       | <code>let</code> | No       | <code>string</code>                                                                   | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
-| transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code>                                 | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |
+| Prop name  | Kind             | Reactive | Type                                                         | Default value                  | Description                                                                                                   |
+| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
+| isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>             | Set to `true` to open the panel                                                                               |
+| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the icon from `carbon-icons-svelte` to render                                                         |
+| text       | <code>let</code> | No       | <code>string</code>                                          | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
+| transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code>        | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |
 
 ### Slots
 
@@ -1426,12 +1426,12 @@ export interface HeaderActionSlideTransition {
 
 ### Props
 
-| Prop name    | Kind             | Reactive | Type                                                                                  | Default value      | Description                                   |
-| :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- |
-| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                                            | <code>null</code>  | Obtain a reference to the HTML anchor element |
-| linkIsActive | <code>let</code> | No       | <code>boolean</code>                                                                  | <code>false</code> | Set to `true` to use the active state         |
-| href         | <code>let</code> | No       | <code>string</code>                                                                   | --                 | Specify the `href` attribute                  |
-| icon         | <code>let</code> | No       | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | --                 | Specify the icon props                        |
+| Prop name    | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
+| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
+| linkIsActive | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to use the active state                 |
+| href         | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
+| icon         | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
@@ -2207,7 +2207,7 @@ None.
 | Prop name        | Kind             | Reactive | Type                                                         | Default value             | Description                                           |
 | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
 | notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                         | <code>"toast"</code>      | Set the type of notification                          |
-| renderIcon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                        | Specify the icon from `carbon-icons-svelte` to render |
+| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                        | Specify the icon from `carbon-icons-svelte` to render |
 | title            | <code>let</code> | No       | <code>string</code>                                          | --                        | Specify the title of the icon                         |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Close icon"</code> | Specify the ARIA label for the icon                   |
 
@@ -2982,13 +2982,13 @@ None.
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                                                                                  | Default value      | Description                                   |
-| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- |
-| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                                            | <code>null</code>  | Obtain a reference to the HTML anchor element |
-| isSelected | <code>let</code> | No       | <code>boolean</code>                                                                  | <code>false</code> | Set to `true` to select the current link      |
-| href       | <code>let</code> | No       | <code>string</code>                                                                   | --                 | Specify the `href` attribute                  |
-| text       | <code>let</code> | No       | <code>string</code>                                                                   | --                 | Specify the text                              |
-| icon       | <code>let</code> | No       | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | --                 | Specify the icon props                        |
+| Prop name  | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
+| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
+| isSelected | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to select the current link              |
+| href       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
+| text       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
+| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
@@ -3004,12 +3004,12 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                                                                  | Default value      | Description                                   |
-| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                                            | <code>null</code>  | Obtain a reference to the HTML button element |
-| expanded  | <code>let</code> | Yes      | <code>boolean</code>                                                                  | <code>false</code> | Set to `true` to toggle the expanded state    |
-| text      | <code>let</code> | No       | <code>string</code>                                                                   | --                 | Specify the text                              |
-| icon      | <code>let</code> | No       | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | --                 | Specify the icon props                        |
+| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
+| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>  | Obtain a reference to the HTML button element         |
+| expanded  | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to toggle the expanded state            |
+| text      | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
+| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index ab8ee008..641e5d13 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5621,7 +5621,7 @@
           "reactive": false
         },
         {
-          "name": "renderIcon",
+          "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
           "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
@@ -9828,8 +9828,8 @@
         {
           "name": "icon",
           "kind": "let",
-          "description": "Specify the icon props",
-          "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -9912,8 +9912,8 @@
         {
           "name": "icon",
           "kind": "let",
-          "description": "Specify the icon props",
-          "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -10230,8 +10230,8 @@
         {
           "name": "icon",
           "kind": "let",
-          "description": "Specify the icon props",
-          "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -10278,8 +10278,8 @@
         {
           "name": "icon",
           "kind": "let",
-          "description": "Specify the icon props",
-          "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
           "reactive": false
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 2726efa3..e2131aee 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -182,7 +182,7 @@
 
     <HeaderUtilities>
       <HeaderActionLink
-        icon="{{ render: LogoGithub20 }}"
+        icon="{LogoGithub20}"
         href="https://github.com/IBM/carbon-components-svelte"
         target="_blank"
       />
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index 9c5983b6..cccd78a3 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -9,7 +9,7 @@
    * Specify the icon from `carbon-icons-svelte` to render
    * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
-  export let renderIcon = Close20;
+  export let icon = Close20;
 
   /**
    * Specify the title of the icon
@@ -36,7 +36,7 @@
   on:mouseleave
 >
   <svelte:component
-    this="{renderIcon}"
+    this="{icon}"
     title="{title}"
     class="bx--{notificationType}-notification__close-icon"
   />
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 37e6b2d7..34473322 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -7,8 +7,8 @@
   export let isOpen = false;
 
   /**
-   * Specify the icon props
-   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = undefined;
 
@@ -31,9 +31,9 @@
 
   import { createEventDispatcher } from "svelte";
   import { slide } from "svelte/transition";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { Icon } from "../../Icon";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20/AppSwitcher20.svelte";
+  import Icon from "../../Icon/Icon.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -79,7 +79,7 @@
       dispatch(isOpen ? 'open' : 'close');
     }}"
   >
-    <Icon render="{isOpen ? Close20 : AppSwitcher20}" {...icon} />
+    <Icon render="{icon || (isOpen ? Close20 : AppSwitcher20)}" />
     <slot name="text">
       {#if text}<span>{text}</span>{/if}
     </slot>
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index 8c80210e..01cedbea 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -9,15 +9,15 @@
   export let href = undefined;
 
   /**
-   * Specify the icon props
-   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = undefined;
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
-  import { Icon } from "../../Icon";
+  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <style>
@@ -39,5 +39,5 @@
   rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
   {...$$restProps}
 >
-  <Icon {...icon} />
+  <Icon render="{icon}" />
 </a>
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index d79c59bf..eca2e042 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -15,15 +15,15 @@
   export let text = undefined;
 
   /**
-   * Specify the icon props
-   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = undefined;
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
-  import { Icon } from "../../Icon";
+  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}">
@@ -42,7 +42,7 @@
         class:bx--side-nav__icon="{true}"
         class:bx--side-nav__icon--small="{true}"
       >
-        <Icon {...icon} />
+        <Icon render="{icon}" />
       </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 e103e900..c68bb5df 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -9,16 +9,16 @@
   export let text = undefined;
 
   /**
-   * Specify the icon props
-   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = undefined;
 
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
-  import { Icon } from "../../Icon";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@@ -35,7 +35,7 @@
   >
     {#if icon}
       <div class:bx--side-nav__icon="{true}">
-        <Icon {...icon} />
+        <Icon render="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__submenu-title="{true}">{text}</span>
diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts
index 5bf25670..be3b1221 100644
--- a/types/Notification/NotificationButton.d.ts
+++ b/types/Notification/NotificationButton.d.ts
@@ -10,7 +10,7 @@ export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes<HTMLE
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  renderIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Specify the title of the icon
diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts
index 4cb1aeec..bf476dfc 100644
--- a/types/UIShell/GlobalHeader/HeaderAction.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts
@@ -14,9 +14,9 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
   isOpen?: boolean;
 
   /**
-   * Specify the icon props
+   * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Specify the text
diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
index 7d474c44..daea25b0 100644
--- a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
@@ -13,9 +13,9 @@ export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes<HTMLEle
   href?: string;
 
   /**
-   * Specify the icon props
+   * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Obtain a reference to the HTML anchor element
diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts
index 4ec630b5..3a22e9ed 100644
--- a/types/UIShell/SideNav/SideNavLink.d.ts
+++ b/types/UIShell/SideNav/SideNavLink.d.ts
@@ -18,9 +18,9 @@ export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementT
   text?: string;
 
   /**
-   * Specify the icon props
+   * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Obtain a reference to the HTML anchor element
diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts
index 91f7d4f5..544c93f1 100644
--- a/types/UIShell/SideNav/SideNavMenu.d.ts
+++ b/types/UIShell/SideNav/SideNavMenu.d.ts
@@ -13,9 +13,9 @@ export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementT
   text?: string;
 
   /**
-   * Specify the icon props
+   * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Obtain a reference to the HTML button element