viconic-react-icons 1.1.5 → 1.1.7

package/dist/index.js

@@ -45,7 +45,7 @@ var import_react = __toESM(require("react"));
   }
   if (typeof document !== "undefined") {
     const style = document.createElement("style");
-    style.textContent = ":where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; }";
+    style.textContent = ":where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; } viconic-icon:not(.vi-ok):not(.svg-loaded) { animation: none !important; background: none !important; }";
     if (document.head.firstChild) {
       document.head.insertBefore(style, document.head.firstChild);
     } else {
@@ -2003,9 +2003,15 @@ function initViconic(options = {}) {
 }
 var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   const iconRef = (0, import_react.useRef)(null);
+  const prevNameRef = (0, import_react.useRef)(name);
   (0, import_react.useEffect)(() => {
     const el = iconRef.current;
     if (!el) return;
+    if (prevNameRef.current !== name) {
+      el.innerHTML = "";
+      el.classList.remove("vi-ok", "svg-loaded", "vi-mono", "ci-multicolor");
+      prevNameRef.current = name;
+    }
     const isKitIcon = name && name.startsWith("@");
     if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
       window.CopyIcons.forceProcess(el);
@@ -2013,7 +2019,8 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
     const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
     if (isLoaded) return;
     let retries = 0;
-    const maxRetries = 50;
+    const maxRetries = 100;
+    let hasTriggeredReload = false;
     const timer = setInterval(() => {
       retries++;
       if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
@@ -2024,6 +2031,20 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
         window.CopyIcons.forceProcess(el);
       }
+      if (isKitIcon && !hasTriggeredReload && retries === 10) {
+        hasTriggeredReload = true;
+        const prefixMatch = name.match(/^@([^\/]+)/);
+        if (prefixMatch && window.CopyIconsKit) {
+          const prefix = prefixMatch[1];
+          for (const kitId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kitId];
+            if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
+              kit.reload();
+              break;
+            }
+          }
+        }
+      }
       if (retries >= maxRetries) clearInterval(timer);
     }, 100);
     return () => clearInterval(timer);

package/dist/index.mjs

@@ -10,7 +10,7 @@ import React, { useEffect, useRef } from "react";
   }
   if (typeof document !== "undefined") {
     const style = document.createElement("style");
-    style.textContent = ":where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; }";
+    style.textContent = ":where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; } viconic-icon:not(.vi-ok):not(.svg-loaded) { animation: none !important; background: none !important; }";
     if (document.head.firstChild) {
       document.head.insertBefore(style, document.head.firstChild);
     } else {
@@ -1968,9 +1968,15 @@ function initViconic(options = {}) {
 }
 var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   const iconRef = useRef(null);
+  const prevNameRef = useRef(name);
   useEffect(() => {
     const el = iconRef.current;
     if (!el) return;
+    if (prevNameRef.current !== name) {
+      el.innerHTML = "";
+      el.classList.remove("vi-ok", "svg-loaded", "vi-mono", "ci-multicolor");
+      prevNameRef.current = name;
+    }
     const isKitIcon = name && name.startsWith("@");
     if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
       window.CopyIcons.forceProcess(el);
@@ -1978,7 +1984,8 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
     const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
     if (isLoaded) return;
     let retries = 0;
-    const maxRetries = 50;
+    const maxRetries = 100;
+    let hasTriggeredReload = false;
     const timer = setInterval(() => {
       retries++;
       if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
@@ -1989,6 +1996,20 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
         window.CopyIcons.forceProcess(el);
       }
+      if (isKitIcon && !hasTriggeredReload && retries === 10) {
+        hasTriggeredReload = true;
+        const prefixMatch = name.match(/^@([^\/]+)/);
+        if (prefixMatch && window.CopyIconsKit) {
+          const prefix = prefixMatch[1];
+          for (const kitId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kitId];
+            if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
+              kit.reload();
+              break;
+            }
+          }
+        }
+      }
       if (retries >= maxRetries) clearInterval(timer);
     }, 100);
     return () => clearInterval(timer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Viconic Smart Icons loader for React — supports Kit and 200k+ system icons",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/copyicons-smart-loader.js

@@ -34,7 +34,7 @@
     if (typeof document !== 'undefined') {
         const style = document.createElement('style');
         // Use :where() to set specificity to 0, so user styles can easily override without !important
-        style.textContent = ':where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; }';
+        style.textContent = ':where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; } viconic-icon:not(.vi-ok):not(.svg-loaded) { animation: none !important; background: none !important; }';
         if (document.head.firstChild) {
             document.head.insertBefore(style, document.head.firstChild);
         } else {

package/src/index.jsx

@@ -65,11 +65,21 @@ export function initViconic(options = {}) {
  */
 export const ViconicIcon = ({ name, className, style, size, color, ...props }) => {
     const iconRef = useRef(null);
+    const prevNameRef = useRef(name);
 
     useEffect(() => {
         const el = iconRef.current;
         if (!el) return;
 
+        // --- FIX DOM REUSE (Reconciliation) ---
+        // React reuses DOM nodes. If `name` changes, we must wipe the old state 
+        // because the DOM node might still have 'svg-loaded' or 'vi-ok'.
+        if (prevNameRef.current !== name) {
+            el.innerHTML = '';
+            el.classList.remove('vi-ok', 'svg-loaded', 'vi-mono', 'ci-multicolor');
+            prevNameRef.current = name;
+        }
+
         // Path 1: Smart loader (system icons with prefix:name format)
         const isKitIcon = name && name.startsWith('@');
         if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
@@ -83,7 +93,9 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         if (isLoaded) return;
 
         let retries = 0;
-        const maxRetries = 50; // 50 × 100ms = 5 seconds max
+        const maxRetries = 100; // 100 × 100ms = 10 seconds max
+        let hasTriggeredReload = false;
+        
         const timer = setInterval(() => {
             retries++;
             if (el.classList.contains('vi-ok') || el.classList.contains('svg-loaded')) {
@@ -96,6 +108,25 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
             if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
                 window.CopyIcons.forceProcess(el);
             }
+            
+            // HMR / Missing Kit Icon Fallback: 
+            // If it's a kit icon and hasn't loaded after 1 second, it might be newly added 
+            // in the Viconic Dashboard. We trigger a background reload of the kit.
+            if (isKitIcon && !hasTriggeredReload && retries === 10) {
+                hasTriggeredReload = true;
+                const prefixMatch = name.match(/^@([^\/]+)/);
+                if (prefixMatch && window.CopyIconsKit) {
+                    const prefix = prefixMatch[1];
+                    for (const kitId in window.CopyIconsKit) {
+                        const kit = window.CopyIconsKit[kitId];
+                        if (kit.config && kit.config.prefix === prefix && typeof kit.reload === 'function') {
+                            kit.reload();
+                            break;
+                        }
+                    }
+                }
+            }
+            
             if (retries >= maxRetries) clearInterval(timer);
         }, 100);