Add icons for web

app.config.ts

@@ -1,4 +1,5 @@
 export default defineAppConfig({
+    appName: "Nguyen Tien Hoach",
     footerName: "Hoachnt",
     ui: {
         primary: "blue",

app.vue

@@ -11,6 +11,37 @@ const seoMeta = ref({
     description: t("seo.home.description"),
 });
 
+useHead({
+    link: [
+        {
+            rel: "icon",
+            type: "image/x-icon",
+            href: "/favicon.ico",
+        },
+        {
+            rel: "apple-touch-icon",
+            sizes: "180x180",
+            href: "/apple-touch-icon.png",
+        },
+        {
+            rel: "icon",
+            type: "image/png",
+            sizes: "32x32",
+            href: "/favicon-32x32.png",
+        },
+        {
+            rel: "icon",
+            type: "image/png",
+            sizes: "16x16",
+            href: "/favicon-16x16.png",
+        },
+        {
+            rel: "manifest",
+            href: "/site.webmanifest",
+        },
+    ],
+});
+
 useSeoMeta({
     ...seoMeta.value,
     ogTitle: seoMeta.value.title,

components/App/Footer.vue

@@ -1,7 +1,8 @@
 <template>
     <footer
-        class="max-w-2xl mx-auto text-black dark:text-white text-sm text-center px-4 py-6"
+        class="max-w-2xl mx-auto flex flex-col items-center text-black dark:text-white text-sm px-4 py-6"
     >
+        <AppLogo :size="14" />
         <span class="text-center text-sm text-muted">
             © {{ new Date().getFullYear() }}, {{ useAppConfig().footerName }} -
             {{ $t("all_rights_reserved") }}.</span

components/App/Logo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { appName } = useAppConfig();
+
+defineProps({
+    isText: {
+        type: Boolean,
+        default: false,
+    },
+    size: {
+        type: Number,
+        default: 6,
+    },
+});
+</script>
+
+<template>
+    <NuxtLink
+        to="/"
+        class="flex shrink-0 items-center"
+        aria-label="Go back to home page"
+    >
+        <SvgoHoachnt
+            class="block w-auto"
+            :class="size ? 'h-' + size : 'h-6'"
+            :font-controlled="false"
+        />
+        <span v-if="isText" class="ml-1 text-xs font-semibold">
+            {{ appName }}
+        </span>
+    </NuxtLink>
+</template>

nuxt.config.ts

@@ -10,12 +10,7 @@ export default defineNuxtConfig({
     nitro: {
         prerender: {
             crawlLinks: true,
-            routes: [
-                "/sitemap.xml",
-                "/lab",
-                "/articles",
-                "/projects",
-            ],
+            routes: ["/sitemap.xml", "/lab", "/articles", "/projects"],
         },
     },
     routeRules: {
@@ -38,6 +33,7 @@ export default defineNuxtConfig({
         "nuxt-icon",
         "nuxt-delay-hydration",
         "nuxt-booster",
+        "nuxt-svgo",
         "@vueuse/nuxt",
         "@vueuse/motion/nuxt",
         "@pinia/nuxt",
@@ -164,6 +160,10 @@ export default defineNuxtConfig({
         },
     },
 
+    svgo: {
+        autoImportPath: "./assets/logo/",
+    },
+
     sitemap: {
         strictNuxtContentPaths: true,
     },

package.json

@@ -1,58 +1,59 @@
 {
-    "name": "nuxt-app",
-    "private": true,
-    "scripts": {
-        "build": "nuxt build",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare",
-        "lint": "bun lint:eslint && bun lint:prettier",
-        "lint:eslint": "eslint .",
-        "lint:prettier": "prettier . --check",
-        "lintfix": "eslint . --fix && prettier --write --list-different ."
-    },
-    "devDependencies": {
-        "@iconify-json/heroicons": "^1.1.24",
-        "@iconify-json/heroicons-solid": "^1.1.12",
-        "@iconify-json/logos": "^1.1.44",
-        "@iconify-json/mdi": "^1.1.68",
-        "@iconify-json/solar": "^1.1.10",
-        "@nuxt/content": "^2.13.2",
-        "@nuxt/devtools": "1.3.9",
-        "@nuxt/eslint": "^0.5.4",
-        "@nuxthq/studio": "2.0.3",
-        "@nuxtjs/fontaine": "^0.4.3",
-        "@nuxtjs/google-fonts": "3.2.0",
-        "@nuxtjs/html-validator": "^1.8.2",
-        "@nuxtjs/i18n": "^8.4.0",
-        "@nuxtjs/mdc": "^0.8.3",
-        "@nuxtjs/sitemap": "^6.0.0-beta.2",
-        "@pinia/nuxt": "^0.5.4",
-        "@vueuse/core": "^11.0.0",
-        "@vueuse/nuxt": "^11.0.0",
-        "eslint": "^9.9.1",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-prettier": "^5.2.1",
-        "nuxt": "^3.13.0",
-        "nuxt-delay-hydration": "^1.3.6",
-        "nuxt-icon": "0.6.10",
-        "prettier": "^3.3.3",
-        "prettier-plugin-tailwindcss": "0.6.6",
-        "typescript": "^5.5.4"
-    },
-    "dependencies": {
-        "@iconify-json/lucide": "1.1.207",
-        "@nuxt/image": "1.7.0",
-        "@nuxt/types": "^2.18.1",
-        "@nuxt/ui": "2.18.4",
-        "@vueuse/motion": "^2.2.3",
-        "embla-carousel-auto-height": "^8.2.0",
-        "embla-carousel-vue": "^8.2.0",
-        "ipad-cursor": "^0.5.2",
-        "nuxt-booster": "^3.1.3",
-        "sass": "^1.77.8",
-        "sharp": "^0.33.5",
-        "vue-use-fixed-header": "^2.0.3"
-    }
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "bun lint:eslint && bun lint:prettier",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier . --check",
+    "lintfix": "eslint . --fix && prettier --write --list-different ."
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.1.24",
+    "@iconify-json/heroicons-solid": "^1.1.12",
+    "@iconify-json/logos": "^1.1.44",
+    "@iconify-json/mdi": "^1.1.68",
+    "@iconify-json/solar": "^1.1.10",
+    "@nuxt/content": "^2.13.2",
+    "@nuxt/devtools": "1.3.9",
+    "@nuxt/eslint": "^0.5.4",
+    "@nuxthq/studio": "2.0.3",
+    "@nuxtjs/fontaine": "^0.4.3",
+    "@nuxtjs/google-fonts": "3.2.0",
+    "@nuxtjs/html-validator": "^1.8.2",
+    "@nuxtjs/i18n": "^8.4.0",
+    "@nuxtjs/mdc": "^0.8.3",
+    "@nuxtjs/sitemap": "^6.0.0-beta.2",
+    "@pinia/nuxt": "^0.5.4",
+    "@vueuse/core": "^11.0.0",
+    "@vueuse/nuxt": "^11.0.0",
+    "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "nuxt": "^3.13.0",
+    "nuxt-delay-hydration": "^1.3.6",
+    "nuxt-icon": "0.6.10",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.6",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "1.1.207",
+    "@nuxt/image": "1.7.0",
+    "@nuxt/types": "^2.18.1",
+    "@nuxt/ui": "2.18.4",
+    "@vueuse/motion": "^2.2.3",
+    "embla-carousel-auto-height": "^8.2.0",
+    "embla-carousel-vue": "^8.2.0",
+    "ipad-cursor": "^0.5.2",
+    "nuxt-booster": "^3.1.3",
+    "nuxt-svgo": "^4.0.4",
+    "sass": "^1.77.8",
+    "sharp": "^0.33.5",
+    "vue-use-fixed-header": "^2.0.3"
+  }
 }