frontend: replace vite-plugin-vue2-svg with vite-plugin-svg4vue

Because vite-plugin-vue2-svg does not support vue3.
Only worked when converting vite.config.js to
an esm file by renaming it to .mjs.
vite-plugin-svg4vue is not the most popular package
for this, this would be https://www.npmjs.com/package/vite-svg-loader,
but that does not support vue2.

Issue: ecamp#5121

We can also wait to merge this short before we want
to upgrade to vue3.

Also fixes https://github.com/ecamp/ecamp3/security/dependabot/178

frontend/package.json

@@ -112,7 +112,7 @@
     "unplugin-vue-components": "0.27.0",
     "vite": "5.2.10",
     "vite-plugin-comlink": "4.0.3",
-    "vite-plugin-vue2-svg": "0.4.0",
+    "vite-plugin-svg4vue": "3.1.2",
     "vitest": "1.6.0",
     "vitest-canvas-mock": "0.3.3",
     "vue-template-compiler": "2.7.15"

frontend/src/plugins/icons/BigScreen.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/icons/BigScreen.svg?raw'
+</script>

frontend/src/plugins/icons/CeviLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/CeviLogo.svg?raw'
+</script>

frontend/src/plugins/icons/ColumnLayout.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/icons/ColumnLayout.svg?raw'
+</script>

frontend/src/plugins/icons/GoogleLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/GoogleLogo.svg?raw'
+</script>

frontend/src/plugins/icons/JublaLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/JublaLogo.svg?raw'
+</script>

frontend/src/plugins/icons/PaperSize.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/icons/PaperSize.svg?raw'
+</script>

frontend/src/plugins/icons/PbsLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/PbsLogo.svg?raw'
+</script>

frontend/src/plugins/icons/ResponsiveLayout.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/icons/ResponsiveLayout.svg?raw'
+</script>

frontend/src/plugins/icons/TentDay.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/tents/TentDay.svg?raw'
+</script>

frontend/src/plugins/icons/eCampLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <span>{{ logoSvgRaw }}</span>
+</template>
+
+<script setup>
+import logoSvgRaw from '@/assets/eCampLogo.svg?raw'
+</script>

frontend/src/plugins/vuetify.js

@@ -2,16 +2,16 @@
 // src/plugins/vuetify.js
 
 import Vuetify from 'vuetify/lib'
-import PbsLogo from '@/assets/PbsLogo.svg'
-import GoogleLogo from '@/assets/GoogleLogo.svg'
-import eCampLogo from '@/assets/eCampLogo.svg'
-import CeviLogo from '@/assets/CeviLogo.svg'
-import JublaLogo from '@/assets/JublaLogo.svg'
-import TentDay from '@/assets/tents/TentDay.svg'
-import PaperSize from '@/assets/icons/PaperSize.svg'
-import BigScreen from '@/assets/icons/BigScreen.svg'
-import ResponsiveLayout from '@/assets/icons/ResponsiveLayout.svg'
-import ColumnLayout from '@/assets/icons/ColumnLayout.svg'
+import PbsLogo from './icons/PbsLogo.vue'
+import GoogleLogo from './icons/GoogleLogo.vue'
+import eCampLogo from './icons/eCampLogo.vue'
+import CeviLogo from './icons/CeviLogo.vue'
+import JublaLogo from './icons/JublaLogo.vue'
+import TentDay from './icons/TentDay.vue'
+import PaperSize from './icons/PaperSize.vue'
+import BigScreen from './icons/BigScreen.vue'
+import ResponsiveLayout from './icons/ResponsiveLayout.vue'
+import ColumnLayout from './icons/ColumnLayout.vue'
 import i18n from '@/plugins/i18n'
 import colors from 'vuetify/lib/util/colors'
 

frontend/vite.config.js → frontend/vite.config.mjs

@@ -1,12 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue2'
-import { createSvgPlugin } from 'vite-plugin-vue2-svg'
 import { comlink } from 'vite-plugin-comlink'
 import * as path from 'path'
 import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { configDefaults } from 'vitest/config'
+import { svg4VuePlugin } from "vite-plugin-svg4vue";
 
 const plugins = [
   comlink(), // must be first
@@ -17,7 +17,7 @@ const plugins = [
       VuetifyResolver(),
     ],
   }),
-  createSvgPlugin(),
+  svg4VuePlugin({skipSvgo: true}),
 ]
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN
 if (sentryAuthToken) {