refactor(accordion): use the class name directive, resolve svelte icon paths

src/Accordion/Accordion.svelte

@@ -43,10 +43,11 @@
 {:else}
   <ul
     class:bx--accordion="{true}"
+    class:bx--accordion--start="{align === 'start'}"
+    class:bx--accordion--end="{align === 'end'}"
+    class:bx--accordion--sm="{size === 'sm'}"
+    class:bx--accordion--xl="{size === 'xl'}"
     {...$$restProps}
-    class="bx--accordion--{align}
-      {size && `bx--accordion--${size}`}
-      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter

src/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    */
   export let title = "title";
 
@@ -15,7 +15,7 @@
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
 
   let initialDisabled = disabled;
 
@@ -38,8 +38,9 @@
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
   class:bx--accordion__item--disabled="{disabled}"
+  class:bx--accordion__item--expanding="{animation === 'expanding'}"
+  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
   {...$$restProps}
-  class="bx--accordion__item--{animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;
@@ -70,11 +71,11 @@
       class="bx--accordion__arrow"
       aria-label="{iconDescription}"
     />
-    <div class="bx--accordion__title">
+    <div class:bx--accordion__title="{true}">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class="bx--accordion__content">
+  <div class:bx--accordion__content="{true}">
     <slot />
   </div>
 </li>

src/Accordion/AccordionSkeleton.svelte

@@ -17,17 +17,18 @@
   /** Set to `false` to close the first accordion item */
   export let open = true;
 
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
-  import { SkeletonText } from "../SkeletonText";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <ul
-  class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
+  class:bx--accordion="{true}"
+  class:bx--accordion--start="{align === 'start'}"
+  class:bx--accordion--end="{align === 'end'}"
+  class:bx--accordion--sm="{size === 'sm'}"
+  class:bx--accordion--xl="{size === 'xl'}"
   {...$$restProps}
-  class="bx--accordion--{align}
-    {size && `bx--accordion--${size}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
@@ -49,7 +50,7 @@
       </div>
     </li>
   {/if}
-  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
     <li class="bx--accordion__item">
       <span class="bx--accordion__heading">
         <ChevronRight16 class="bx--accordion__arrow" />