.

src/lib/cmps/Badget.svelte

@@ -43,8 +43,8 @@
         'bottom-left': '-bottom-2 -left-2'
     };
 
-    // Iconos por tipo
-    const icons = {
+    // Iconos por tipo (función derivada para que responda a cambios de size)
+    const icons = $derived({
         warning: `<svg class="${sizes[size].icon} text-white" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
         </svg>`,
@@ -60,9 +60,9 @@
         disabled: `<svg class="${sizes[size].icon} text-white" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
         </svg>`
-    };
+    });
 
-    const iconHtml = customIcon || icons[type];
+    const iconHtml = $derived(customIcon || icons[type]);
 </script>
 
 <div
@@ -76,4 +76,4 @@
     div {
         pointer-events: auto;
     }
-</style>
+</style>