From 57a156e07961bd5c7948f2d8afeaaf1a34d0c882 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Mon, 27 May 2024 23:17:12 +0200
Subject: [PATCH 1/8] :sparkles: added muc-icon #95

---
 src/components/Icon/MucIcon.vue | 16 ++++++++++++++++
 src/components/Icon/index.ts    |  3 +++
 2 files changed, 19 insertions(+)
 create mode 100644 src/components/Icon/MucIcon.vue
 create mode 100644 src/components/Icon/index.ts

diff --git a/src/components/Icon/MucIcon.vue b/src/components/Icon/MucIcon.vue
new file mode 100644
index 00000000..e25507ba
--- /dev/null
+++ b/src/components/Icon/MucIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="m-button__icon"
+    :style="{ color: color }"
+  >
+    <use :xlink:href="'#icon-' + icon" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+  color?: string;
+}>();
+</script>
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
new file mode 100644
index 00000000..f1b8b80c
--- /dev/null
+++ b/src/components/Icon/index.ts
@@ -0,0 +1,3 @@
+import MucIcon from "./MucIcon.vue";
+
+export { MucIcon };

From 5fd8df757cf58a684469857ca982b5207dbdb6ca Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Mon, 27 May 2024 23:17:52 +0200
Subject: [PATCH 2/8] :memo: added muc-icon documentation #95

---
 src/components/Icon/MucIcon.stories.ts | 665 +++++++++++++++++++++++++
 1 file changed, 665 insertions(+)
 create mode 100644 src/components/Icon/MucIcon.stories.ts

