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]

tests/Button.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button } from "../types";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
 </script>
 
 <Button>Primary button</Button>
@@ -17,10 +17,10 @@
 
 <Button kind="danger-ghost">Danger ghost button</Button>
 
-<Button icon="{Add16}">With icon</Button>
+<Button icon="{Add}">With icon</Button>
 
 <Button
-  icon="{Add16}"
+  icon="{Add}"
   tooltipPosition="bottom"
   tooltipAlignment="center"
   iconDescription="Tooltip text"

tests/ButtonSet.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, ButtonSet } from "../types";
-  import Login16 from "carbon-icons-svelte/lib/Login16";
+  import Login from "carbon-icons-svelte/lib/Login.svelte";
 </script>
 
 <ButtonSet>
@@ -9,6 +9,6 @@
 </ButtonSet>
 
 <ButtonSet stacked>
-  <Button icon="{Login16}">Log in</Button>
+  <Button icon="{Login}">Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>

tests/ContentSwitcher.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ContentSwitcher, Switch } from "../types";
-  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
 </script>
 
 <ContentSwitcher size="xl" selectedIndex="{1}">
@@ -8,7 +8,7 @@
   <Switch text="Trending" />
   <Switch>
     <div style="display: flex; align-items: center;">
-      <Analytics16 style="margin-right: 0.5rem;" />
+      <Analytics style="margin-right: 0.5rem;" />
       Trending
     </div>
   </Switch>

tests/ContextMenu.test.svelte

@@ -6,8 +6,8 @@
     ContextMenuRadioGroup,
     ContextMenuGroup,
   } from "../types";
-  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
-  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
   let selectedId = "0";
   let selectedIds = [];
@@ -21,14 +21,9 @@
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile16}"
-  />
-  <ContextMenuOption
-    indented
-    labelText="Cut"
-    shortcutText="⌘X"
-    icon="{Cut16}"
+    icon="{CopyFile}"
   />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options" bind:selectedIds>

tests/DataTable.test.svelte

@@ -11,7 +11,7 @@
     Link,
   } from "../types";
   import type { DataTableHeader } from "../types/DataTable/DataTable.svelte";
-  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
 
   const headers: DataTableHeader[] = [
     { key: "name", value: "Name" },
@@ -87,7 +87,7 @@
         target="_blank"
       >
         {cell.value}
-        <Launch16 />
+        <Launch />
       </Link>
     {:else}{cell.value}{/if}
   </span>

tests/DataTableBatchSelectionToolbar.test.svelte

@@ -9,7 +9,7 @@
     ToolbarBatchActions,
     Button,
   } from "../types";
-  import Save16 from "carbon-icons-svelte/lib/Save16";
+  import Save from "carbon-icons-svelte/lib/Save.svelte";
 
   const headers = [
     { key: "name", value: "Name" },
@@ -34,7 +34,7 @@
 <DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
   <Toolbar>
     <ToolbarBatchActions>
-      <Button icon="{Save16}">Save</Button>
+      <Button icon="{Save}">Save</Button>
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />

tests/HeaderUtilities.test.svelte

@@ -18,7 +18,7 @@
     Row,
     Column,
   } from "../types";
-  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+  import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
   import { quintOut } from "svelte/easing";
 
   let isSideNavOpen = false;
@@ -30,7 +30,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
+    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen
       transition="{{ duration: 400, easing: quintOut }}"

tests/OverflowMenu.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { OverflowMenu, OverflowMenuItem } from "../types";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
 </script>
 
 <OverflowMenu
@@ -61,7 +61,7 @@
   <OverflowMenuItem primaryFocus danger text="Delete service" />
 </OverflowMenu>
 
-<OverflowMenu icon="{Add16}">
+<OverflowMenu icon="{Add}">
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
     href="https://cloud.ibm.com/docs/api-gateway/"

tests/StructuredList.test.svelte

@@ -8,7 +8,7 @@
     StructuredListRow,
     StructuredListInput,
   } from "../types";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
 </script>
 
 <StructuredList>
@@ -80,7 +80,7 @@
           name="row-{item}-name"
         />
         <StructuredListCell>
-          <CheckmarkFilled16
+          <CheckmarkFilled
             class="bx--structured-list-svg"
             aria-label="select an option"
             title="select an option"

tests/Tag.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Tag } from "../types";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
 </script>
 
 <Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
@@ -31,7 +31,7 @@
 
 <Tag filter on:click on:close>Filterable</Tag>
 
-<Tag icon="{Add16}">Custom icon</Tag>
+<Tag icon="{Add}">Custom icon</Tag>
 
 <Tag interactive>Text</Tag>
 

tests/Tooltip.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Tooltip, Link, Button } from "../types";
-  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+  import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
 
   let open = true;
 </script>
@@ -41,7 +41,7 @@
 
 <Button size="small">Manage</Button>
 
-<Tooltip triggerText="Resource list" icon="{Catalog16}">
+<Tooltip triggerText="Resource list" icon="{Catalog}">
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 

tests/TooltipIcon.test.svelte

@@ -1,32 +1,33 @@
 <script lang="ts">
   import { TooltipIcon } from "../types";
-  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
-  import Filter20 from "carbon-icons-svelte/lib/Filter20";
+  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
+  import Filter from "carbon-icons-svelte/lib/Filter.svelte";
+  import FilterReset from "carbon-icons-svelte/lib/FilterReset.svelte";
 </script>
 
 <TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
-  <Carbon24 />
+  <Carbon />
 </TooltipIcon>
 
 <TooltipIcon tooltipText="Top start" direction="top" align="start">
-  <Filter20 />
+  <Filter />
 </TooltipIcon>
 
 <TooltipIcon tooltipText="Right end" direction="right" align="end">
-  <Filter20 />
+  <Filter />
 </TooltipIcon>
 
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start">
-  <Filter20 />
+  <FilterReset />
 </TooltipIcon>
 
 <TooltipIcon tooltipText="Left start" direction="left" align="start">
-  <Filter20 />
+  <FilterReset />
 </TooltipIcon>
 
 <TooltipIcon>
   <span slot="text" style="color: red"
     >Carbon is an open source design system by IBM.</span
   >
-  <Carbon24 />
+  <Carbon />
 </TooltipIcon>

tests/TreeView.test.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { TreeView } from "../types";
   import type { TreeNodeId } from "../types/TreeView/TreeView.svelte";
-  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
 
   let treeview: TreeView;
   let activeId: TreeNodeId = "";
   let selectedIds = [];
   let expandedIds = [1];
   let children = [
-    { id: 0, text: "AI / Machine learning", icon: Analytics16 },
+    { id: 0, text: "AI / Machine learning", icon: Analytics },
     {
       id: 1,
       text: "Analytics",