viconic-react-icons 1.0.6 → 1.0.8

package/dist/index.js

@@ -758,9 +758,19 @@ var import_react = __toESM(require("react"));
         });
       }
       if (scopedContent.includes("id=")) {
-        scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}-$1"`);
-        scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}-$1)`);
-        scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}-$1"`);
+        const ids = [];
+        scopedContent.replace(/id="([^"]+)"/gi, (m, id) => {
+          ids.push(id);
+          return m;
+        });
+        scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}_$1"`);
+        scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}_$1)`);
+        scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}_$1"`);
+        if (ids.length > 0) {
+          const escapedIds = ids.map((id) => id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+          const eventRe = new RegExp(`(["';\\s])(${escapedIds})\\.([a-zA-Z]+)`, "g");
+          scopedContent = scopedContent.replace(eventRe, `$1${uid}_$2.$3`);
+        }
       }
     }
     element.innerHTML = scopedContent;
@@ -1934,20 +1944,25 @@ var import_react = __toESM(require("react"));
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   const iconRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, className]);
+  }, [name, className, size, color, style]);
+  const combinedStyle = {
+    ...size ? { fontSize: size } : {},
+    ...color ? { color } : {},
+    ...style
+  };
   return /* @__PURE__ */ import_react.default.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
       class: className,
-      style,
+      style: combinedStyle,
       ...props
     }
   );

package/dist/index.mjs

@@ -724,9 +724,19 @@ import React, { useEffect, useRef } from "react";
         });
       }
       if (scopedContent.includes("id=")) {
-        scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}-$1"`);
-        scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}-$1)`);
-        scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}-$1"`);
+        const ids = [];
+        scopedContent.replace(/id="([^"]+)"/gi, (m, id) => {
+          ids.push(id);
+          return m;
+        });
+        scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}_$1"`);
+        scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}_$1)`);
+        scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}_$1"`);
+        if (ids.length > 0) {
+          const escapedIds = ids.map((id) => id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+          const eventRe = new RegExp(`(["';\\s])(${escapedIds})\\.([a-zA-Z]+)`, "g");
+          scopedContent = scopedContent.replace(eventRe, `$1${uid}_$2.$3`);
+        }
       }
     }
     element.innerHTML = scopedContent;
@@ -1900,20 +1910,25 @@ import React, { useEffect, useRef } from "react";
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
   const iconRef = useRef(null);
   useEffect(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, className]);
+  }, [name, className, size, color, style]);
+  const combinedStyle = {
+    ...size ? { fontSize: size } : {},
+    ...color ? { color } : {},
+    ...style
+  };
   return /* @__PURE__ */ React.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
       class: className,
-      style,
+      style: combinedStyle,
       ...props
     }
   );

package/index.d.ts

@@ -4,6 +4,12 @@ export interface ViconicIconProps extends React.HTMLAttributes<HTMLElement> {
     /** The unique icon ID (e.g., 'lucide:activity', 'h2:0'). Required. */
     name: string;
 
+    /** Optional icon size, CSS format (e.g., '24px', '1.5rem'). Translates to style.fontSize */
+    size?: string | number;
+
+    /** Optional icon color, CSS color value. Translates to style.color */
+    color?: string;
+
     style?: React.CSSProperties;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Viconic Smart Icons loader for React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/copyicons-smart-loader.js

@@ -683,11 +683,27 @@
                 });
             }
 
-            // 2. Scope generic IDs (clip-paths, gradients, masks)
+            // 2. Scope generic IDs (clip-paths, gradients, masks, and animate event references)
             if (scopedContent.includes('id=')) {
-                scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}-$1"`);
-                scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}-$1)`);
-                scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}-$1"`);
+                // First extract all IDs defined in this SVG
+                const ids = [];
+                scopedContent.replace(/id="([^"]+)"/gi, (m, id) => {
+                    ids.push(id);
+                    return m;
+                });
+
+                // Scope definitions & standard hash references
+                scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}_$1"`);
+                scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}_$1)`);
+                scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}_$1"`);
+
+                // Scope SMIL animation references like begin="id.end", end="0; id.begin+2s"
+                if (ids.length > 0) {
+                    const escapedIds = ids.map(id => id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+                    // Matches " or ; or ' or space before the ID, and .eventName after
+                    const eventRe = new RegExp(`(["';\\s])(${escapedIds})\\.([a-zA-Z]+)`, 'g');
+                    scopedContent = scopedContent.replace(eventRe, `$1${uid}_$2.$3`);
+                }
             }
         }
 

package/src/index.jsx

@@ -1,21 +1,27 @@
 import React, { useEffect, useRef } from 'react';
 import './copyicons-smart-loader.js';
 
-export const ViconicIcon = ({ name, className, style, ...props }) => { 
+export const ViconicIcon = ({ name, className, style, size, color, ...props }) => { 
     const iconRef = useRef(null);
 
     useEffect(() => {
         if (window.CopyIcons && iconRef.current) {
             window.CopyIcons.forceProcess(iconRef.current);
         }
-    }, [name, className]);
+    }, [name, className, size, color, style]);
+
+    const combinedStyle = {
+        ...(size ? { fontSize: size } : {}),
+        ...(color ? { color: color } : {}),
+        ...style
+    };
 
     return (
         <viconic-icon
             ref={iconRef}
             icon={name}
             class={className}
-            style={style}
+            style={combinedStyle}
             {...props}
         ></viconic-icon>
     );