viconic-react-icons 1.1.8 → 1.4.0

package/dist/index.js

@@ -1978,6 +1978,30 @@ var import_react = __toESM(require("react"));
 })();
 
 // src/index.jsx
+(function _preloadKitCache() {
+  if (typeof window === "undefined" || typeof localStorage === "undefined") return;
+  try {
+    const W = window.__viconic = window.__viconic || {};
+    W.icons = W.icons || {};
+    const TTL = 3 * 24 * 60 * 60 * 1e3;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith("viconic:")) continue;
+      try {
+        const c = JSON.parse(localStorage.getItem(key));
+        if (c && c.d && Date.now() - c.t < TTL) {
+          for (const n in c.d) {
+            if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+            const svg = c.d[n];
+            if (!W.icons[n]) W.icons[n] = svg;
+          }
+        }
+      } catch (e) {
+      }
+    }
+  } catch (e) {
+  }
+})();
 var _initializedKits = /* @__PURE__ */ new Set();
 function initViconic(options = {}) {
   const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
@@ -2013,52 +2037,56 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       prevNameRef.current = name;
     }
     const isKitIcon = name && name.startsWith("@");
-    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
-      window.CopyIcons.forceProcess(el);
-    }
-    let isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
-    const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
-    if (isKitIcon && !isLoaded && prefixMatch) {
-      const iconBaseName = prefixMatch[2];
-      try {
-        for (let i = 0; i < localStorage.length; i++) {
-          const key = localStorage.key(i);
-          if (key && key.startsWith("vi_kit_")) {
-            const raw = localStorage.getItem(key);
-            if (raw) {
-              const c = JSON.parse(raw);
-              if (c && c.d && c.d[iconBaseName]) {
-                el.innerHTML = c.d[iconBaseName];
-                el.classList.add("vi-ok", "svg-loaded");
-                isLoaded = true;
-                break;
-              }
-            }
-          }
+    const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+    function isInjected() {
+      return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
+    }
+    if (!isInjected()) {
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
         }
-      } catch (e) {
       }
     }
-    if (isLoaded) return;
-    let retries = 0;
-    const maxRetries = 100;
-    let hasTriggeredReload = false;
-    const timer = setInterval(() => {
-      retries++;
-      if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
-        clearInterval(timer);
-        return;
+    if (!isInjected() && !isKitIcon) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+        window.CopyIcons.forceProcess(el);
+      }
+    }
+    if (!isInjected() && el._u) {
+      el._u();
+    }
+    if (isInjected()) return;
+    function tryInjectFromEvent() {
+      if (isInjected()) return;
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+          return;
+        }
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
-        hasTriggeredReload = true;
+    }
+    document.addEventListener("viconic:ready", tryInjectFromEvent);
+    const fallbackTimer = setTimeout(() => {
+      if (isInjected()) return;
+      tryInjectFromEvent();
+      if (!isInjected() && isKitIcon && prefixMatch) {
         const prefix = prefixMatch[1];
         if (window.CopyIconsKit) {
-          for (const kitId in window.CopyIconsKit) {
-            const kit = window.CopyIconsKit[kitId];
+          for (const kId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kId];
             if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
               kit.reload();
               break;
@@ -2066,9 +2094,11 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (retries >= maxRetries) clearInterval(timer);
-    }, 100);
-    return () => clearInterval(timer);
+    }, 500);
+    return () => {
+      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      clearTimeout(fallbackTimer);
+    };
   }, [name, className, size, color, style]);
   const combinedStyle = {
     ...size ? { fontSize: size } : {},

package/dist/index.mjs

@@ -1943,6 +1943,30 @@ import React, { useEffect, useRef } from "react";
 })();
 
 // src/index.jsx
+(function _preloadKitCache() {
+  if (typeof window === "undefined" || typeof localStorage === "undefined") return;
+  try {
+    const W = window.__viconic = window.__viconic || {};
+    W.icons = W.icons || {};
+    const TTL = 3 * 24 * 60 * 60 * 1e3;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith("viconic:")) continue;
+      try {
+        const c = JSON.parse(localStorage.getItem(key));
+        if (c && c.d && Date.now() - c.t < TTL) {
+          for (const n in c.d) {
+            if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+            const svg = c.d[n];
+            if (!W.icons[n]) W.icons[n] = svg;
+          }
+        }
+      } catch (e) {
+      }
+    }
+  } catch (e) {
+  }
+})();
 var _initializedKits = /* @__PURE__ */ new Set();
 function initViconic(options = {}) {
   const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
@@ -1978,52 +2002,56 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       prevNameRef.current = name;
     }
     const isKitIcon = name && name.startsWith("@");
