From c86b9d373999b50dfcfba2665804eeb28c9bbb85 Mon Sep 17 00:00:00 2001
From: Yannick <yannick.franssen@outlook.com>
Date: Thu, 1 Feb 2024 10:33:40 +0100
Subject: [PATCH] Fix overwrite of css variables

---
 src/ValkyrieIcon.tsx | 37 ++++++++++++++++---------------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
index 03026c7a..5e22f3c0 100644
--- 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>