From 7e108aceadaf455f78258cfbf957fbb8941cecdc Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 30 Apr 2021 16:46:47 -0700
Subject: [PATCH] feat(link): support link with icon

---
 COMPONENT_INDEX.md                 | 17 +++++++++--------
 docs/src/COMPONENT_API.json        |  9 +++++++++
 docs/src/pages/components/Link.svx | 10 ++++++++++
 src/Link/Link.svelte               | 16 ++++++++++++++--
 types/Link/Link.d.ts               |  6 ++++++
 5 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index e1fc6e00..3d2cdec6 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1945,14 +1945,15 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                                                   | Default value      | Description                                      |
-| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code>  | Obtain a reference to the top-level HTML element |
-| size      | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                                          | --                 | Specify the size of the link                     |
-| href      | <code>let</code> | No       | <code>string</code>                                                    | --                 | Specify the href value                           |
-| inline    | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to use the inline variant          |
-| disabled  | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to disable the checkbox            |
-| visited   | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to allow visited styles            |
+| Prop name | Kind             | Reactive | Type                                                                   | Default value      | Description                                                                         |
+| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code>  | Obtain a reference to the top-level HTML element                                    |
+| size      | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                                          | --                 | Specify the size of the link                                                        |
+| href      | <code>let</code> | No       | <code>string</code>                                                    | --                 | Specify the href value                                                              |
+| inline    | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to use the inline variant                                             |
+| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>           | --                 | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
+| disabled  | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to disable the checkbox                                               |
+| visited   | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to allow visited styles                                               |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 1d1410f9..3253c26b 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4614,6 +4614,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "disabled",
           "kind": "let",
diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx
index 115ec048..52bc215f 100644
--- a/docs/src/pages/components/Link.svx
+++ b/docs/src/pages/components/Link.svx
@@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
 
 <script>
   import { Link, OutboundLink } from "carbon-components-svelte";
+  import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
   <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
 </div>
 
+### Link with icon
+
+Note that `inline` must be `false` when rendering a link with an icon.
+
+<div>
+  Visit the
+  <Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
+</div>
+
 ### Large size
 
 <Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 15eff2ab..275c1932 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -14,6 +14,13 @@
   /** Set to `true` to use the inline variant */
   export let inline = false;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * `inline` must be `false`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /** Set to `true` to disable the checkbox */
   export let disabled = false;
 
@@ -37,7 +44,9 @@
     on:mouseenter
     on:mouseleave
   >
-    <slot />
+    <slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
+        <svelte:component this="{icon}" />
+      </div>{/if}
   </p>
 {:else}
   <a
@@ -54,6 +63,9 @@
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave><slot /></a
+    on:mouseleave
+    ><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
+        <svelte:component this="{icon}" />
+      </div>{/if}</a
   >
 {/if}
diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts
index d8dd0993..759fbd30 100644
--- a/types/Link/Link.d.ts
+++ b/types/Link/Link.d.ts
@@ -19,6 +19,12 @@ export interface LinkProps
    */
   inline?: boolean;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * `inline` must be `false`
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
   /**
    * Set to `true` to disable the checkbox
    * @default false