refactor: use icons from carbon-icons-svelte@11 (#1227)

* chore: update ignore rules, remove unused files

* refactor(icons): use icons from carbon-icons-svelte@11

* docs(time-picker): fix default value

* chore: upgrade carbon-icons-svelte to v11

* docs: update examples to use icons from carbon-icons-svelte@11

* docs: update number of icons [ci skip]

src/UIShell/HamburgerMenu.svelte

@@ -9,24 +9,24 @@
   export let isOpen = false;
 
   /**
-   * Specify the icon to render for the closed state
-   * Defaults to `Menu20`
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let iconMenu = Menu20;
+  export let iconMenu = Menu;
 
   /**
-   * Specify the icon to render for the opened state
-   * Defaults to `Close20`
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let iconClose = Close20;
+  export let iconClose = Close;
 
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import Close20 from "../icons/Close20.svelte";
-  import Menu20 from "../icons/Menu20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
 </script>
 
 <button
@@ -41,5 +41,5 @@
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >
-  <svelte:component this="{isOpen ? iconClose : iconMenu}" />
+  <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
 </button>

src/UIShell/Header.svelte

@@ -47,21 +47,21 @@
   export let ref = null;
 
   /**
-   * Specify the icon to render for the closed state
-   * Defaults to `Menu20`
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let iconMenu = Menu20;
+  export let iconMenu = Menu;
 
   /**
-   * Specify the icon to render for the opened state
-   * Defaults to `Close20`
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let iconClose = Close20;
+  export let iconClose = Close;
 
-  import Close20 from "../icons/Close20.svelte";
-  import Menu20 from "../icons/Menu20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
   import { shouldRenderHamburgerMenu } from "./navStore";
   import HamburgerMenu from "./HamburgerMenu.svelte";
 

src/UIShell/HeaderAction.svelte

@@ -3,16 +3,18 @@
   export let isOpen = false;
 
   /**
-   * Specify the icon to render
+   * Specify the icon to render when the action panel is closed.
+   * Defaults to `<Switcher size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let icon = AppSwitcher20;
+  export let icon = Switcher;
 
   /**
-   * Specify the icon to render when the action panel is open
+   * Specify the icon to render when the action panel is open.
+   * Defaults to `<Close size={20} />`
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let closeIcon = Close20;
+  export let closeIcon = Close;
 
   /**
    * Specify the text
@@ -33,8 +35,8 @@
 
   import { createEventDispatcher } from "svelte";
   import { slide } from "svelte/transition";
-  import Close20 from "../icons/Close20.svelte";
-  import AppSwitcher20 from "../icons/AppSwitcher20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Switcher from "../icons/Switcher.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -65,11 +67,11 @@
 >
   {#if isOpen}
     <slot name="closeIcon">
-      <svelte:component this="{closeIcon}" />
+      <svelte:component this="{closeIcon}" size="{20}" />
     </slot>
   {:else}
     <slot name="icon">
-      <svelte:component this="{icon}" />
+      <svelte:component this="{icon}" size="{20}" />
     </slot>
   {/if}
   <slot name="text">

src/UIShell/HeaderActionLink.svelte

@@ -27,7 +27,7 @@
   {...$$restProps}
 >
   <slot name="icon">
-    <svelte:component this="{icon}" />
+    <svelte:component this="{icon}" size="{20}" />
   </slot>
 </a>
 

src/UIShell/HeaderNavMenu.svelte

@@ -16,7 +16,7 @@
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
 
   const selectedItems = writable({});
 
@@ -92,7 +92,7 @@
     on:blur
   >
     {text}
-    <ChevronDown16 class="bx--header__menu-arrow" />
+    <ChevronDown class="bx--header__menu-arrow" />
   </a>
   <ul
     bind:this="{menuRef}"

src/UIShell/HeaderSearch.svelte

@@ -27,8 +27,8 @@
   export let selectedResultIndex = 0;
 
   import { createEventDispatcher, tick } from "svelte";
-  import Close20 from "../icons/Close20.svelte";
-  import Search20 from "../icons/Search20.svelte";
+  import Close from "../icons/Close.svelte";
+  import IconSearch from "../icons/IconSearch.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -72,7 +72,7 @@
         active = true;
       }}"
     >
-      <Search20 title="Search" />
+      <IconSearch size="{20}" title="Search" />
     </button>
     <input
       bind:this="{ref}"
@@ -125,7 +125,7 @@
         dispatch('clear');
       }}"
     >
-      <Close20 title="Close" />
+      <Close size="{20}" title="Close" />
     </button>
   </div>
 

src/UIShell/SideNavMenu.svelte

@@ -17,7 +17,7 @@
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@@ -45,7 +45,7 @@
       class:bx--side-nav__icon--small="{true}"
       class:bx--side-nav__submenu-chevron="{true}"
     >
-      <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
+      <svelte:component this="{ChevronDown}" title="Open Menu" tabindex="0" />
     </div>
   </button>
   <ul role="menu" class:bx--side-nav__menu="{true}">