viconic-react-icons 1.1.0 → 1.1.2

package/dist/index.js

@@ -171,6 +171,17 @@ var import_react = __toESM(require("react"));
   }
   function parseViconicIcon(attrValue) {
     if (!attrValue) return null;
+    if (attrValue.startsWith("@")) {
+      const slashIdx = attrValue.indexOf("/");
+      if (slashIdx > 1) {
+        const prefix2 = attrValue.slice(1, slashIdx).trim();
+        const name = attrValue.slice(slashIdx + 1).trim();
+        if (prefix2 && name) {
+          return { prefix: prefix2, iconName: camelToKebab(name), isKit: true };
+        }
+      }
+      return null;
+    }
     const colonIdx = attrValue.indexOf(":");
     if (colonIdx < 1) return null;
     const prefix = attrValue.slice(0, colonIdx).trim();
@@ -815,8 +826,9 @@ var import_react = __toESM(require("react"));
   function registerViconicIcon(el) {
     if (!el || el.nodeType !== 1) return;
     if (processedElements.has(el)) return;
-    processedElements.add(el);
     const iconAttr = el.getAttribute("icon");
+    if (iconAttr && iconAttr.startsWith("@")) return;
+    processedElements.add(el);
     const parsed = parseViconicIcon(iconAttr);
     if (!parsed) {
       if (iconAttr) console.warn(`[CopyIcons] \u26A0\uFE0F Cannot parse viconic-icon icon="${iconAttr}"`);
@@ -1946,7 +1958,8 @@ var import_react = __toESM(require("react"));
 
 // src/index.jsx
 var _initializedKits = /* @__PURE__ */ new Set();
-function initViconic({ kitId, cdnBase = "cdn.viconic.dev" }) {
+function initViconic(options = {}) {
+  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -1958,7 +1971,12 @@ function initViconic({ kitId, cdnBase = "cdn.viconic.dev" }) {
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
   script.id = scriptId;
-  script.src = `https://${cdnBase}/kits/${kitId}/loader.js`;
+  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);
 }
@@ -1967,7 +1985,8 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   (0, import_react.useEffect)(() => {
     const el = iconRef.current;
     if (!el) return;
-    if (window.CopyIcons && window.CopyIcons.forceProcess) {
+    const isKitIcon = name && name.startsWith("@");
+    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
       window.CopyIcons.forceProcess(el);
     }
     const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
@@ -1981,7 +2000,7 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
         return;
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
         window.CopyIcons.forceProcess(el);
       }
       if (retries >= maxRetries) clearInterval(timer);

package/dist/index.mjs

@@ -136,6 +136,17 @@ import React, { useEffect, useRef } from "react";
   }
   function parseViconicIcon(attrValue) {
     if (!attrValue) return null;
+    if (attrValue.startsWith("@")) {
+      const slashIdx = attrValue.indexOf("/");
+      if (slashIdx > 1) {
+        const prefix2 = attrValue.slice(1, slashIdx).trim();
+        const name = attrValue.slice(slashIdx + 1).trim();
+        if (prefix2 && name) {
+          return { prefix: prefix2, iconName: camelToKebab(name), isKit: true };
+        }
+      }
+      return null;
+    }
     const colonIdx = attrValue.indexOf(":");
     if (colonIdx < 1) return null;
     const prefix = attrValue.slice(0, colonIdx).trim();
@@ -780,8 +791,9 @@ import React, { useEffect, useRef } from "react";
   function registerViconicIcon(el) {
     if (!el || el.nodeType !== 1) return;
     if (processedElements.has(el)) return;
-    processedElements.add(el);
     const iconAttr = el.getAttribute("icon");
+    if (iconAttr && iconAttr.startsWith("@")) return;
+    processedElements.add(el);
     const parsed = parseViconicIcon(iconAttr);
     if (!parsed) {
       if (iconAttr) console.warn(`[CopyIcons] \u26A0\uFE0F Cannot parse viconic-icon icon="${iconAttr}"`);
@@ -1911,7 +1923,8 @@ import React, { useEffect, useRef } from "react";
 
 // src/index.jsx
 var _initializedKits = /* @__PURE__ */ new Set();
-function initViconic({ kitId, cdnBase = "cdn.viconic.dev" }) {
+function initViconic(options = {}) {
+  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -1923,7 +1936,12 @@ function initViconic({ kitId, cdnBase = "cdn.viconic.dev" }) {
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
   script.id = scriptId;
-  script.src = `https://${cdnBase}/kits/${kitId}/loader.js`;
+  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);
 }
@@ -1932,7 +1950,8 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   useEffect(() => {
     const el = iconRef.current;
     if (!el) return;
-    if (window.CopyIcons && window.CopyIcons.forceProcess) {
+    const isKitIcon = name && name.startsWith("@");
+    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
       window.CopyIcons.forceProcess(el);
     }
     const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
@@ -1946,7 +1965,7 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
         return;
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
         window.CopyIcons.forceProcess(el);
       }
       if (retries >= maxRetries) clearInterval(timer);

package/index.d.ts

@@ -5,6 +5,8 @@ export interface InitViconicOptions {
     kitId: string;
     /** Custom CDN domain (default: 'cdn.viconic.dev') */
     cdnBase?: string;
+    /** Optional version of the kit to load */
+    version?: string | number;
 }
 
 /**

package/package.json

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

@@ -110,6 +110,18 @@
 
     function parseViconicIcon(attrValue) {
         if (!attrValue) return null;
+        // Support @prefix/name format (kit icons)
+        if (attrValue.startsWith('@')) {
+            const slashIdx = attrValue.indexOf('/');
+            if (slashIdx > 1) {
+                const prefix = attrValue.slice(1, slashIdx).trim();
+                const name = attrValue.slice(slashIdx + 1).trim();
+                if (prefix && name) {
+                    return { prefix, iconName: camelToKebab(name), isKit: true };
+                }
+            }
+            return null;
+        }
         const colonIdx = attrValue.indexOf(':');
         if (colonIdx < 1) return null;
         const prefix = attrValue.slice(0, colonIdx).trim();
@@ -761,9 +773,13 @@
     function registerViconicIcon(el) {
         if (!el || el.nodeType !== 1) return;
         if (processedElements.has(el)) return;
-        processedElements.add(el);
 
         const iconAttr = el.getAttribute('icon');
+        // Skip @prefix/name format — these are kit icons, handled by kit loader CE
+        if (iconAttr && iconAttr.startsWith('@')) return;
+
+        processedElements.add(el);
+
         const parsed = parseViconicIcon(iconAttr);
         if (!parsed) {
             if (iconAttr) console.warn(`[CopyIcons] ⚠️ Cannot parse viconic-icon icon="${iconAttr}"`);

package/src/index.jsx

@@ -20,9 +20,10 @@ const _initializedKits = new Set();
  * 
  * initViconic({ kitId: '387a6161-cb39-411f-8f13-29a5813e4efd' });
  * // Multiple kits:
- * initViconic({ kitId: 'another-kit-uuid' });
+ * initViconic({ kitId: 'another-kit-uuid', version: '1.0' });
  */
-export function initViconic({ kitId, cdnBase = 'cdn.viconic.dev' }) {
+export function initViconic(options = {}) {
+    const { kitId, cdnBase = 'cdn.viconic.dev', version } = options;
     if (typeof window === 'undefined') return; // SSR guard
     if (!kitId) {
         console.warn('[Viconic] initViconic requires a kitId');
@@ -36,7 +37,15 @@ export function initViconic({ kitId, cdnBase = 'cdn.viconic.dev' }) {
 
     const script = document.createElement('script');
     script.id = scriptId;
-    script.src = `https://${cdnBase}/kits/${kitId}/loader.js`;
+    
+    // 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);
 }
@@ -62,7 +71,8 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         if (!el) return;
 
         // Path 1: Smart loader (system icons with prefix:name format)
-        if (window.CopyIcons && window.CopyIcons.forceProcess) {
+        const isKitIcon = name && name.startsWith('@');
+        if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
             window.CopyIcons.forceProcess(el);
         }
 
@@ -82,8 +92,8 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
             }
             // Trigger custom element update
             if (el._u) el._u();
-            // Also try smart loader
-            if (window.CopyIcons && window.CopyIcons.forceProcess) {
+            // Also try smart loader if it's not a kit icon
+            if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
                 window.CopyIcons.forceProcess(el);
             }
             if (retries >= maxRetries) clearInterval(timer);