viconic-react-icons 1.1.4 → 1.1.6

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 {
@@ -54,12 +54,21 @@ var import_react = __toESM(require("react"));
   }
   const _origCEDefine = customElements.define.bind(customElements);
   customElements.define = function(name, cls, opts) {
-    if (name === "viconic-icon" && cls && cls.prototype && cls.prototype._u) {
-      const origU = cls.prototype._u;
-      cls.prototype._u = function() {
-        if (this.classList.contains("svg-loaded")) return;
-        return origU.call(this);
-      };
+    if (name === "viconic-icon" && cls && cls.prototype) {
+      if (cls.prototype._u) {
+        const origU = cls.prototype._u;
+        cls.prototype._u = function() {
+          if (this.classList.contains("svg-loaded")) return;
+          return origU.call(this);
+        };
+      }
+      if (cls.prototype.connectedCallback) {
+        const origCC = cls.prototype.connectedCallback;
+        cls.prototype.connectedCallback = function() {
+          if (this.classList.contains("svg-loaded")) return;
+          return origCC.call(this);
+        };
+      }
     }
     return _origCEDefine(name, cls, opts);
   };
@@ -1994,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);

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 {
@@ -19,12 +19,21 @@ import React, { useEffect, useRef } from "react";
   }
   const _origCEDefine = customElements.define.bind(customElements);
   customElements.define = function(name, cls, opts) {
-    if (name === "viconic-icon" && cls && cls.prototype && cls.prototype._u) {
-      const origU = cls.prototype._u;
-      cls.prototype._u = function() {
-        if (this.classList.contains("svg-loaded")) return;
-        return origU.call(this);
-      };
+    if (name === "viconic-icon" && cls && cls.prototype) {
+      if (cls.prototype._u) {
+        const origU = cls.prototype._u;
+        cls.prototype._u = function() {
+          if (this.classList.contains("svg-loaded")) return;
+          return origU.call(this);
+        };
+      }
+      if (cls.prototype.connectedCallback) {
+        const origCC = cls.prototype.connectedCallback;
+        cls.prototype.connectedCallback = function() {
+          if (this.classList.contains("svg-loaded")) return;
+          return origCC.call(this);
+        };
+      }
     }
     return _origCEDefine(name, cls, opts);
   };
@@ -1959,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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 {
@@ -52,13 +52,23 @@
     // so it skips elements that Smart Loader has already handled.
     const _origCEDefine = customElements.define.bind(customElements);
     customElements.define = function(name, cls, opts) {
-        if (name === 'viconic-icon' && cls && cls.prototype && cls.prototype._u) {
-            const origU = cls.prototype._u;
-            cls.prototype._u = function() {
-                // If Smart Loader already injected SVG, don't touch this element
-                if (this.classList.contains('svg-loaded')) return;
-                return origU.call(this);
-            };
+        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() {
+                    if (this.classList.contains('svg-loaded')) return;
+                    return origU.call(this);
+                };
+            }
+            // Patch connectedCallback to also guard svg-loaded
+            if (cls.prototype.connectedCallback) {
+                const origCC = cls.prototype.connectedCallback;
+                cls.prototype.connectedCallback = function() {
+                    if (this.classList.contains('svg-loaded')) return;
+                    return origCC.call(this);
+                };
+            }
         }
         return _origCEDefine(name, cls, opts);
     };

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) {