-    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
-      window.CopyIcons.forceProcess(el);
-    }
-    let isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
-    const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
-    if (isKitIcon && !isLoaded && prefixMatch) {
-      const iconBaseName = prefixMatch[2];
-      try {
-        for (let i = 0; i < localStorage.length; i++) {
-          const key = localStorage.key(i);
-          if (key && key.startsWith("vi_kit_")) {
-            const raw = localStorage.getItem(key);
-            if (raw) {
-              const c = JSON.parse(raw);
-              if (c && c.d && c.d[iconBaseName]) {
-                el.innerHTML = c.d[iconBaseName];
-                el.classList.add("vi-ok", "svg-loaded");
-                isLoaded = true;
-                break;
-              }
-            }
-          }
+    const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+    function isInjected() {
+      return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
+    }
+    if (!isInjected()) {
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
         }
-      } catch (e) {
       }
     }
-    if (isLoaded) return;
-    let retries = 0;
-    const maxRetries = 100;
-    let hasTriggeredReload = false;
-    const timer = setInterval(() => {
-      retries++;
-      if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
-        clearInterval(timer);
-        return;
+    if (!isInjected() && !isKitIcon) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+        window.CopyIcons.forceProcess(el);
+      }
+    }
+    if (!isInjected() && el._u) {
+      el._u();
+    }
+    if (isInjected()) return;
+    function tryInjectFromEvent() {
+      if (isInjected()) return;
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+          return;
+        }
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
-        hasTriggeredReload = true;
+    }
+    document.addEventListener("viconic:ready", tryInjectFromEvent);
+    const fallbackTimer = setTimeout(() => {
+      if (isInjected()) return;
+      tryInjectFromEvent();
+      if (!isInjected() && isKitIcon && prefixMatch) {
         const prefix = prefixMatch[1];
         if (window.CopyIconsKit) {
-          for (const kitId in window.CopyIconsKit) {
-            const kit = window.CopyIconsKit[kitId];
+          for (const kId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kId];
             if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
               kit.reload();
               break;
@@ -2031,9 +2059,11 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (retries >= maxRetries) clearInterval(timer);
-    }, 100);
-    return () => clearInterval(timer);
+    }, 500);
+    return () => {
+      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      clearTimeout(fallbackTimer);
+    };
   }, [name, className, size, color, style]);
   const combinedStyle = {
     ...size ? { fontSize: size } : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.1.8",
+  "version": "1.4.0",
   "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

@@ -51,12 +51,12 @@
     // already successfully injected. We intercept define() to patch _u()
     // so it skips elements that Smart Loader has already handled.
     const _origCEDefine = customElements.define.bind(customElements);
-    customElements.define = function(name, cls, opts) {
+    customElements.define = function (name, cls, opts) {
         if (name === 'viconic-icon' && cls && cls.prototype) {
             // Patch _u() to skip elements already handled by Smart Loader
             if (cls.prototype._u) {
                 const origU = cls.prototype._u;
-                cls.prototype._u = function() {
+                cls.prototype._u = function () {
                     if (this.classList.contains('svg-loaded')) return;
                     return origU.call(this);
                 };
@@ -64,7 +64,7 @@
             // Patch connectedCallback to also guard svg-loaded
             if (cls.prototype.connectedCallback) {
                 const origCC = cls.prototype.connectedCallback;
-                cls.prototype.connectedCallback = function() {
+                cls.prototype.connectedCallback = function () {
                     if (this.classList.contains('svg-loaded')) return;
                     return origCC.call(this);
                 };
@@ -771,13 +771,13 @@
                 const fillStyle = (originalFill === 'none') ? 'none' : 'currentColor';
                 svg.style.cssText = `width:1em;height:1em;fill:${fillStyle};display:inline-block;vertical-align:middle;`;
             }
-            
+
             if (element.getAttribute('animate') === 'trace') {
                 const isStrokeBased = (originalFill === 'none');
                 svg.style.setProperty('--trace-end-stroke', isStrokeBased ? 'currentColor' : 'transparent');
                 svg.style.setProperty('--trace-end-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '0px');
                 svg.style.setProperty('--trace-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '1px');
-                
+
                 const paths = svg.querySelectorAll('path, ellipse, circle, rect, polygon, polyline');
                 for (let i = 0; i < paths.length; i++) {
                     const p = paths[i];

package/src/index.jsx

@@ -1,6 +1,36 @@
 import React, { useEffect, useRef } from 'react';
 import './copyicons-smart-loader.js';
 
+// ============================================
+// PRE-LOAD KIT CACHE SYNCHRONOUSLY AT MODULE LEVEL
+// Same architecture as kit loader: read localStorage before any render
+// so icons are available instantly when components mount.
+// ============================================
+(function _preloadKitCache() {
+    if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
+    try {
+        const W = (window.__viconic = window.__viconic || {});
+        W.icons = W.icons || {};
+        const TTL = 3 * 24 * 60 * 60 * 1000; // 3 days
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (!key || !key.startsWith('viconic:')) continue;
+            try {
+                const c = JSON.parse(localStorage.getItem(key));
+                if (c && c.d && Date.now() - c.t < TTL) {
+                    // Register all icon name variants into W.icons
+                    for (const n in c.d) {
+                        if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+                        const svg = c.d[n];
+                        // Store by plain name so _u() can find it regardless of prefix
+                        if (!W.icons[n]) W.icons[n] = svg;
+                    }
+                }
+            } catch (e) { /* corrupted entry, skip */ }
+        }
+    } catch (e) { }
+})();
+
 // ============================================
 // Track initialized kits to avoid duplicate scripts
 // ============================================
@@ -37,14 +67,14 @@ export function initViconic(options = {}) {
 
     const script = document.createElement('script');
     script.id = scriptId;
-    
+
     // Add cache busting for development or specific version updates
     let url = `https://${cdnBase}/kits/${kitId}/loader.js`;
     if (version) {
         const vQuery = version === 'dev' ? Date.now() : version;
         url += `?v=${vQuery}`;
     }
-    
+
     script.src = url;
     script.async = true;
     document.head.appendChild(script);
@@ -72,73 +102,83 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         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) {
-            window.CopyIcons.forceProcess(el);
-        }
+        const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
 
-        // Path 2: Fast-path for Kit icons using local cache!
-        // The async <script> takes 100-300ms to download loader.js, causing a visible flash on Reloads.
-        // We eliminate this completely by intercepting the React effect and injecting SVGs directly from the browser's Cache at 0ms.
-        let isLoaded = el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
-        const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
+        function isInjected() {
+            return el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
+        }
 
-        if (isKitIcon && !isLoaded && prefixMatch) {
-            const iconBaseName = prefixMatch[2];
-            try {
-                for (let i = 0; i < localStorage.length; i++) {
-                    const key = localStorage.key(i);
-                    if (key && key.startsWith('vi_kit_')) {
-                        const raw = localStorage.getItem(key);
-                        if (raw) {
-                            const c = JSON.parse(raw);
-                            if (c && c.d && c.d[iconBaseName]) {
-                                el.innerHTML = c.d[iconBaseName];
-                                el.classList.add('vi-ok', 'svg-loaded');
-                                isLoaded = true;
-                                break;
-                            }
-                        }
-                    }
+        // --- PATH 1: Synchronous inject from W.icons (pre-loaded from localStorage at module init) ---
+        if (!isInjected()) {
+            const W = window.__viconic;
+            if (W && W.icons) {
+                // Try all key variants: iconBaseName, @prefix/name, prefix:name, prefix/name
+                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+                const svg = (iconBaseName && W.icons[iconBaseName])
+                    || (name && W.icons[name])
+                    || null;
+                if (svg) {
+                    el.innerHTML = svg;
+                    el.classList.add('vi-ok', 'svg-loaded');
                 }
-            } catch (e) {}
+            }
+        }
+
+        // --- PATH 2: Smart loader for system icons (prefix:name) ---
+        if (!isInjected() && !isKitIcon) {
+            if (window.CopyIcons && window.CopyIcons.forceProcess) {
+                window.CopyIcons.forceProcess(el);
+            }
         }
 
-        if (isLoaded) return;
-
-        let retries = 0;
-        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')) {
-                clearInterval(timer);
-                return;
+        // --- PATH 3: Custom element _u() call (kit loader registered element) ---
+        if (!isInjected() && el._u) {
+            el._u();
+        }
+
+        if (isInjected()) return;
+
+        // --- PATH 4: Event-driven — listen for viconic:ready fired by kit loader after register() ---
+        // Much faster than polling: icons appear the instant the loader finishes fetching them.
+        function tryInjectFromEvent() {
+            if (isInjected()) return;
+            const W = window.__viconic;
+            if (W && W.icons) {
+                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+                const svg = (iconBaseName && W.icons[iconBaseName])
+                    || (name && W.icons[name])
+                    || null;
+                if (svg) {
+                    el.innerHTML = svg;
+                    el.classList.add('vi-ok', 'svg-loaded');
+                    return;
+                }
             }
-            // Trigger custom element update
             if (el._u) el._u();
-            // Also try smart loader if it's not a kit icon
-            if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+            if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
                 window.CopyIcons.forceProcess(el);
             }
-            
-            // HMR / Missing Kit Icon Fallback: 
-            if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
-                hasTriggeredReload = true;
+        }
+
+        document.addEventListener('viconic:ready', tryInjectFromEvent);
+
+        // --- PATH 5: Short-deadline fallback (500ms) in case script already fired before we listened ---
+        const fallbackTimer = setTimeout(() => {
+            if (isInjected()) return;
+            tryInjectFromEvent();
+            // If still not loaded after 500ms, trigger kit reload once
+            if (!isInjected() && isKitIcon && prefixMatch) {
                 const prefix = prefixMatch[1];
                 if (window.CopyIconsKit) {
-                    for (const kitId in window.CopyIconsKit) {
-                        const kit = window.CopyIconsKit[kitId];
+                    for (const kId in window.CopyIconsKit) {
+                        const kit = window.CopyIconsKit[kId];
                         if (kit.config && kit.config.prefix === prefix && typeof kit.reload === 'function') {
                             kit.reload();
                             break;
@@ -146,11 +186,12 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
                     }
                 }
             }
-            
-            if (retries >= maxRetries) clearInterval(timer);
-        }, 100);
+        }, 500);
 
-        return () => clearInterval(timer);
+        return () => {
+            document.removeEventListener('viconic:ready', tryInjectFromEvent);
+            clearTimeout(fallbackTimer);
+        };
     }, [name, className, size, color, style]);
 
     const combinedStyle = {