✨ 95 build a wrapper component for icons (#97)

Author: langehm

src/components/Icon/MucIcon.stories.ts

@@ -0,0 +1,35 @@
+import { fn } from "@storybook/test";
+
+import MucIcon from "./MucIcon.vue";
+
+export default {
+  component: MucIcon,
+  title: "MucIcon",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-icon\` component is a wrapper commponent for all icons in the patternlab.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-guidelines-icons)
+[🖼 Iconography](https://it-at-m.github.io/muc-patternlab-vue/?path=/docs/iconography--docs)
+`,
+      },
+    },
+  },
+};
+
+export const Weather = {
+  args: {
+    icon: "weather",
+  },
+};
+
+export const Youtube = {
+  args: {
+    icon: "youtube",
+    color: "red",
+  },
+};

src/components/Icon/MucIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="m-button__icon"
+    :style="{ color: color }"
+  >
+    <use :href="'#icon-' + icon" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  /**
+   * String of the icon to be displayed.
+   */
+  icon: string;
+
+  /**
+   * Optional css-color for the icon.
+   */
+  color?: string;
+}>();
+</script>

src/components/Icon/index.ts

@@ -0,0 +1,3 @@
+import MucIcon from "./MucIcon.vue";
+
+export { MucIcon };

src/components/index.ts

@@ -3,6 +3,7 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
+import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
 
 export {
@@ -14,4 +15,5 @@ export {
   MucCardContainer,
   MucComment,
   MucCommentText,
+  MucIcon,
 };