Remove component IconSVG and add new icon test

frontend/src/assets/icons/OcelotIcons.test.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { navigate } from 'vike/client/router'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { VIcon } from 'vuetify/components'
+
+vi.mock('vike/client/router')
+vi.mocked(navigate).mockResolvedValue()
+
+describe('Ocelot Icons', () => {
+  const Wrapper = () => {
+    return mount(VIcon, {
+      props: {
+        icon: '$history',
+        color: 'green',
+        size: 'large',
+      },
+    })
+  }
+  let wrapper: ReturnType<typeof Wrapper>
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  it('renders and tests if the ocelot icon "$history" is installed', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

frontend/src/assets/icons/__snapshots__/OcelotIcons.test.ts.snap

@@ -1,14 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconSVG > renders and tests if the custom icons are installed 1`] = `
+exports[`Ocelot Icons > renders and tests if the ocelot icon "$history" is installed 1`] = `
 <i
   aria-hidden="true"
-  class="v-icon notranslate v-theme--light v-icon--size-large svg-color"
+  class="v-icon notranslate v-theme--light v-icon--size-large text-green"
 >
   
   <!-- Generated by IcoMoon.io -->
   <svg
+    fill="currentColor"
     height="32"
+    stroke="currentColor"
     version="1.1"
     viewBox="0 0 32 32"
     width="32"

frontend/src/components/IconSVG.test.ts

@@ -1,46 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { navigate } from 'vike/client/router'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-
-import IconSVG from './IconSVG.vue'
-
-vi.mock('vike/client/router')
-vi.mocked(navigate).mockResolvedValue()
-
-describe('IconSVG', () => {
-  const Wrapper = () => {
-    return mount(IconSVG, {
-      props: {
-        icon: '$history',
-        color: 'green',
-        size: 'large',
-      },
-    })
-  }
-  let wrapper: ReturnType<typeof Wrapper>
-
-  beforeEach(() => {
-    wrapper = Wrapper()
-  })
-
-  it('renders and tests if the custom icons are installed', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-
-  it('applies class "svg-color"', () => {
-    expect(wrapper.find('.svg-color').exists()).toBe(true)
-  })
-
-  it.todo('finds "color", "fill" and "stroke" in class', () => {
-    // see: https://runthatline.com/test-css-module-classes-in-vue-with-vitest/
-    // expect(wrapper.classes()).toContain('color')
-    // expect(wrapper.classes()).toContain('fill')
-    // expect(wrapper.classes()).toContain('stroke')
-  })
-
-  it.todo('sets right "color" in class', () => {
-    // expect(wrapper.find('.svg-color').attributes('style')).toContain(
-    //   '--ff7c8758-props\\.color: green;',
-    // )
-  })
-})

frontend/src/components/IconSVG.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    icon: string
-    color?: string
-    size: string | number | undefined
-  }>(),
-  { color: '' },
-)
-</script>
-
-<template>
-  <v-icon class="svg-color" :icon="props.icon" :size="props.size" />
-</template>
-
-<style lang="scss">
-.svg-color {
-  // there should be a '@use' directive to silent stylelint, but I couldn't find this out
-  // stylelint-disable function-no-unknown
-  color: v-bind('props.color');
-  fill: currentcolor;
-  stroke: currentcolor;
-}
-</style>