viconic-react-icons 1.0.2 → 1.0.3

package/package.json

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