From 52b813d4ab7776a02be805936e217bbc29504264 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 22 Mar 2024 14:00:21 +0100
Subject: [PATCH] Refine iconSVG component to assign the color by class and use
 the props in the storybook story

---
 frontend/src/components/IconSVG.vue | 40 +++++++----------------------
 1 file changed, 9 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/IconSVG.vue b/frontend/src/components/IconSVG.vue
index c60a9a34e..6e0648262 100644
--- a/frontend/src/components/IconSVG.vue
+++ b/frontend/src/components/IconSVG.vue
@@ -1,44 +1,22 @@
 <script lang="ts" setup>
 const props = withDefaults(
   defineProps<{
-    name: string
-    size?: 'small' | 'medium' | 'large'
-    ariaHidden?: boolean
+    icon: string
+    color?: string
+    size: string | number | undefined
   }>(),
-  { size: 'medium', ariaHidden: false },
+  { color: '' },
 )
 </script>
 
 <template>
-  <v-icon
-    class="base-icon"
-    :class="['svg', `--${size}`]"
-    :aria-hidden="props.ariaHidden"
-    :icon="props.name"
-  ></v-icon>
+  <v-icon class="svg-color" :icon="props.icon" :size="props.size" />
 </template>
 
 <style lang="scss">
-.base-icon {
-  display: inline-flex;
-  vertical-align: bottom;
-
-  > .svg {
-    height: 1.2em;
-    fill: currentColor;
-
-    &.--small {
-      height: 0.8em;
-    }
-
-    &.--medium {
-      height: 1.2em;
-    }
-
-    &.--large {
-      margin-left: 4px;
-      height: 2.2em;
-    }
-  }
+.svg-color {
+  color: v-bind('props.color');
+  fill: currentColor;
+  stroke: currentColor;
 }
 </style>