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/DataTable/DataTable.svelte

@@ -114,7 +114,7 @@
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
-  import ChevronRight16 from "../icons/ChevronRight16.svelte";
+  import ChevronRight from "../icons/ChevronRight.svelte";
   import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
   import RadioButton from "../RadioButton/RadioButton.svelte";
   import Table from "./Table.svelte";
@@ -286,7 +286,7 @@
                   dispatch('click:header--expand', { expanded });
                 }}"
               >
-                <ChevronRight16 class="bx--table-expand__svg" />
+                <ChevronRight class="bx--table-expand__svg" />
               </button>
             {/if}
           </th>
@@ -413,7 +413,7 @@
                     });
                   }}"
                 >
-                  <ChevronRight16 class="bx--table-expand__svg" />
+                  <ChevronRight class="bx--table-expand__svg" />
                 </button>
               {/if}
             </TableCell>

src/DataTable/TableHeader.svelte

@@ -15,8 +15,8 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";
-  import ArrowUp20 from "../icons/ArrowUp20.svelte";
-  import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
+  import ArrowUp from "../icons/ArrowUp.svelte";
+  import ArrowsVertical from "../icons/ArrowsVertical.svelte";
 
   const { sortHeader, tableSortable } = getContext("DataTable");
 
@@ -46,8 +46,13 @@
       <div class:bx--table-header-label="{true}">
         <slot />
       </div>
-      <ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
-      <ArrowsVertical20
+      <ArrowUp
+        size="{20}"
+        aria-label="{ariaLabel}"
+        class="bx--table-sort__icon"
+      />
+      <ArrowsVertical
+        size="{20}"
         aria-label="{ariaLabel}"
         class="bx--table-sort__icon-unsorted"
       />

src/DataTable/ToolbarMenu.svelte

@@ -2,7 +2,7 @@
   /** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */
 
   import { getContext } from "svelte";
-  import Settings16 from "../icons/Settings16.svelte";
+  import Settings from "../icons/Settings.svelte";
   import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
 
   const ctx = getContext("Toolbar");
@@ -15,7 +15,7 @@
 
 <OverflowMenu
   bind:menuRef
-  icon="{Settings16}"
+  icon="{Settings}"
   {...$$restProps}
   class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
   flipped