viconic-react-icons 1.0.6 → 1.0.7

package/dist/index.js

@@ -1934,20 +1934,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

@@ -1900,20 +1900,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.7",
   "description": "Viconic Smart Icons loader for React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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