components/footer.vue

@@ -2,6 +2,15 @@
 import k_logo from '@/assets/LOGO.svg'
 import { apiFetch } from '~/utils/apiFetch';
 
+import tg from '@/assets/icons/telegram.svg'
+import vk from '@/assets/icons/vk.svg'
+import yt from '@/assets/icons/youtube.svg'
+const icons = {
+    'simple-icons:vk': vk,
+    'simple-icons:telegram': tg,
+    'simple-icons:youtube': yt,
+}
+
 const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
 const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
@@ -17,7 +26,9 @@ const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`so
             <div class="footer-text footer-text-social" v-if="social_networkData">
                 <template v-for="item in social_networkData">
                     <a :href="item.link" target="_blank">
-                        <Icon :name="item.icon" /> {{ item.name }}
+                        <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                            v-if="icons.hasOwnProperty(item.icon.trim())" />
+                        <Icon :name="item.icon" v-else /> {{ item.name }}
                     </a>
                 </template>
             </div>

components/header.vue

@@ -11,8 +11,8 @@ const route = useRoute()
         <div class="container">
             <div class="logo">
                 <div class="k-logo">
-                    <k_logo />
                     <NuxtLink to="/">
+                        <k_logo />
                         Kupizabor
                     </NuxtLink>
                 </div>