feat(component): add Icon

Closes #30

src/components/Icon/Icon.Skeleton.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let size = 16;
+  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} />

src/components/Icon/Icon.Story.svelte

@@ -0,0 +1,23 @@
+<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 Layout from '../../internal/ui/Layout.svelte';
+  import Icon from './Icon.svelte';
+  import IconSkeleton from './Icon.Skeleton.svelte';
+
+  const icons = { ChevronDown16, ArrowLeft20, Add24 };
+</script>
+
+<Layout>
+  {#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}
+</Layout>

src/components/Icon/Icon.stories.js

@@ -0,0 +1,20 @@
+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/components/Icon/Icon.svelte

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

src/components/Icon/index.js

@@ -0,0 +1,4 @@
+import Icon from './Icon.svelte';
+
+export default Icon;
+export { default as IconSkeleton } from './Icon.Skeleton.svelte';

src/index.js

@@ -11,6 +11,7 @@ import Form from './components/Form';
 import FormGroup from './components/FormGroup';
 import FormItem from './components/FormItem';
 import FormLabel from './components/FormLabel';
+import Icon, { IconSkeleton } from './components/Icon';
 import InlineLoading from './components/InlineLoading';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
@@ -84,6 +85,8 @@ export {
   FormItem,
   FormLabel,
   ExpandableTile,
+  Icon,
+  IconSkeleton,
   InlineLoading,
   InlineNotification,
   Link,