Merge pull request #14 from nikeokoronkwo/nikeokoronkwo/issue13

Author: nikeokoronkwo

components/ProjectSummary.vue

@@ -10,6 +10,10 @@ const glob = import.meta.glob("~/assets/svg/*", {
 const getImageAbsolutePath = (assetId: string): string => {
   return glob[`/assets/svg/${assetId}.svg`]["default"];
 };
+
+function getIconId(id: string) {
+  return iconMap.get(id);
+}
 </script>
 
 <template>
@@ -68,13 +72,17 @@ const getImageAbsolutePath = (assetId: string): string => {
       v-if="props.languages"
       class="flex flex-col px-3 py-3 space-y-3 justify-end border border-transparent border-l-1 border-l-primary-950 items-center"
     >
-      <img
-        v-for="l in props.languages"
-        :key="l"
-        :src="getImageAbsolutePath(l)"
-        :class="'aspect-square h-10'"
-        :alt="l"
-      />
+      <div v-for="l in props.languages"
+        :key="l">
+        <Icon v-if="getIconId(l)" :name="getIconId(l)!" class=" scale-150" />
+        <img
+        v-else
+          :src="getImageAbsolutePath(l)"
+          :class="'aspect-square h-10'"
+          :alt="l"
+        />
+      </div>
+      
     </div>
   </div>
 </template>

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
     "@nuxtjs/device",
+    "@nuxt/icon",
   ],
 
   routeRules: {
@@ -30,4 +31,4 @@ export default defineNuxtConfig({
 
   css: ["~/assets/css/main.css"],
   compatibilityDate: "2024-10-11",
-});
+});

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@deno/kv": "^0.8.3",
     "@nuxt/content": "^2.13.2",
+    "@nuxt/icon": "^1.8.2",
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/device": "^3.2.4",