viconic-react-icons 1.1.5 → 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 {
@@ -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);

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

package/package.json

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

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