🪶 Feat: Dynamic Import Theme Reactive SVG

Author: MidHunterX

public/ico/databases/json.svg

@@ -3,7 +3,7 @@ import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faToolbox } from "@fortawesome/free-solid-svg-icons";
-import IconCloud from "@/world/effects/iconCloud"
+import IconCloud from "@/world/effects/iconCloud";
 
 export default function Skills() {
   // █▀▀ █▀▀ ▀█▀ █▀▀ █░█   █▀ █▄▀ █ █░░ █░░ █▀
@@ -43,26 +43,18 @@ export default function Skills() {
     return <p>Loading...</p>;
   }
 
-  // █▀█ █▀▀ █▄░█ █▀▄ █▀▀ █▀█   █▀ █▄▀ █ █░░ █░░ █▀
-  // █▀▄ ██▄ █░▀█ █▄▀ ██▄ █▀▄   ▄█ █░█ █ █▄▄ █▄▄ ▄█
-  // Prints skills from given category
-  // Syntax: renderSkills("category", data.category)
-  // Example: renderSkills("languages", skills.languages)
-  const renderSkills = (title: string, skillList: Skill[]) => (
-    <div className="w-full grid sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 text-center py-2 sm:px-0">
-      {skillList.map((skill, index) => (
-        <div key={`skill-${index}`} className="block p-4">
-          <Image
-            src={`/ico/${title}/${skill.icon}.svg`}
-            alt={`${skill.name} icon`}
-            width={150}
-            height={150}
-            data-blobity-tooltip={`${skill.name}`}
-          />
-        </div>
-      ))}
-    </div>
-  );
+  // █▀ █░█ █▀▀ █▀█   █ █▀▄▀█ █▀█ █▀█ █▀█ ▀█▀
+  // ▄█ ▀▄▀ █▄█ █▀▄   █ █░▀░█ █▀▀ █▄█ █▀▄ ░█░
+  // Function to dynamically import SVGs as React Component using SVGR
+  const importSvgIcon = (title: String, icon: String) => {
+    try {
+      const IconComponent = require(`/public/ico/${title}/${icon}.svg`).default;
+      return IconComponent;
+    } catch (error) {
+      console.error("Error importing SVG:", error);
+      return null;
+    }
+  };
 
   // █▀█ █▀▀ █▄░█ █▀▄ █▀▀ █▀█   ▄▀█ █░░ █░░   █▀ █▄▀ █ █░░ █░░ █▀
   // █▀▄ ██▄ █░▀█ █▄▀ ██▄ █▀▄   █▀█ █▄▄ █▄▄   ▄█ █░█ █ █▄▄ █▄▄ ▄█
@@ -75,23 +67,28 @@ export default function Skills() {
         // Using loops over .map() as Heap/GC allocation in JS is expensive.
         for (let index = 0; index < skillList.length; index++) {
           const skill = skillList[index];
-          skillElements.push(
-            <div
-              key={`${title}-${index}`}
-              className="place-content-center p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-[#161D1F] dark:border-gray-700 dark:hover:bg-gray-700"
-              data-blobity-tooltip={`${skill.name}`}
-              data-blobity-magnetic="false"
-            >
-              <Image
-                src={`/ico/${title}/${skill.icon}.svg`}
-                alt={`${skill.name} icon`}
+          const IconComponent = importSvgIcon(title, skill.icon);
+
+          if (IconComponent) {
+            skillElements.push(
+              <div
+                key={`${title}-${index}`}
+                className="place-content-center p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-[#161D1F] dark:border-gray-700 dark:hover:bg-gray-700"
                 data-blobity-tooltip={`${skill.name}`}
-                data-blobity-magnetic="true"
-                width={100}
-                height={100}
-              />
-            </div>
-          );
+                data-blobity-magnetic="false"
+              >
+                <IconComponent
+                  className="w-full h-full object-contain text-gray-800 dark:text-gray-200"
+                  src={`/ico/${title}/${skill.icon}.svg`}
+                  alt={`${skill.name} icon`}
+                  data-blobity-tooltip={`${skill.name}`}
+                  data-blobity-magnetic="true"
+                  width={100}
+                  height={100}
+                />
+              </div>,
+            );
+          }
         }
       }
     }
@@ -105,9 +102,7 @@ export default function Skills() {
     const skillIcons = [];
     if (skills) {
       for (const skillList of Object.values(skills)) {
-        skillIcons.push(
-          ...skillList.map((skill) => skill.icon)
-        );
+        skillIcons.push(...skillList.map((skill) => skill.icon));
       }
     }
     return skillIcons;
@@ -116,19 +111,14 @@ export default function Skills() {
     const skillNames = [];
     if (skills) {
       for (const skillList of Object.values(skills)) {
-        skillNames.push(
-          ...skillList.map((skill) => skill.name)
-        );
+        skillNames.push(...skillList.map((skill) => skill.name));
       }
     }
     return skillNames;
   };
 
   return (
-    <section
-      id="skills"
-      className="px-3 md:px-[100px] py-[100px]"
-    >
+    <section id="skills" className="px-3 md:px-[100px] py-[100px]">
       <h2>
         <FontAwesomeIcon className="pe-4" icon={faToolbox} />
         Skills
@@ -137,16 +127,12 @@ export default function Skills() {
       <div className="flex gap-10">
         {/* CLOUD ONLY FOR PC-MASTER-RACE ;) */}
         <div className="w-fit mx-auto hidden lg:block">
-          <IconCloud
-            iconSlugs={getSkillIcons()}
-            names={getSkillNames()}
-          />
+          <IconCloud iconSlugs={getSkillIcons()} names={getSkillNames()} />
         </div>
         <div className="w-fit mx-auto grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-5 xl:grid-cols-7 gap-6">
           {renderAllSkills()}
         </div>
       </div>
-
     </section>
   );
 }