Allow classes to apply to the span element

sippy-platform · Oct 16, 2024 · 1a8bf73 · 1a8bf73
1 parent b98c61c
commit 1a8bf73
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/docs/src/app/Docs/pages/Changelog.tsx b/docs/src/app/Docs/pages/Changelog.tsx
@@ -11,6 +11,11 @@ export default function Changelog() {
         name="Valkyrie 1.0 alpha 49"
         version="1.0.0-alpha.49"
         date="17 October 2024"
+        added={[
+          <>
+            You can now apply <Code>className</Code> to the <Code>ValkyrieIcon</Code> component.
+          </>
+        ]}
         newIcons={['apple', 'moped', 'plate-utensils', 'receipt', 'shopping-cart', 'wallet', 'windows']}
         renamedIcons={[
           { old: 'thumbstack', new: 'thumbtack' },

diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
@@ -73,8 +73,8 @@ export default function ValkyrieIcon({
     transform: ${flip === "x"
       ? "scaleX(-1)"
       : flip === "y"
-      ? "scaleY(-1)"
-      : "scale(-1)"};
+        ? "scaleY(-1)"
+        : "scale(-1)"};
   `;
 
   const spinClass = css`
@@ -105,14 +105,14 @@ export default function ValkyrieIcon({
 
   return (
     <span
-      className={cx({
+      className={cx(className, {
         [viClass]: true,
         [rotateClass]: rotate !== null && rotate !== undefined,
         [flipClass]: !!flip,
         [spinClass]: !!spin,
         [spinPulseClass]: spin === "pulse",
         [beatClass]: beat,
-        [fadeClass]: fade
+        [fadeClass]: fade,
       })}
       {...props}
     >