viconic-react-icons 1.0.1 → 1.0.3

package/README.md

@@ -56,7 +56,6 @@ export default App;
 | `name` | `string` | `undefined` | **Required.** The unique icon ID (e.g. `lucide:activity`, `h2:0`). |
 | `className` | `string` | `""` | Standard CSS class names (great for Tailwind). |
 | `style` | `React.CSSProperties` | `{}` | Inline CSS styling. |
-| `animate` | `string` | `undefined` | Optional built-in animation keyword. |
 | `...props` | `HTMLAttributes` | | Spread standard HTML attributes (e.g. `onClick`, `title`). |
 
 ## Architecture
@@ -68,4 +67,4 @@ Because we fetch SVGs in parallel and cache them across user sessions, your fron
 ## License
 
 This project is licensed under the MIT License. Icon licenses depend on the specific icon families you request.
-
+

package/dist/index.js

@@ -1934,19 +1934,18 @@ var import_react = __toESM(require("react"));
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, animate, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, ...props }) => {
   const iconRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, animate, className]);
+  }, [name, className]);
   return /* @__PURE__ */ import_react.default.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
-      animate,
       class: className,
       style,
       ...props

package/dist/index.mjs

@@ -1900,19 +1900,18 @@ import React, { useEffect, useRef } from "react";
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, animate, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, ...props }) => {
   const iconRef = useRef(null);
   useEffect(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, animate, className]);
+  }, [name, className]);
   return /* @__PURE__ */ React.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
-      animate,
       class: className,
       style,
       ...props

package/index.d.ts

@@ -3,14 +3,10 @@ import * as React from 'react';
 export interface ViconicIconProps extends React.HTMLAttributes<HTMLElement> {
     /** The unique icon ID (e.g., 'lucide:activity', 'h2:0'). Required. */
     name: string;
-    /** Optional built-in animation keyword. */
-    animate?: string;
-    /** Standard CSS class names. */
-    className?: string;
-    /** Inline CSS styling. */
+
     style?: React.CSSProperties;
 }
 
 export const ViconicIcon: React.FC<ViconicIconProps>;
 export default ViconicIcon;
-
+

package/package.json

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

package/src/copyicons-smart-loader.js

@@ -1783,7 +1783,7 @@
                 line-height: 1;
                 width: 1em;
                 height: 1em;
-                opacity: 0;
+                
             }
             :where(viconic-icon).svg-loaded {
                 display: inline-flex !important;
@@ -1791,7 +1791,7 @@
                 justify-content: center;
                 background: none !important;
                 background-color: transparent !important;
-                opacity: 1;
+                
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
                 width: 1em;
@@ -1802,21 +1802,21 @@
                 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; }

package/src/index.jsx

@@ -1,20 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import './copyicons-smart-loader.js';
 
-export const ViconicIcon = ({ name, animate, className, style, ...props }) => {
+export const ViconicIcon = ({ name, className, style, ...props }) => { 
     const iconRef = useRef(null);
 
     useEffect(() => {
         if (window.CopyIcons && iconRef.current) {
             window.CopyIcons.forceProcess(iconRef.current);
         }
-    }, [name, animate, className]);
+    }, [name, className]);
 
     return (
         <viconic-icon
             ref={iconRef}
             icon={name}
-            animate={animate}
             class={className}
             style={style}
             {...props}
@@ -22,4 +21,4 @@ export const ViconicIcon = ({ name, animate, className, style, ...props }) => {
     );
 };
 
-export default ViconicIcon;
+export default ViconicIcon;