add icons

app.vue

@@ -143,10 +143,19 @@ const toggleModal = () => {
           <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
         </template>
       </div>
+      <div class="social">
+        <div class="container prose">
+          <Icon name="uil:github" />
           <template v-for="item in social_networkData">
-        <div class="social_network-name" :class="[{ 'social_network-name-small': item.link }]">{{ item.name }}</div>
+            <div class="social_network-name" :class="[{ 'social_network-name-small': item.link }]">
+              <a href="#" target="_blank">
+                {{ item.name }}
+              </a>
+            </div>
           </template>
         </div>
+      </div>
+    </div>
     <Modal />
   </div>
 </template>

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', "@nuxt/image", "nuxt-svgo", '@tresjs/nuxt'],
+  modules: ['@nuxtjs/tailwindcss', "@nuxt/image", "nuxt-icon", "nuxt-svgo", '@tresjs/nuxt'],
   runtimeConfig: {
     public: {
       apiBase: '/api',

package-lock.json

@@ -20,6 +20,9 @@
         "three": "^0.165.0",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2"
+      },
+      "devDependencies": {
+        "nuxt-icon": "^0.6.10"
       }
     },
     "node_modules/@alloc/quick-lru": {

package.json

@@ -23,5 +23,8 @@
     "three": "^0.165.0",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "nuxt-icon": "^0.6.10"
   }
 }