chore(pack): optimize dependencies, reduce bundle size

frontend/src/views/PaymentCompleted.vue

@@ -4,7 +4,7 @@
       <!-- Navigation Link at the top -->
       <div class="navigation-link">
         <button class="link-button" @click="goBack()">
-          <v-icon>mdi-arrow-left</v-icon>
+          <v-icon :icon="mdiArrowLeft" />
           {{ t('returnToCreator') }}
         </button>
       </div>
@@ -14,9 +14,7 @@
       </h1>
 
       <p>
-        <v-icon size="120" color="success">
-          mdi-check-circle
-        </v-icon>
+        <v-icon size="120" color="success" :icon="mdiCheckCircle" />
       </p>
 
       <p>
@@ -40,9 +38,10 @@
 </template>
 
 <script setup>
-import {useRouter, useRoute} from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useBrandingStore } from '@/stores/brandingStore.js';
+import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
 
 const router = useRouter();
 const route = useRoute();
@@ -114,7 +113,7 @@ function goBack() {
   content: '';
   background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
   mask: linear-gradient(#fff 0 0) content-box,
-  linear-gradient(#fff 0 0);
+    linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
 }
@@ -125,7 +124,7 @@ function goBack() {
 }
 
 .link-button {
-  @apply flex items-center gap-2;  
+  @apply flex items-center gap-2;
   @apply text-hutopyPrimary hover:text-hutopySecondary;
   @apply transition-colors;
   @apply duration-300;