refactor(components): convert const to reactive where appropriate

- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href

src/components/Icon/Icon.Skeleton.svelte

@@ -5,9 +5,12 @@
   export let style = undefined;
 
   import { cx, css } from '../../lib';
-
-  const _class = cx('--icon--skeleton', className);
-  const _style = css([style, ['width', `${size}px`], ['height', `${size}px`]]);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} style={_style} />
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--icon--skeleton', className)}
+  style={css([style, ['width', `${size}px`], ['height', `${size}px`]])} />

src/components/Icon/Icon.svelte

@@ -10,8 +10,8 @@
 
   import IconSkeleton from './Icon.Skeleton.svelte';
 
-  const iconName = render.toString().split(' ')[1];
-  const size = parseInt(iconName.slice(-2), 10);
+  $: iconName = render.toString().split(' ')[1];
+  $: size = parseInt(iconName.slice(-2), 10);
 </script>
 
 {#if skeleton}
@@ -20,18 +20,18 @@
     on:mouseover
     on:mouseenter
     on:mouseleave
-    {size}
     class={className}
-    {style} />
+    {style}
+    {size} />
 {:else}
   <svelte:component
     this={render}
+    aria-label={$$props['aria-label']}
+    aria-labelledby={$$props['aria-labelledby']}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    aria-label={$$props['aria-label']}
-    aria-labelledby={$$props['aria-labelledby']}
     class={className}
     {tabindex}
     {focusable}