Fix overwrite of css variables

sippy-platform · Feb 1, 2024 · c86b9d3 · c86b9d3
1 parent c94e7fd
commit c86b9d3
Showing 1 changed file with 16 additions and 21 deletions.
diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
@@ -54,7 +54,8 @@ export default function ValkyrieIcon({
 
   const rotateClass = css`
     transform: rotate(${rotate}deg);
-    transition: transform var(--vi-transition-duration, .2s) var(--vi-transition-timing-function, ease-in-out);
+    transition: transform var(--vi-transition-duration, 0.2s)
+      var(--vi-transition-timing-function, ease-in-out);
   `;
 
   const flipClass = css`
@@ -66,41 +67,35 @@ export default function ValkyrieIcon({
   `;
 
   const spinClass = css`
-    svg {
-      animation-name: ${spinAnimation};
-      animation-timing-function: var(--vi-animation-timing-function, linear);
-      animation-duration: var(--vi-animation-duration, 2s);
-      animation-iteration-count: var(--vi-animation-iteration-count, infinite);
-    }
+    animation-name: ${spinAnimation};
+    animation-timing-function: var(--vi-animation-timing-function, linear);
+    animation-duration: var(--vi-animation-duration, 2s);
+    animation-iteration-count: var(--vi-animation-iteration-count, infinite);
   `;
 
   const spinPulseClass = css`
-    svg {
-      --vi-animation-timing-function: steps(var(--vi-animation-pulse-steps, 8));
-      --vi-animation-duration: 1s;
-    }
-  `
+    --vi-animation-timing-function: steps(var(--vi-animation-pulse-steps, 8));
+    --vi-animation-duration: 1s;
+  `;
 
-  const beatClass = css `
-    svg {
-      animation-name: ${beatAnimation};
-      animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
-      animation-duration: var(--vi-animation-duration, 1s);
-      animation-iteration-count: var(--vi-animation-iteration-count, infinite);
-    }
+  const beatClass = css`
+    animation-name: ${beatAnimation};
+    animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
+    animation-duration: var(--vi-animation-duration, 1s);
+    animation-iteration-count: var(--vi-animation-iteration-count, infinite);
   `;
 
   return (
     <span
-      {...props}
       className={cx({
         [viClass]: true,
         [rotateClass]: rotate !== null && rotate !== undefined,
         [flipClass]: !!flip,
         [spinClass]: !!spin,
-        [spinPulseClass]: spin === 'pulse',
+        [spinPulseClass]: spin === "pulse",
         [beatClass]: beat
       })}
+      {...props}
     >
       {HTMLReactParser(icon.data)}
     </span>