From 12a47f00188bd26127350ed548bdb76cd9240059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 21 Mar 2024 11:43:39 +0100
Subject: [PATCH] Refine our own SVG icon component for learning

---
 frontend/src/components/IconSVG.vue | 45 +++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/IconSVG.vue b/frontend/src/components/IconSVG.vue
index 216cc1ad3..c60a9a34e 100644
--- a/frontend/src/components/IconSVG.vue
+++ b/frontend/src/components/IconSVG.vue
@@ -1,11 +1,44 @@
 <script lang="ts" setup>
-// Wolle import icons, { iconNames } from '#assets/icons'
-// import icons from '#assets/icons/svgs/angle-down.svg'
-
-// const iconsX = { icons }
+const props = withDefaults(
+  defineProps<{
+    name: string
+    size?: 'small' | 'medium' | 'large'
+    ariaHidden?: boolean
+  }>(),
+  { size: 'medium', ariaHidden: false },
+)
 </script>
 
 <template>
-  <!-- <v-icon aria-label="My Account" role="img" aria-hidden="false"> $icons['angle-down'] </v-icon> -->
-  <v-icon aria-label="My Account" role="img" aria-hidden="false" icon="$vuetify"></v-icon>
+  <v-icon
+    class="base-icon"
+    :class="['svg', `--${size}`]"
+    :aria-hidden="props.ariaHidden"
+    :icon="props.name"
+  ></v-icon>
 </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;
+    }
+  }
+}
+</style>