diff --git a/src/components/Icon/MucIcon.stories.ts b/src/components/Icon/MucIcon.stories.ts
new file mode 100644
index 00000000..f2e65401
--- /dev/null
+++ b/src/components/Icon/MucIcon.stories.ts
@@ -0,0 +1,665 @@
+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)
+`,
+      },
+    },
+  },
+};
+
+export const Youtube = {
+  args: {
+    icon: "youtube",
+    color: "red",
+  },
+};
+
+export const Whatsapp = {
+  args: {
+    icon: "whatsapp",
+    color: "green",
+  },
+};
+
+export const Web = {
+  args: {
+    icon: "web",
+  },
+};
+
+export const Weather = {
+  args: {
+    icon: "weather",
+  },
+};
+
+export const Warning = {
+  args: {
+    icon: "warning",
+  },
+};
+
+export const VideoCamera = {
+  args: {
+    icon: "video-camera",
+  },
+};
+
+export const User = {
+  args: {
+    icon: "user",
+  },
+};
+
+export const UserGroup = {
+  args: {
+    icon: "user-group",
+  },
+};
+
+export const Upload = {
+  args: {
+    icon: "upload",
+  },
+};
+
+export const Unlock = {
+  args: {
+    icon: "unlock",
+  },
+};
+
+export const UnfollowUser = {
+  args: {
+    icon: "unfollow-user",
+  },
+};
+
+export const Twitter = {
+  args: {
+    icon: "twitter",
+  },
+};
+
+export const TwitterX = {
+  args: {
+    icon: "twitter-x",
+  },
+};
+
+export const Trash = {
+  args: {
+    icon: "trash",
+  },
+};
+
+export const Time = {
+  args: {
+    icon: "time",
+  },
+};
+
+export const Ticket = {
+  args: {
+    icon: "ticket",
+  },
+};
+
+export const Telephone = {
+  args: {
+    icon: "telephone",
+  },
+};
+
+export const Stopwatch = {
+  args: {
+    icon: "stopwatch",
+  },
+};
+
+export const Star = {
+  args: {
+    icon: "star",
+  },
+};
+
+export const Speaker = {
+  args: {
+    icon: "speaker",
+  },
+};
+
+export const SolidStar = {
+  args: {
+    icon: "solid-star",
+  },
+};
+
+export const SingIn = {
+  args: {
+    icon: "sing-in",
+  },
+};
+
+export const SignOut = {
+  args: {
+    icon: "sign-out",
+  },
+};
+
+export const SignLanguage = {
+  args: {
+    icon: "sign-language",
+  },
+};
+
+export const Shrink = {
+  args: {
+    icon: "shrink",
+  },
+};
+
+export const ShareIos = {
+  args: {
+    icon: "share-ios",
+  },
+};
+
+export const ShareAndorid = {
+  args: {
+    icon: "share-andorid",
+  },
+};
+
+export const Settings = {
+  args: {
+    icon: "settings",
+  },
+};
+
+export const Search = {
+  args: {
+    icon: "search",
+  },
+};
+
+export const Route = {
+  args: {
+    icon: "route",
+  },
+};
+
+export const RouteAlt = {
+  args: {
+    icon: "route-alt",
+  },
+};
+
+export const Privacy = {
+  args: {
+    icon: "privacy",
+  },
+};
+
+export const Plus = {
+  args: {
+    icon: "plus",
+  },
+};
+
+export const Play = {
+  args: {
+    icon: "play",
+  },
+};
+
+export const PlaySquare = {
+  args: {
+    icon: "play-square",
+  },
+};
+
+export const PlayCircle = {
+  args: {
+    icon: "play-circle",
+  },
+};
+
+export const Place = {
+  args: {
+    icon: "place",
+  },
+};
+
+export const Pause = {
+  args: {
+    icon: "pause",
+  },
+};
+
+export const Movie = {
+  args: {
+    icon: "movie",
+  },
+};
+
+export const Minus = {
+  args: {
+    icon: "minus",
+  },
+};
+
+export const Menu = {
+  args: {
+    icon: "menu",
+  },
+};
+
+export const Mde_iconParking = {
+  args: {
+    icon: "mde_icon-parking",
+  },
+};
+
+export const Map = {
+  args: {
+    icon: "map",
+  },
+};
+
+export const MapPin = {
+  args: {
+    icon: "map-pin",
+  },
+};
+
+export const Mail = {
+  args: {
+    icon: "mail",
+  },
+};
+
+export const Lock = {
+  args: {
+    icon: "lock",
+  },
+};
+
+export const LocationIos = {
+  args: {
+    icon: "location-ios",
+  },
+};
+
+export const LocationAndroid = {
+  args: {
+    icon: "location-android",
+  },
+};
+
+export const List = {
+  args: {
+    icon: "list",
+  },
+};
+
+export const Language = {
+  args: {
+    icon: "language",
+  },
+};
+
+export const Instagram = {
+  args: {
+    icon: "instagram",
+  },
+};
+
+export const Information = {
+  args: {
+    icon: "information",
+  },
+};
+
+export const ImageGallery = {
+  args: {
+    icon: "image-gallery",
+  },
+};
+
+export const Hourglass = {
+  args: {
+    icon: "hourglass",
+  },
+};
+
+export const HourglassStart = {
+  args: {
+    icon: "hourglass-start",
+  },
+};
+
+export const HourglassSolid = {
+  args: {
+    icon: "hourglass-solid",
+  },
+};
+
+export const HourglassEnd = {
+  args: {
+    icon: "hourglass-end",
+  },
+};
+
+export const Home = {
+  args: {
+    icon: "home",
+  },
+};
+
+export const Heart = {
+  args: {
+    icon: "heart",
+  },
+};
+
+export const HalfStar = {
+  args: {
+    icon: "half-star",
+  },
+};
+
+export const Fsk6 = {
+  args: {
+    icon: "fsk-6",
+  },
+};
+
+export const Fsk18 = {
+  args: {
+    icon: "fsk-18",
+  },
+};
+
+export const Fsk16 = {
+  args: {
+    icon: "fsk-16",
+  },
+};
+
+export const Fsk12 = {
+  args: {
+    icon: "fsk-12",
+  },
+};
+
+export const Fsk0 = {
+  args: {
+    icon: "fsk-0",
+  },
+};
+
+export const FollowUser = {
+  args: {
+    icon: "follow-user",
+  },
+};
+
+export const Floppy = {
+  args: {
+    icon: "floppy",
+  },
+};
+
+export const Filter = {
+  args: {
+    icon: "filter",
+  },
+};
+
+export const File = {
+  args: {
+    icon: "file",
+  },
+};
+
+export const Facebook = {
+  args: {
+    icon: "facebook",
+  },
+};
+
+export const Eye = {
+  args: {
+    icon: "eye",
+  },
+};
+
+export const EyeOff = {
+  args: {
+    icon: "eye-off",
+  },
+};
+
+export const ExtLink = {
+  args: {
+    icon: "ext-link",
+  },
+};
+
+export const Expand = {
+  args: {
+    icon: "expand",
+  },
+};
+
+export const EllipsisVertical = {
+  args: {
+    icon: "ellipsis-vertical",
+  },
+};
+
+export const EllipsisHorizontal = {
+  args: {
+    icon: "ellipsis-horizontal",
+  },
+};
+
+export const EasyToRead = {
+  args: {
+    icon: "easy-to-read",
+  },
+};
+
+export const Download = {
+  args: {
+    icon: "download",
+  },
+};
+
+export const DoubleUp = {
+  args: {
+    icon: "double-up",
+  },
+};
+
+export const DoubleRight = {
+  args: {
+    icon: "double-right",
+  },
+};
+
+export const DoubleLeft = {
+  args: {
+    icon: "double-left",
+  },
+};
+
+export const DoubleDown = {
+  args: {
+    icon: "double-down",
+  },
+};
+
+export const DeskBell = {
+  args: {
+    icon: "desk-bell",
+  },
+};
+
+export const CopyLink = {
+  args: {
+    icon: "copy-link",
+  },
+};
+
+export const Close = {
+  args: {
+    icon: "close",
+  },
+};
+
+export const ChevronUp = {
+  args: {
+    icon: "chevron-up",
+  },
+};
+
+export const ChevronRight = {
+  args: {
+    icon: "chevron-right",
+  },
+};
+
+export const ChevronLeft = {
+  args: {
+    icon: "chevron-left",
+  },
+};
+
+export const ChevronDown = {
+  args: {
+    icon: "chevron-down",
+  },
+};
+
+export const Check = {
+  args: {
+    icon: "check",
+  },
+};
+
+export const Camera = {
+  args: {
+    icon: "camera",
+  },
+};
+
+export const Calendar = {
+  args: {
+    icon: "calendar",
+  },
+};
+
+export const CalendarWeekend = {
+  args: {
+    icon: "calendar-weekend",
+  },
+};
+
+export const CalendarWeek = {
+  args: {
+    icon: "calendar-week",
+  },
+};
+
+export const CalendarUp = {
+  args: {
+    icon: "calendar-up",
+  },
+};
+
+export const CalendarRight = {
+  args: {
+    icon: "calendar-right",
+  },
+};
+
+export const CalendarLeft = {
+  args: {
+    icon: "calendar-left",
+  },
+};
+
+export const CalendarDown = {
+  args: {
+    icon: "calendar-down",
+  },
+};
+
+export const CalendarDay = {
+  args: {
+    icon: "calendar-day",
+  },
+};
+
+export const Bullet = {
+  args: {
+    icon: "bullet",
+  },
+};
+
+export const Battery = {
+  args: {
+    icon: "battery",
+  },
+};
+
+export const ArrowUp = {
+  args: {
+    icon: "arrow-up",
+  },
+};
+
+export const ArrowRight = {
+  args: {
+    icon: "arrow-right",
+  },
+};
+
+export const ArrowLeft = {
+  args: {
+    icon: "arrow-left",
+  },
+};
+
+export const ArrowDown = {
+  args: {
+    icon: "arrow-down",
+  },
+};
+
+export const Accessibility = {
+  args: {
+    icon: "accessibility",
+  },
+};
+
+export const AccessibilityAlt = {
+  args: {
+    icon: "accessibility-alt",
+  },
+};

From 7d9ce1f411975bbfac094576609192a301285914 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Mon, 27 May 2024 23:18:35 +0200
Subject: [PATCH 3/8] :memo: added muc-icon export #95

---
 src/components/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/index.ts b/src/components/index.ts
index c7e0f683..de7fe526 100644
--- a/src/components/index.ts
+++ b/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,
 };

From 685fae0b3dfcfe24f5d36b0d21c8c944451dc0bb Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Tue, 28 May 2024 00:25:41 +0200
Subject: [PATCH 4/8] :memo: added documentation for props #95

---
 src/components/Icon/MucIcon.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Icon/MucIcon.vue b/src/components/Icon/MucIcon.vue
index e25507ba..ce4af29f 100644
--- a/src/components/Icon/MucIcon.vue
+++ b/src/components/Icon/MucIcon.vue
@@ -10,7 +10,14 @@
 
 <script setup lang="ts">
 defineProps<{
+  /**
+   * String of the icon to be displayed.
+   */
   icon: string;
+
+  /**
+   * Optional color string for the icon.
+   */
   color?: string;
 }>();
 </script>

From dbe39b6b6fc2047ea79286ff2cd451bd26854e90 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Wed, 29 May 2024 21:25:07 +0200
Subject: [PATCH 5/8] :art: removed all icons except two #61

---
 src/components/Icon/MucIcon.stories.ts | 637 +------------------------
 1 file changed, 3 insertions(+), 634 deletions(-)

diff --git a/src/components/Icon/MucIcon.stories.ts b/src/components/Icon/MucIcon.stories.ts
index f2e65401..1ea5f7db 100644
--- a/src/components/Icon/MucIcon.stories.ts
+++ b/src/components/Icon/MucIcon.stories.ts
@@ -20,646 +20,15 @@ export default {
   },
 };
 
-export const Youtube = {
-  args: {
-    icon: "youtube",
-    color: "red",
-  },
-};
-
-export const Whatsapp = {
-  args: {
-    icon: "whatsapp",
-    color: "green",
-  },
-};
-
-export const Web = {
-  args: {
-    icon: "web",
-  },
-};
-
 export const Weather = {
   args: {
     icon: "weather",
   },
 };
 
-export const Warning = {
-  args: {
-    icon: "warning",
-  },
-};
-
-export const VideoCamera = {
-  args: {
-    icon: "video-camera",
-  },
-};
-
-export const User = {
-  args: {
-    icon: "user",
-  },
-};
-
-export const UserGroup = {
-  args: {
-    icon: "user-group",
-  },
-};
-
-export const Upload = {
-  args: {
-    icon: "upload",
-  },
-};
-
-export const Unlock = {
-  args: {
-    icon: "unlock",
-  },
-};
-
-export const UnfollowUser = {
-  args: {
-    icon: "unfollow-user",
-  },
-};
-
-export const Twitter = {
-  args: {
-    icon: "twitter",
-  },
-};
-
-export const TwitterX = {
-  args: {
-    icon: "twitter-x",
-  },
-};
-
-export const Trash = {
-  args: {
-    icon: "trash",
-  },
-};
-
-export const Time = {
-  args: {
-    icon: "time",
-  },
-};
-
-export const Ticket = {
-  args: {
-    icon: "ticket",
-  },
-};
-
-export const Telephone = {
-  args: {
-    icon: "telephone",
-  },
-};
-
-export const Stopwatch = {
-  args: {
-    icon: "stopwatch",
-  },
-};
-
-export const Star = {
-  args: {
-    icon: "star",
-  },
-};
-
-export const Speaker = {
-  args: {
-    icon: "speaker",
-  },
-};
-
-export const SolidStar = {
-  args: {
-    icon: "solid-star",
-  },
-};
-
-export const SingIn = {
-  args: {
-    icon: "sing-in",
-  },
-};
-
-export const SignOut = {
-  args: {
-    icon: "sign-out",
-  },
-};
-
-export const SignLanguage = {
-  args: {
-    icon: "sign-language",
-  },
-};
-
-export const Shrink = {
-  args: {
-    icon: "shrink",
-  },
-};
-
-export const ShareIos = {
-  args: {
-    icon: "share-ios",
-  },
-};
-
-export const ShareAndorid = {
-  args: {
-    icon: "share-andorid",
-  },
-};
-
-export const Settings = {
-  args: {
-    icon: "settings",
-  },
-};
-
-export const Search = {
-  args: {
-    icon: "search",
-  },
-};
-
-export const Route = {
-  args: {
-    icon: "route",
-  },
-};
-
-export const RouteAlt = {
-  args: {
-    icon: "route-alt",
-  },
-};
-
-export const Privacy = {
-  args: {
-    icon: "privacy",
-  },
-};
-
-export const Plus = {
-  args: {
-    icon: "plus",
-  },
-};
-
-export const Play = {
-  args: {
-    icon: "play",
-  },
-};
-
-export const PlaySquare = {
-  args: {
-    icon: "play-square",
-  },
-};
-
-export const PlayCircle = {
-  args: {
-    icon: "play-circle",
-  },
-};
-
-export const Place = {
-  args: {
-    icon: "place",
-  },
-};
-
-export const Pause = {
-  args: {
-    icon: "pause",
-  },
-};
-
-export const Movie = {
-  args: {
-    icon: "movie",
-  },
-};
-
-export const Minus = {
-  args: {
-    icon: "minus",
-  },
-};
-
-export const Menu = {
-  args: {
-    icon: "menu",
-  },
-};
-
-export const Mde_iconParking = {
-  args: {
-    icon: "mde_icon-parking",
-  },
-};
-
-export const Map = {
-  args: {
-    icon: "map",
-  },
-};
-
-export const MapPin = {
-  args: {
-    icon: "map-pin",
-  },
-};
-
-export const Mail = {
-  args: {
-    icon: "mail",
-  },
-};
-
-export const Lock = {
-  args: {
-    icon: "lock",
-  },
-};
-
-export const LocationIos = {
-  args: {
-    icon: "location-ios",
-  },
-};
-
-export const LocationAndroid = {
-  args: {
-    icon: "location-android",
-  },
-};
-
-export const List = {
-  args: {
-    icon: "list",
-  },
-};
-
-export const Language = {
-  args: {
-    icon: "language",
-  },
-};
-
-export const Instagram = {
-  args: {
-    icon: "instagram",
-  },
-};
-
-export const Information = {
-  args: {
-    icon: "information",
-  },
-};
-
-export const ImageGallery = {
-  args: {
-    icon: "image-gallery",
-  },
-};
-
-export const Hourglass = {
-  args: {
-    icon: "hourglass",
-  },
-};
-
-export const HourglassStart = {
-  args: {
-    icon: "hourglass-start",
-  },
-};
-
-export const HourglassSolid = {
-  args: {
-    icon: "hourglass-solid",
-  },
-};
-
-export const HourglassEnd = {
-  args: {
-    icon: "hourglass-end",
-  },
-};
-
-export const Home = {
-  args: {
-    icon: "home",
-  },
-};
-
-export const Heart = {
-  args: {
-    icon: "heart",
-  },
-};
-
-export const HalfStar = {
-  args: {
-    icon: "half-star",
-  },
-};
-
-export const Fsk6 = {
-  args: {
-    icon: "fsk-6",
-  },
-};
-
-export const Fsk18 = {
-  args: {
-    icon: "fsk-18",
-  },
-};
-
-export const Fsk16 = {
-  args: {
-    icon: "fsk-16",
-  },
-};
-
-export const Fsk12 = {
-  args: {
-    icon: "fsk-12",
-  },
-};
-
-export const Fsk0 = {
-  args: {
-    icon: "fsk-0",
-  },
-};
-
-export const FollowUser = {
-  args: {
-    icon: "follow-user",
-  },
-};
-
-export const Floppy = {
-  args: {
-    icon: "floppy",
-  },
-};
-
-export const Filter = {
-  args: {
-    icon: "filter",
-  },
-};
-
-export const File = {
-  args: {
-    icon: "file",
-  },
-};
-
-export const Facebook = {
-  args: {
-    icon: "facebook",
-  },
-};
-
-export const Eye = {
-  args: {
-    icon: "eye",
-  },
-};
-
-export const EyeOff = {
-  args: {
-    icon: "eye-off",
-  },
-};
-
-export const ExtLink = {
-  args: {
-    icon: "ext-link",
-  },
-};
-
-export const Expand = {
-  args: {
-    icon: "expand",
-  },
-};
-
-export const EllipsisVertical = {
-  args: {
-    icon: "ellipsis-vertical",
-  },
-};
-
-export const EllipsisHorizontal = {
-  args: {
-    icon: "ellipsis-horizontal",
-  },
-};
-
-export const EasyToRead = {
-  args: {
-    icon: "easy-to-read",
-  },
-};
-
-export const Download = {
-  args: {
-    icon: "download",
-  },
-};
-
-export const DoubleUp = {
-  args: {
-    icon: "double-up",
-  },
-};
-
-export const DoubleRight = {
-  args: {
-    icon: "double-right",
-  },
-};
-
-export const DoubleLeft = {
-  args: {
-    icon: "double-left",
-  },
-};
-
-export const DoubleDown = {
-  args: {
-    icon: "double-down",
-  },
-};
-
-export const DeskBell = {
-  args: {
-    icon: "desk-bell",
-  },
-};
-
-export const CopyLink = {
-  args: {
-    icon: "copy-link",
-  },
-};
-
-export const Close = {
-  args: {
-    icon: "close",
-  },
-};
-
-export const ChevronUp = {
-  args: {
-    icon: "chevron-up",
-  },
-};
-
-export const ChevronRight = {
-  args: {
-    icon: "chevron-right",
-  },
-};
-
-export const ChevronLeft = {
-  args: {
-    icon: "chevron-left",
-  },
-};
-
-export const ChevronDown = {
-  args: {
-    icon: "chevron-down",
-  },
-};
-
-export const Check = {
-  args: {
-    icon: "check",
-  },
-};
-
-export const Camera = {
-  args: {
-    icon: "camera",
-  },
-};
-
-export const Calendar = {
-  args: {
-    icon: "calendar",
-  },
-};
-
-export const CalendarWeekend = {
-  args: {
-    icon: "calendar-weekend",
-  },
-};
-
-export const CalendarWeek = {
-  args: {
-    icon: "calendar-week",
-  },
-};
-
-export const CalendarUp = {
-  args: {
-    icon: "calendar-up",
-  },
-};
-
-export const CalendarRight = {
-  args: {
-    icon: "calendar-right",
-  },
-};
-
-export const CalendarLeft = {
-  args: {
-    icon: "calendar-left",
-  },
-};
-
-export const CalendarDown = {
-  args: {
-    icon: "calendar-down",
-  },
-};
-
-export const CalendarDay = {
-  args: {
-    icon: "calendar-day",
-  },
-};
-
-export const Bullet = {
-  args: {
-    icon: "bullet",
-  },
-};
-
-export const Battery = {
-  args: {
-    icon: "battery",
-  },
-};
-
-export const ArrowUp = {
-  args: {
-    icon: "arrow-up",
-  },
-};
-
-export const ArrowRight = {
-  args: {
-    icon: "arrow-right",
-  },
-};
-
-export const ArrowLeft = {
-  args: {
-    icon: "arrow-left",
-  },
-};
-
-export const ArrowDown = {
-  args: {
-    icon: "arrow-down",
-  },
-};
-
-export const Accessibility = {
-  args: {
-    icon: "accessibility",
-  },
-};
-
-export const AccessibilityAlt = {
+export const Youtube = {
   args: {
-    icon: "accessibility-alt",
+    icon: "youtube",
+    color: "red",
   },
 };

From 0e7754cbf125a04b4c31497ff89d1d6f9f028f49 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Fri, 31 May 2024 09:39:26 +0200
Subject: [PATCH 6/8] Update src/components/Icon/MucIcon.vue

Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>
---
 src/components/Icon/MucIcon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/MucIcon.vue b/src/components/Icon/MucIcon.vue
index ce4af29f..207541c2 100644
--- a/src/components/Icon/MucIcon.vue
+++ b/src/components/Icon/MucIcon.vue
@@ -16,7 +16,7 @@ defineProps<{
   icon: string;
 
   /**
-   * Optional color string for the icon.
+   * Optional css-color for the icon.
    */
   color?: string;
 }>();

From 48d29af94c41c685c94900245e2a0b8bc1a150e3 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Fri, 31 May 2024 09:39:35 +0200
Subject: [PATCH 7/8] Update src/components/Icon/MucIcon.stories.ts

Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>
---
 src/components/Icon/MucIcon.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Icon/MucIcon.stories.ts b/src/components/Icon/MucIcon.stories.ts
index 1ea5f7db..4766a5c6 100644
--- a/src/components/Icon/MucIcon.stories.ts
+++ b/src/components/Icon/MucIcon.stories.ts
@@ -14,6 +14,7 @@ export default {
         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)
 `,
       },
     },

From 30ca279976041790c6688edea3d106348dac0ee0 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Fri, 31 May 2024 09:39:44 +0200
Subject: [PATCH 8/8] Update src/components/Icon/MucIcon.vue

Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>
---
 src/components/Icon/MucIcon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/MucIcon.vue b/src/components/Icon/MucIcon.vue
index 207541c2..d607e631 100644
--- a/src/components/Icon/MucIcon.vue
+++ b/src/components/Icon/MucIcon.vue
@@ -4,7 +4,7 @@
     class="m-button__icon"
     :style="{ color: color }"
   >
-    <use :xlink:href="'#icon-' + icon" />
+    <use :href="'#icon-' + icon" />
   </svg>
 </template>