viconic-react-icons 1.0.4 → 1.0.7

package/dist/index.js

@@ -222,7 +222,7 @@ var import_react = __toESM(require("react"));
     apiBase: (((_a = window.CONFIG) == null ? void 0 : _a.API_BASE) || ((_b = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _b.apiBase) || "https://api.viconic.io.vn").replace(/\/$/, ""),
     // Batch API for Iconify-style loading (by-prefix endpoint)
     batchApiBase: (((_c = window.CONFIG) == null ? void 0 : _c.BATCH_API_BASE) || ((_d = window.CONFIG) == null ? void 0 : _d.API_BASE) || ((_e = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _e.batchApiBase) || "https://api.viconic.io.vn").replace(/\/$/, ""),
-    cdnDomain: ((_f = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _f.cdnDomain) || ((_g = window.CONFIG) == null ? void 0 : _g.CDN_DOMAIN) || "pub-1f6e5603f8674e37b76ceac17e995ec3.r2.dev",
+    cdnDomain: ((_f = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _f.cdnDomain) || ((_g = window.CONFIG) == null ? void 0 : _g.CDN_DOMAIN) || "cdn.viconic.io.vn",
     // Custom domain for R2 CDN via Cloudflare edge (HTTP/2, edge cache)
     cdnCustomDomain: ((_h = window.CONFIG) == null ? void 0 : _h.CDN_CUSTOM_DOMAIN) || ((_i = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _i.cdnCustomDomain) || "",
     observe: (currentScript == null ? void 0 : currentScript.hasAttribute("data-observe")) ?? false,
@@ -1615,7 +1615,7 @@ var import_react = __toESM(require("react"));
                 line-height: 1;
                 width: 1em;
                 height: 1em;
-                opacity: 0;
+                
             }
             :where(viconic-icon).svg-loaded {
                 display: inline-flex !important;
@@ -1623,7 +1623,7 @@ var import_react = __toESM(require("react"));
                 justify-content: center;
                 background: none !important;
                 background-color: transparent !important;
-                opacity: 1;
+                
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
                 width: 1em;
@@ -1634,21 +1634,21 @@ var import_react = __toESM(require("react"));
                 width: 1em;
                 height: 1em;
             }
-            @keyframes ci-appear { from { opacity: 0; } to { opacity: 1; } }
-            :where(viconic-icon).svg-loaded:not(.cache-hit) { animation: ci-appear 0.12s ease-out; }
-            :where(viconic-icon).cache-hit { opacity: 1 !important; animation: none !important; }
-            i.cache-hit { animation: none !important; }
+             to {  } }
+            
+            
+            
             /* --- ANIMATION COMMENTED OUT START ---
             @keyframes ci-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-            @keyframes ci-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+            @keyframes ci-pulse { 0%, 100% {  } 50% { opacity: 0.4; } }
             @keyframes ci-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.4em); } 60% { transform: translateY(-0.2em); } }
             @keyframes ci-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); } 20%, 40%, 60%, 80% { transform: translateX(0.1em); } }
             @keyframes ci-flip { 0%, 100% { transform: perspective(400px) rotateY(0deg); } 50% { transform: perspective(400px) rotateY(180deg); } }
             @keyframes ci-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.25); } 70% { transform: scale(1); } }
-            @keyframes ci-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+            @keyframes ci-fade { 0%, 100% {  } 50% { opacity: 0.3; } }
             @keyframes ci-wobble { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
             @keyframes ci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3em); } }
-            @keyframes ci-trace { 0% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: var(--path-len, 400); } 50%, 60% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } 100% { fill-opacity: 1; stroke: var(--trace-end-stroke, transparent); stroke-width: var(--trace-end-stroke-width, 0); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } }
+            @keyframes ci-trace { 0% { fill- stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: var(--path-len, 400); } 50%, 60% { fill- stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } 100% { fill- stroke: var(--trace-end-stroke, transparent); stroke-width: var(--trace-end-stroke-width, 0); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } }
             :where(viconic-icon)[animate="spin"] { animation: ci-spin 1.5s linear infinite !important; }
             :where(viconic-icon)[animate="pulse"] { animation: ci-pulse 2s ease-in-out infinite !important; }
             :where(viconic-icon)[animate="bounce"] { animation: ci-bounce 1s ease infinite !important; }
@@ -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

@@ -188,7 +188,7 @@ import React, { useEffect, useRef } from "react";
     apiBase: (((_a = window.CONFIG) == null ? void 0 : _a.API_BASE) || ((_b = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _b.apiBase) || "https://api.viconic.io.vn").replace(/\/$/, ""),
     // Batch API for Iconify-style loading (by-prefix endpoint)
     batchApiBase: (((_c = window.CONFIG) == null ? void 0 : _c.BATCH_API_BASE) || ((_d = window.CONFIG) == null ? void 0 : _d.API_BASE) || ((_e = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _e.batchApiBase) || "https://api.viconic.io.vn").replace(/\/$/, ""),
-    cdnDomain: ((_f = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _f.cdnDomain) || ((_g = window.CONFIG) == null ? void 0 : _g.CDN_DOMAIN) || "pub-1f6e5603f8674e37b76ceac17e995ec3.r2.dev",
+    cdnDomain: ((_f = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _f.cdnDomain) || ((_g = window.CONFIG) == null ? void 0 : _g.CDN_DOMAIN) || "cdn.viconic.io.vn",
     // Custom domain for R2 CDN via Cloudflare edge (HTTP/2, edge cache)
     cdnCustomDomain: ((_h = window.CONFIG) == null ? void 0 : _h.CDN_CUSTOM_DOMAIN) || ((_i = currentScript == null ? void 0 : currentScript.dataset) == null ? void 0 : _i.cdnCustomDomain) || "",
     observe: (currentScript == null ? void 0 : currentScript.hasAttribute("data-observe")) ?? false,
@@ -1581,7 +1581,7 @@ import React, { useEffect, useRef } from "react";
                 line-height: 1;
                 width: 1em;
                 height: 1em;
-                opacity: 0;
+                
             }
             :where(viconic-icon).svg-loaded {
                 display: inline-flex !important;
@@ -1589,7 +1589,7 @@ import React, { useEffect, useRef } from "react";
                 justify-content: center;
                 background: none !important;
                 background-color: transparent !important;
-                opacity: 1;
+                
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
                 width: 1em;
@@ -1600,21 +1600,21 @@ import React, { useEffect, useRef } from "react";
                 width: 1em;
                 height: 1em;
             }
-            @keyframes ci-appear { from { opacity: 0; } to { opacity: 1; } }
-            :where(viconic-icon).svg-loaded:not(.cache-hit) { animation: ci-appear 0.12s ease-out; }
-            :where(viconic-icon).cache-hit { opacity: 1 !important; animation: none !important; }
-            i.cache-hit { animation: none !important; }
+             to {  } }
+            
+            
+            
             /* --- ANIMATION COMMENTED OUT START ---
             @keyframes ci-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-            @keyframes ci-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+            @keyframes ci-pulse { 0%, 100% {  } 50% { opacity: 0.4; } }
             @keyframes ci-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.4em); } 60% { transform: translateY(-0.2em); } }
             @keyframes ci-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); } 20%, 40%, 60%, 80% { transform: translateX(0.1em); } }
             @keyframes ci-flip { 0%, 100% { transform: perspective(400px) rotateY(0deg); } 50% { transform: perspective(400px) rotateY(180deg); } }
             @keyframes ci-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.25); } 70% { transform: scale(1); } }
-            @keyframes ci-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+            @keyframes ci-fade { 0%, 100% {  } 50% { opacity: 0.3; } }
             @keyframes ci-wobble { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
             @keyframes ci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3em); } }
-            @keyframes ci-trace { 0% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: var(--path-len, 400); } 50%, 60% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } 100% { fill-opacity: 1; stroke: var(--trace-end-stroke, transparent); stroke-width: var(--trace-end-stroke-width, 0); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } }
+            @keyframes ci-trace { 0% { fill- stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: var(--path-len, 400); } 50%, 60% { fill- stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } 100% { fill- stroke: var(--trace-end-stroke, transparent); stroke-width: var(--trace-end-stroke-width, 0); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } }
             :where(viconic-icon)[animate="spin"] { animation: ci-spin 1.5s linear infinite !important; }
             :where(viconic-icon)[animate="pulse"] { animation: ci-pulse 2s ease-in-out infinite !important; }
             :where(viconic-icon)[animate="bounce"] { animation: ci-bounce 1s ease infinite !important; }
@@ -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,9 +1,14 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Viconic Smart Icons loader for React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts"
+  ],
   "scripts": {
     "build": "tsup src/index.jsx --format cjs,esm --external react"
   },
@@ -19,6 +24,7 @@
   "license": "MIT",
   "types": "index.d.ts",
   "devDependencies": {
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }
 }

package/src/copyicons-smart-loader.js

@@ -168,7 +168,7 @@
         apiBase: (window.CONFIG?.API_BASE || currentScript?.dataset?.apiBase || 'https://api.viconic.io.vn').replace(/\/$/, ''),
         // Batch API for Iconify-style loading (by-prefix endpoint)
         batchApiBase: (window.CONFIG?.BATCH_API_BASE || window.CONFIG?.API_BASE || currentScript?.dataset?.batchApiBase || 'https://api.viconic.io.vn').replace(/\/$/, ''),
-        cdnDomain: currentScript?.dataset?.cdnDomain || window.CONFIG?.CDN_DOMAIN || 'pub-1f6e5603f8674e37b76ceac17e995ec3.r2.dev',
+        cdnDomain: currentScript?.dataset?.cdnDomain || window.CONFIG?.CDN_DOMAIN || 'cdn.viconic.io.vn',
         // Custom domain for R2 CDN via Cloudflare edge (HTTP/2, edge cache)
         cdnCustomDomain: window.CONFIG?.CDN_CUSTOM_DOMAIN || currentScript?.dataset?.cdnCustomDomain || '',
         observe: currentScript?.hasAttribute('data-observe') ?? false,

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