feat(link): support link with icon

COMPONENT_INDEX.md

@@ -1946,11 +1946,12 @@ 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                                             |
+| 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                                               |
 

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",

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>

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}

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