@muenchen/muc-patternlab-vue 1.8.0-beta.7 → 1.8.0-beta.8

package/dist/components/Icon/MucIcon.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        icon: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+        };
+    }>>, {}, {}>;
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import('@vitest/spy').Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Weather: {
+    args: {
+        icon: string;
+    };
+};
+export declare const Youtube: {
+    args: {
+        icon: string;
+        color: string;
+    };
+};

package/dist/components/Icon/MucIcon.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/Icon/index.d.ts

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

package/dist/components/index.d.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 { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucIcon, };

package/dist/muc-patternlab-vue.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as h, computed as d, openBlock as o, createElementBlock as i, createElementVNode as t, normalizeClass as b, renderSlot as c, createCommentVNode as g, toDisplayString as _, pushScopeId as I, popScopeId as B, useSlots as A, createTextVNode as m, Fragment as M, renderList as S, createBlock as O, unref as R, createSlots as T, withCtx as f } from "vue";
-const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PURE__ */ t("svg", { class: "icon" }, [
+import { defineComponent as m, computed as u, openBlock as o, createElementBlock as i, createElementVNode as t, normalizeClass as b, renderSlot as c, createCommentVNode as g, toDisplayString as _, pushScopeId as E, popScopeId as B, useSlots as A, createTextVNode as h, Fragment as M, renderList as S, createBlock as O, unref as R, createSlots as T, withCtx as f, normalizeStyle as L } from "vue";
+const P = ["role", "aria-label"], D = { class: "container-fluid" }, H = /* @__PURE__ */ t("svg", { class: "icon" }, [
   /* @__PURE__ */ t("use", { href: "#icon-information" })
-], -1), H = /* @__PURE__ */ h({
+], -1), j = /* @__PURE__ */ m({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
   },
   setup(a) {
-    const e = a, s = d(() => {
+    const e = a, s = u(() => {
       switch (e.type) {
         case "info":
           return "m-banner--info";
@@ -18,7 +18,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
         default:
           return "m-banner--info";
       }
-    }), n = d(() => {
+    }), n = u(() => {
       switch (e.type) {
         case "info":
           return "dialog";
@@ -29,7 +29,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
         default:
           return "dialog";
       }
-    }), l = d(() => {
+    }), l = u(() => {
       switch (e.type) {
         case "info":
           return "Information";
@@ -41,28 +41,28 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
           return "Information";
       }
     });
-    return (u, p) => (o(), i("div", null, [
+    return (d, p) => (o(), i("div", null, [
       t("div", null, [
         t("div", {
           class: b(["m-banner", s.value]),
           role: n.value,
           "aria-label": l.value
         }, [
-          t("div", P, [
-            D,
+          t("div", D, [
+            H,
             t("p", null, [
-              c(u.$slots, "default")
+              c(d.$slots, "default")
             ])
           ])
-        ], 10, L)
+        ], 10, P)
       ])
     ]));
   }
-}), j = ["disabled"], N = {
+}), N = ["disabled"], V = {
   key: 0,
   "aria-hidden": "true",
   class: "m-button__icon"
-}, V = ["xlink:href"], W = /* @__PURE__ */ h({
+}, W = ["xlink:href"], z = /* @__PURE__ */ m({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -72,7 +72,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
   },
   emits: ["click"],
   setup(a, { emit: e }) {
-    const s = a, n = e, l = d(() => {
+    const s = a, n = e, l = u(() => {
       switch (s.variant) {
         case "secondary":
           return "m-button--secondary";
@@ -81,34 +81,34 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
         default:
           return "m-button--primary";
       }
-    }), u = d(() => s.iconAnimated ? "m-button--animated-right" : ""), p = () => {
+    }), d = u(() => s.iconAnimated ? "m-button--animated-right" : ""), p = () => {
       n("click");
     };
     return (r, $) => (o(), i("button", {
       onClick: p,
       disabled: r.disabled,
-      class: b(["m-button", [l.value, u.value]])
+      class: b(["m-button", [l.value, d.value]])
     }, [
       t("span", null, [
         c(r.$slots, "default"),
-        r.icon ? (o(), i("svg", N, [
+        r.icon ? (o(), i("svg", V, [
           t("use", {
             "xlink:href": "#icon-" + r.icon
-          }, null, 8, V)
+          }, null, 8, W)
         ])) : g("", !0)
       ])
-    ], 10, j));
+    ], 10, N));
   }
-}), F = ["aria-label"], x = { class: "m-callout__inner" }, z = { class: "m-callout__icon" }, U = {
+}), F = ["aria-label"], U = { class: "m-callout__inner" }, x = { class: "m-callout__icon" }, X = {
   "aria-hidden": "true",
   class: "icon"
-}, X = ["xlink:href"], q = { class: "m-callout__body" }, G = { class: "m-callout__body__inner" }, J = { class: "m-callout__headline" }, K = { class: "m-callout__content" }, Q = /* @__PURE__ */ h({
+}, q = ["xlink:href"], G = { class: "m-callout__body" }, J = { class: "m-callout__body__inner" }, K = { class: "m-callout__headline" }, Q = { class: "m-callout__content" }, Y = /* @__PURE__ */ m({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
   setup(a) {
-    const e = a, s = d(() => {
+    const e = a, s = u(() => {
       switch (e.type) {
         case "error":
           return "warning";
@@ -117,7 +117,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
         default:
           return "information";
       }
-    }), n = d(() => {
+    }), n = u(() => {
       switch (e.type) {
         case "error":
           return "m-callout--error";
@@ -128,7 +128,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
         default:
           return "m-callout--default";
       }
-    }), l = d(() => {
+    }), l = u(() => {
       switch (e.type) {
         case "success":
           return "Erfolgreich";
@@ -140,28 +140,28 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
           return "Information";
       }
     });
-    return (u, p) => (o(), i("div", {
+    return (d, p) => (o(), i("div", {
       class: b(["m-callout", n.value]),
       "aria-label": l.value
     }, [
-      t("div", x, [
-        t("div", z, [
-          c(u.$slots, "icon", {}, () => [
-            (o(), i("svg", U, [
+      t("div", U, [
+        t("div", x, [
+          c(d.$slots, "icon", {}, () => [
+            (o(), i("svg", X, [
               t("use", {
                 "xlink:href": `#icon-${s.value}`
-              }, null, 8, X)
+              }, null, 8, q)
             ]))
           ], !0)
         ]),
-        t("div", q, [
-          t("div", G, [
-            t("div", J, [
-              c(u.$slots, "header", {}, void 0, !0)
-            ]),
+        t("div", G, [
+          t("div", J, [
             t("div", K, [
+              c(d.$slots, "header", {}, void 0, !0)
+            ]),
+            t("div", Q, [
               t("p", null, [
-                c(u.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+                c(d.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
@@ -174,10 +174,10 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
   for (const [n, l] of e)
     s[n] = l;
   return s;
-}, Y = /* @__PURE__ */ k(Q, [["__scopeId", "data-v-efad4956"]]), Z = (a) => (I("data-v-acf0a1dd"), a = a(), B(), a), tt = { class: "card-content" }, et = { class: "card-header" }, nt = {
+}, Z = /* @__PURE__ */ k(Y, [["__scopeId", "data-v-efad4956"]]), tt = (a) => (E("data-v-acf0a1dd"), a = a(), B(), a), et = { class: "card-content" }, nt = { class: "card-header" }, st = {
   key: 0,
   class: "card-tagline"
-}, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ h({
+}, at = /* @__PURE__ */ tt(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), ot = /* @__PURE__ */ m({
   __name: "MucCard",
   props: {
     title: {},
@@ -188,67 +188,67 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
     const s = e;
     return (n, l) => (o(), i("div", {
       class: "card",
-      onClick: l[0] || (l[0] = (u) => s("click", u))
+      onClick: l[0] || (l[0] = (d) => s("click", d))
     }, [
-      t("div", tt, [
-        t("div", et, [
+      t("div", et, [
+        t("div", nt, [
           c(n.$slots, "headerPrefix", {}, void 0, !0),
           t("div", null, [
-            n.tagline ? (o(), i("div", nt, _(n.tagline), 1)) : g("", !0),
+            n.tagline ? (o(), i("div", st, _(n.tagline), 1)) : g("", !0),
             t("div", null, [
               t("h3", null, _(n.title), 1)
             ])
           ])
         ]),
-        st,
+        at,
         c(n.$slots, "content", {}, void 0, !0)
       ])
     ]));
   }
-}), ot = /* @__PURE__ */ k(at, [["__scopeId", "data-v-acf0a1dd"]]), it = { class: "container card-container" }, rt = /* @__PURE__ */ h({
+}), it = /* @__PURE__ */ k(ot, [["__scopeId", "data-v-acf0a1dd"]]), rt = { class: "container card-container" }, ct = /* @__PURE__ */ m({
   __name: "MucCardContainer",
   setup(a) {
-    return (e, s) => (o(), i("div", it, [
+    return (e, s) => (o(), i("div", rt, [
       c(e.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), ct = /* @__PURE__ */ k(rt, [["__scopeId", "data-v-6740df8f"]]), lt = { class: "m-comment__head" }, dt = { class: "m-comment__initials" }, ut = { class: "m-comment__info" }, _t = { class: "m-comment__author" }, mt = { key: 0 }, ht = { class: "m-comment__author" }, pt = { class: "m-comment__date" }, vt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
+}), lt = /* @__PURE__ */ k(ct, [["__scopeId", "data-v-6740df8f"]]), ut = { class: "m-comment__head" }, dt = { class: "m-comment__initials" }, _t = { class: "m-comment__info" }, mt = { class: "m-comment__author" }, ht = { key: 0 }, pt = { class: "m-comment__author" }, vt = { class: "m-comment__date" }, ft = ["aria-label"], gt = /* @__PURE__ */ t("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
   /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
-], -1), gt = [
-  ft
-], $t = {
+], -1), $t = [
+  gt
+], yt = {
   key: 0,
   class: "m-star-rating__item m-star-rating__item--half"
-}, yt = /* @__PURE__ */ t("svg", {
+}, bt = /* @__PURE__ */ t("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
   /* @__PURE__ */ t("use", { "xlink:href": "#icon-half-star" })
-], -1), bt = [
-  yt
-], kt = /* @__PURE__ */ t("svg", {
+], -1), kt = [
+  bt
+], Ct = /* @__PURE__ */ t("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
   /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
-], -1), Ct = [
-  kt
-], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, Et = { class: "m-comment__text" }, It = "de-DE", Bt = 0.2, At = 0.8, y = 5, E = /* @__PURE__ */ h({
+], -1), Mt = [
+  Ct
+], St = { class: "m-star-rating__numeric" }, wt = { class: "m-comment__body" }, It = { class: "m-comment__headline" }, Et = { class: "m-comment__text" }, Bt = "de-DE", At = 0.2, Ot = 0.8, y = 5, I = /* @__PURE__ */ m({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
   setup(a) {
-    const e = A(), s = a, n = d(() => !!e.date), l = d(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), u = d(() => s.rating.toLocaleString(It.valueOf(), {
+    const e = A(), s = a, n = u(() => !!e.date), l = u(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), d = u(() => s.rating.toLocaleString(Bt.valueOf(), {
       minimumFractionDigits: 1
-    })), p = d(() => {
+    })), p = u(() => {
       const r = +(s.rating % 1).toFixed(1);
       let $ = Math.min(Math.floor(s.rating), y), v = Math.floor(y - s.rating), C = !1;
-      return s.rating !== 0 && s.rating !== y && (r <= Bt ? v++ : r >= At ? $++ : C = !0), {
+      return s.rating !== 0 && s.rating !== y && (r <= At ? v++ : r >= Ot ? $++ : C = !0), {
         fullStars: $,
         emptyStars: v,
         isHalfStar: C
@@ -257,21 +257,21 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
     return (r, $) => (o(), i("div", {
       class: b(["m-comment", l.value])
     }, [
-      t("div", lt, [
+      t("div", ut, [
         t("div", dt, [
           c(r.$slots, "initials")
         ]),
-        t("div", ut, [
-          t("span", _t, [
+        t("div", _t, [
+          t("span", mt, [
             c(r.$slots, "author")
           ]),
-          n.value ? (o(), i("span", mt, [
-            t("span", ht, [
-              m(" "),
+          n.value ? (o(), i("span", ht, [
+            t("span", pt, [
+              h(" "),
               c(r.$slots, "datePrefix")
             ]),
-            t("span", pt, [
-              m(" "),
+            t("span", vt, [
+              h(" "),
               c(r.$slots, "date")
             ])
           ])) : g("", !0),
@@ -283,18 +283,18 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
             (o(!0), i(M, null, S(p.value.fullStars, (v) => (o(), i("div", {
               key: v,
               class: "m-star-rating__item m-star-rating__item--full"
-            }, gt))), 128)),
-            p.value.isHalfStar ? (o(), i("div", $t, bt)) : g("", !0),
+            }, $t))), 128)),
+            p.value.isHalfStar ? (o(), i("div", yt, kt)) : g("", !0),
             (o(!0), i(M, null, S(p.value.emptyStars, (v) => (o(), i("div", {
               key: v,
               class: "m-star-rating__item"
-            }, Ct))), 128)),
-            t("div", Mt, _(u.value), 1)
-          ], 8, vt)
+            }, Mt))), 128)),
+            t("div", St, _(d.value), 1)
+          ], 8, ft)
         ])
       ]),
-      t("div", St, [
-        t("div", wt, [
+      t("div", wt, [
+        t("div", It, [
           c(r.$slots, "headline")
         ]),
         t("div", Et, [
@@ -303,7 +303,7 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
       ])
     ], 2));
   }
-}), Ot = " ", Rt = /* @__PURE__ */ h({
+}), Rt = " ", Tt = /* @__PURE__ */ m({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -316,47 +316,64 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
     variant: { default: "listing" }
   },
   setup(a) {
-    const e = a, s = d(() => ((e.initials ?? e.author.split(Ot).map((n) => n.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
-    return (n, l) => (o(), O(R(E), {
+    const e = a, s = u(() => ((e.initials ?? e.author.split(Rt).map((n) => n.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
+    return (n, l) => (o(), O(R(I), {
       rating: n.rating,
       variant: n.variant
     }, T({
       initials: f(() => [
-        m(_(s.value), 1)
+        h(_(s.value), 1)
       ]),
       datePrefix: f(() => [
-        m("am")
+        h("am")
       ]),
       author: f(() => [
-        m(_(n.author), 1)
+        h(_(n.author), 1)
       ]),
       headline: f(() => [
-        m(_(n.headline), 1)
+        h(_(n.headline), 1)
       ]),
       text: f(() => [
-        m(_(n.text), 1)
+        h(_(n.text), 1)
       ]),
       _: 2
     }, [
       n.date ? {
         name: "date",
         fn: f(() => [
-          m(_(n.date), 1)
+          h(_(n.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Tt = {
+}), Lt = ["href"], Pt = /* @__PURE__ */ m({
+  __name: "MucIcon",
+  props: {
+    icon: {},
+    color: {}
+  },
+  setup(a) {
+    return (e, s) => (o(), i("svg", {
+      "aria-hidden": "true",
+      class: "m-button__icon",
+      style: L({ color: e.color })
+    }, [
+      t("use", {
+        href: "#icon-" + e.icon
+      }, null, 8, Lt)
+    ], 4));
+  }
+}), Dt = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, Lt = { class: "container" }, Pt = { style: { width: "66.6%" } }, Dt = {
+}, Ht = { class: "container" }, jt = { style: { width: "66.6%" } }, Nt = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, Ht = { class: "m-intro-vertical__title" }, jt = {
+}, Vt = { class: "m-intro-vertical__title" }, Wt = {
   key: 0,
   class: "muc-divider"
-}, Nt = { class: "m-intro-vertical__content" }, Vt = { style: { "padding-bottom": "32px" } }, Wt = /* @__PURE__ */ h({
+}, zt = { class: "m-intro-vertical__content" }, Ft = { style: { "padding-bottom": "32px" } }, Ut = /* @__PURE__ */ m({
   __name: "MucIntro",
   props: {
     title: {},
@@ -364,16 +381,16 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
     divider: { type: Boolean }
   },
   setup(a) {
-    return (e, s) => (o(), i("div", Tt, [
-      t("div", Lt, [
-        t("div", Pt, [
+    return (e, s) => (o(), i("div", Dt, [
+      t("div", Ht, [
+        t("div", jt, [
           t("div", null, [
-            e.tagline ? (o(), i("p", Dt, _(e.tagline), 1)) : g("", !0),
-            t("h1", Ht, _(e.title), 1)
+            e.tagline ? (o(), i("p", Nt, _(e.tagline), 1)) : g("", !0),
+            t("h1", Vt, _(e.title), 1)
           ]),
-          e.divider ? (o(), i("div", jt)) : g("", !0),
-          t("div", Nt, [
-            t("p", Vt, [
+          e.divider ? (o(), i("div", Wt)) : g("", !0),
+          t("div", zt, [
+            t("p", Ft, [
               c(e.$slots, "default", {}, void 0, !0)
             ])
           ])
@@ -381,30 +398,32 @@ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PU
       ])
     ]));
   }
-}), Ft = /* @__PURE__ */ k(Wt, [["__scopeId", "data-v-3957c1bd"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), xt = /* @__PURE__ */ k(Ut, [["__scopeId", "data-v-3957c1bd"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: H,
-  MucButton: W,
-  MucCallout: Y,
-  MucCard: ot,
-  MucCardContainer: ct,
-  MucComment: E,
-  MucCommentText: Rt,
-  MucIntro: Ft
+  MucBanner: j,
+  MucButton: z,
+  MucCallout: Z,
+  MucCard: it,
+  MucCardContainer: lt,
+  MucComment: I,
+  MucCommentText: Tt,
+  MucIcon: Pt,
+  MucIntro: xt
 }, Symbol.toStringTag, { value: "Module" }));
-function xt(a) {
+function Xt(a) {
   for (const e in w)
     a.component(e, w[e]);
 }
-const Ut = { install: xt };
+const Gt = { install: Xt };
 export {
-  H as MucBanner,
-  W as MucButton,
-  Y as MucCallout,
-  ot as MucCard,
-  ct as MucCardContainer,
-  E as MucComment,
-  Rt as MucCommentText,
-  Ft as MucIntro,
-  Ut as default
+  j as MucBanner,
+  z as MucButton,
+  Z as MucCallout,
+  it as MucCard,
+  lt as MucCardContainer,
+  I as MucComment,
+  Tt as MucCommentText,
+  Pt as MucIcon,
+  xt as MucIntro,
+  Gt as default
 };

package/dist/types/components/Icon/MucIcon.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    component: import("vue").DefineComponent<{
+        icon: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import("vue").PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        icon: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        color: {
+            type: import("vue").PropType<string>;
+        };
+    }>>, {}, {}>;
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import("@vitest/spy").Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Weather: {
+    args: {
+        icon: string;
+    };
+};
+export declare const Youtube: {
+    args: {
+        icon: string;
+        color: string;
+    };
+};

package/dist/types/components/Icon/MucIcon.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+     * String of the icon to be displayed.
+     */
+    icon: string;
+    /**
+     * Optional css-color for the icon.
+     */
+    color?: string | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/Icon/index.d.ts

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

package/dist/types/components/index.d.ts

@@ -3,5 +3,6 @@ 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 { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, MucIcon, };

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.8.0-beta.7",
+  "version": "1.8.0-beta.8",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/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",
+  },
+};

package/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>

package/src/components/Icon/index.ts

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

package/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,
 };