chore: lift components folder

src/Icon/Icon.Skeleton.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let size = 16;
+</script>
+
+<div
+  class:bx--icon--skeleton={true}
+  {...$$restProps}
+  style="{$$restProps.style}; width: {size}px; height: {size}px"
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave />

src/Icon/Icon.Story.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let story = undefined;
+
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+
+  import Icon from "./Icon.svelte";
+  import IconSkeleton from "./Icon.Skeleton.svelte";
+
+  const icons = { ChevronDown16, ArrowLeft20, Add24 };
+</script>
+
+{#if story === 'skeleton'}
+  <div>
+    <IconSkeleton size={16} style="margin: 2rem;" />
+    <IconSkeleton size={32} style="margin: 2rem" />
+  </div>
+{:else}
+  <Icon {...$$props} render={icons[$$props.icon]} />
+{/if}

src/Icon/Icon.stories.js

@@ -0,0 +1,24 @@
+import { withKnobs, select, boolean } from "@storybook/addon-knobs";
+import Component from "./Icon.Story.svelte";
+
+export default { title: "Icon", decorators: [withKnobs] };
+
+const icons = {
+  ChevronDown16: "ChevronDown16",
+  ArrowLeft20: "ArrowLeft20",
+  Add24: "Add24",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    icon: select(
+      "Render icon from `carbon-icons-svelte` (render)",
+      icons,
+      "ChevronDown16"
+    ),
+    skeleton: boolean("Display icon skeleton (skeleton)", false),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/Icon/Icon.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let render = undefined;
+  export let skeleton = false;
+
+  import IconSkeleton from "./Icon.Skeleton.svelte";
+
+  $: iconName = render.toString().split(" ")[1];
+  $: size = parseInt(iconName.slice(-2), 10);
+</script>
+
+{#if skeleton}
+  <IconSkeleton
+    {size}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <svelte:component
+    this={render}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{/if}

src/Icon/index.js

@@ -0,0 +1,2 @@
+export { default as Icon } from "./Icon.svelte";
+export { default as IconSkeleton } from "./Icon.Skeleton.svelte";