💄 changed css-class of mucicon and provided optional override #104 (#150)

* changed css-class of mucicon and provided optional override #104

* changed css-class of mucicon and provided optional override #104

* reworked icon usage in all components #104

* reworked icon usage in all components #104

* added docu and type for muc-icon #104

* updated data-structure of muc-icon #104

* updated datastructur of class attrbute #104

* 📝 updated readme using new muc-icon component #104

---------

Co-authored-by: Fabian Wilms <10800158+FabianWilms@users.noreply.github.com>

Author: langehm

README.md

@@ -69,10 +69,7 @@ So to use an icon from Patternlab you can simply follow the official
 documentation: https://patternlab.muenchen.space/?p=viewall-guidelines-icons
 
 ```html
-
-<svg aria-hidden="true" class="icon">
-    <use xlink:href="#icon-{name}"></use>
-</svg>
+<muc-icon :icon="name"/>
 ```
 
 ## Contributing

src/components/Banner/MucBanner.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type bannerType = "info" | "success" | "warning" | "emergency";
 
 const props = withDefaults(
@@ -70,13 +72,13 @@ const typeAriaLabel = computed(() => {
 const typeIcon = computed(() => {
   switch (props.type) {
     case "success":
-      return "#icon-check";
+      return "check";
     case "warning":
     case "emergency":
-      return "#icon-warning";
+      return "warning";
     case "info":
     default:
-      return "#icon-information";
+      return "information";
   }
 });
 </script>
@@ -91,9 +93,7 @@ const typeIcon = computed(() => {
         :aria-label="typeAriaLabel"
       >
         <div class="container-fluid">
-          <svg class="icon">
-            <use :href="typeIcon" />
-          </svg>
+          <muc-icon :icon="typeIcon" />
           <slot />
         </div>
       </div>

src/components/BuisnessHours/MucBusinessHours.vue

@@ -12,12 +12,10 @@
       data-bs-toggle="collapse"
       :aria-expanded="!collapsed"
     >
-      <svg
-        aria-hidden="true"
+      <muc-icon
+        :icon="icon"
         class="icon icon--before"
-      >
-        <use :xlink:href="'#icon-' + icon"></use>
-      </svg>
+      />
       <div v-if="todaysBusinessHours">
         <span> {{ todaysBusinessHours.weekDay }} geöffnet </span>
         <span
@@ -30,13 +28,10 @@
           </span>
         </span>
       </div>
-
-      <svg
-        aria-hidden="true"
+      <muc-icon
+        icon="chevron-down"
         class="icon icon--after"
-      >
-        <use xlink:href="#icon-chevron-down"></use>
-      </svg>
+      />
     </button>
     <div
       class="m-business-hours-toggle__content"
@@ -74,6 +69,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
+import { MucIcon } from "../Icon";
 import { BusinessHourType } from "./BusinessHourType";
 
 const LOCALES = "de-DE";

src/components/Button/MucButton.vue

@@ -7,20 +7,20 @@
   >
     <span>
       <slot />
-      <svg
+      <muc-icon
         v-if="icon"
-        aria-hidden="true"
+        :icon="icon"
         class="m-button__icon"
-      >
-        <use :xlink:href="'#icon-' + icon"></use>
-      </svg>
+      />
     </span>
   </button>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type buttonType = "primary" | "secondary" | "ghost";
 
 const props = withDefaults(

src/components/Callout/MucCallout.vue

@@ -8,12 +8,7 @@
       <div class="m-callout__icon">
         <slot name="icon">
           <!-- fallback icon -->
-          <svg
-            aria-hidden="true"
-            class="icon"
-          >
-            <use :xlink:href="`#icon-${fallbackCalloutIcon}`"></use>
-          </svg>
+          <muc-icon :icon="fallbackCalloutIcon" />
         </slot>
       </div>
       <div class="m-callout__body">
@@ -38,6 +33,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type calloutType = "info" | "warning" | "success" | "error";
 
 const props = withDefaults(

src/components/Comment/MucComment.vue

@@ -12,9 +12,9 @@
           <slot name="author" />
         </span>
         <span v-if="showDate">
-          <span class="m-comment__author"
-            >&nbsp;<slot name="datePrefix"
-          /></span>
+          <span class="m-comment__author">
+            &nbsp;<slot name="datePrefix" />
+          </span>
           <span class="m-comment__date">&nbsp;<slot name="date" /> </span>
         </span>
         <div
@@ -27,35 +27,20 @@
             :key="n"
             class="m-star-rating__item m-star-rating__item--full"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-solid-star"></use>
-            </svg>
+            <muc-icon icon="solid-star" />
           </div>
           <div
             v-if="evaluateRating.isHalfStar"
             class="m-star-rating__item m-star-rating__item--half"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-half-star"></use>
-            </svg>
+            <muc-icon icon="half-star" />
           </div>
           <div
             v-for="n in evaluateRating.emptyStars"
             :key="n"
             class="m-star-rating__item"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-solid-star"></use>
-            </svg>
+            <muc-icon icon="solid-star" />
           </div>
           <div class="m-star-rating__numeric">
             {{ ratingWithDecimalComma }}
@@ -76,6 +61,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 
+import { MucIcon } from "../Icon";
 import CommentType from "./CommentType";
 
 const LOCALES = "de-DE";

src/components/Icon/MucIcon.vue

@@ -1,14 +1,18 @@
 <template>
   <svg
     aria-hidden="true"
-    class="m-button__icon"
+    :class="iconClass"
     :style="{ color: color }"
   >
     <use :href="'#icon-' + icon" />
   </svg>
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+const attr = useAttrs();
+
 defineProps<{
   /**
    * String of the icon to be displayed.
@@ -20,4 +24,6 @@ defineProps<{
    */
   color?: string;
 }>();
+
+const iconClass = computed(() => attr.class ?? "icon");
 </script>

src/components/Intro/MucIntro.vue

@@ -44,11 +44,11 @@ defineSlots<{
         <div
           v-if="divider"
           class="muc-divider"
-        ></div>
+        />
 
         <div class="m-intro-vertical__content">
           <p style="padding-bottom: 32px">
-            <slot></slot>
+            <slot />
           </p>
         </div>
       </div>