From a51c1ed1f3db1a7eb8db24f2deb37b01d6fee068 Mon Sep 17 00:00:00 2001
From: Yolando <yolandomanullang@gmail.com>
Date: Sat, 11 Apr 2026 01:41:02 +0700
Subject: [PATCH] feat: implement skill management form and dynamic icon
 rendering component

---
 src/features/skills/skill-form.tsx | 6 ++++--
 src/features/skills/skill-icon.tsx | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/skills/skill-form.tsx b/src/features/skills/skill-form.tsx
index 197bd12..00c9cf1 100644
--- a/src/features/skills/skill-form.tsx
+++ b/src/features/skills/skill-form.tsx
@@ -104,7 +104,7 @@ export function SkillForm({ initialData, skillId }: { initialData?: any; skillId
 
         <div className="space-y-3">
           <label className="text-sm font-semibold">
-            Devicon Slug <span className="text-muted-foreground font-normal">(opsional — untuk ikon di Hero)</span>
+            Devicon Slug / Custom URL <span className="text-muted-foreground font-normal">(contoh: spring, atau /icons/logo.svg)</span>
           </label>
           <input
             name="iconName"
@@ -117,7 +117,9 @@ export function SkillForm({ initialData, skillId }: { initialData?: any; skillId
           {iconPreview && (
             <div className="flex items-center gap-3 p-3 rounded-xl border border-border bg-muted/20">
               <img
-                src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconPreview}/${iconPreview}-original.svg`}
+                src={iconPreview.startsWith("http") || iconPreview.startsWith("/")
+                  ? iconPreview
+                  : `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconPreview}/${iconPreview}-original.svg`}
                 alt={iconPreview}
                 className="w-10 h-10 object-contain"
                 onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
diff --git a/src/features/skills/skill-icon.tsx b/src/features/skills/skill-icon.tsx
index 4af4e77..a4f64fe 100644
--- a/src/features/skills/skill-icon.tsx
+++ b/src/features/skills/skill-icon.tsx
@@ -14,9 +14,13 @@ export function SkillIcon({ iconName, name }: { iconName: string | null; name: s
     );
   }
 
+  const iconSrc = iconName.startsWith("http") || iconName.startsWith("/")
+    ? iconName
+    : `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconName}/${iconName}-original.svg`;
+
   return (
     <img
-      src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${iconName}/${iconName}-original.svg`}
+      src={iconSrc}
       alt={name}
       className="w-9 h-9 object-contain"
       onError={() => setErrored(true)}