feat(tooltip-icon): add icon prop

This allows consumers to pass a Carbon icon as a prop instead of using the default slot.

COMPONENT_INDEX.md

@@ -4517,16 +4517,17 @@ None.
 | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
 | ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                            |
 | tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
+| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>    | --                                               | Specify the icon from `carbon-icons-svelte` to render                    |
 | align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                    |
 | direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon                    |
 | id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                                           |
 
 ### Slots
 
-| Slot name   | Default | Props | Fallback                   |
-| :---------- | :------ | :---- | :------------------------- |
-| --          | Yes     | --    | --                         |
-| tooltipText | No      | --    | <code>{tooltipText}</code> |
+| Slot name   | Default | Props | Fallback                                              |
+| :---------- | :------ | :---- | :---------------------------------------------------- |
+| --          | Yes     | --    | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
+| tooltipText | No      | --    | <code>{tooltipText}</code>                            |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -11365,6 +11365,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "align",
           "kind": "let",
@@ -11407,7 +11416,12 @@
         }
       ],
       "slots": [
-        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "<svelte:component this=\"{icon}\" />",
+          "slot_props": "{}"
+        },
         {
           "name": "tooltipText",
           "default": false,

docs/src/pages/components/TooltipIcon.svx

@@ -7,22 +7,19 @@
 
 ### Default ("bottom" direction, "center" aligned)
 
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
-  <Carbon24 />
-</TooltipIcon>
+<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
 
 ### Directions
 
-<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
-<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
-<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
-<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
+<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
+<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
+<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
 
 ### Custom tooltip text
 
 Use the "text" slot to customize the tooltip text.
 
-<TooltipIcon>
+<TooltipIcon icon={Carbon24}>
   <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
-  <Carbon24 />
 </TooltipIcon>

src/TooltipIcon/TooltipIcon.svelte

@@ -5,6 +5,12 @@
    */
   export let tooltipText = "";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /**
    * Set the alignment of the tooltip relative to the icon
    * @type {"start" | "center" | "end"}
@@ -62,5 +68,7 @@
   <span id="{id}" class:bx--assistive-text="{true}">
     <slot name="tooltipText">{tooltipText}</slot>
   </span>
-  <slot />
+  <slot>
+    <svelte:component this="{icon}" />
+  </slot>
 </button>

types/TooltipIcon/TooltipIcon.d.ts

@@ -10,6 +10,11 @@ export interface TooltipIconProps
    */
   tooltipText?: string;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
   /**
    * Set the alignment of the tooltip relative to the icon
    * @default "center"