docs(Icon): Add Icon.vue MDX docs

Author: jackdomleo7

src/components/Icon/Icon.mdx

@@ -0,0 +1,24 @@
+import { Meta, Title, Story, Source, DocsStory } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+
+<Meta title="Components/Icon" of={IconStories} />
+
+<Title>Icon</Title>
+
+```ts
+import Icon from '@jackdomleo7/vue3-library/components/Icon/Icon.vue';
+```
+
+Render an inline SVG.
+
+## Decorative
+
+Render a decorative icon with no semantic meaning. This is useful for icons that are purely decorative and do not convey any information to the user.
+
+<DocsStory of={IconStories.Decorative} />
+
+## Informative
+
+Render an informative icon with semantic meaning. This is useful for icons that convey information to the user, such as a warning or error icon. This will render an `aria-label` attribute to describe the icon to assistive technologies.
+
+<DocsStory of={IconStories.Informative} />

src/components/Icon/Icon.stories.ts

@@ -4,7 +4,14 @@ import Icon from './Icon.vue';
 
 const meta = {
   title: 'Components/Icon',
-  component: Icon
+  component: Icon,
+  render: (args) => ({
+    components: { Icon },
+    setup() {
+      return { args };
+    },
+    template: '<Icon v-bind="args" style="max-width: 4rem;" />'
+  })
 } satisfies Meta<typeof Icon>;
 
 export default meta;
@@ -21,8 +28,8 @@ export const Decorative: Story = {
 export const Informative: Story = {
   args: {
     icon: {
-      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
-      label: 'ChevronRight'
+      src: new URL('@/docs/assets/ErrorExclamation.svg', import.meta.url).href,
+      label: 'Error'
     }
   }
 };