Update rotate property, fix incorrect prefix

Author: Studio384

amicons/src/Amicon.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 
 interface AmiconProps {
   icon: IAmicon;
-  rotate?: 0 | 90 | 180 | 270 | false;
+  rotate?: number | false;
   flip?: true | "x" | "y" | false;
   spin?: boolean | "pulse";
   beat?: boolean;
@@ -21,23 +21,27 @@ export default function AmiconIcon({
   fade = undefined,
   bounce = undefined,
   className,
+  style,
   ...props
 }: AmiconProps & ComponentPropsWithoutRef<"span">) {
+  const rotateStyle =
+    rotate !== undefined && rotate !== false
+      ? ({ "--ai-rotate": `${rotate}deg` } as React.CSSProperties)
+      : {};
+
   return (
     <span
-      className={clsx(className, "vi-icon", {
-        ["vi-rotate-90"]: rotate === 90,
-        ["vi-rotate-180"]: rotate === 180,
-        ["vi-rotate-270"]: rotate === 270,
-        ["vi-flip-x"]: flip === "x",
-        ["vi-flip-y"]: flip === "y",
-        ["vi-flip"]: flip === true,
-        ["vi-spin"]: spin === true,
-        ["vi-spin vi-spin-pulse"]: spin === "pulse",
-        ["vi-beat"]: beat,
-        ["vi-fade"]: fade,
-        ["vi-bounce"]: bounce,
+      className={clsx(className, "ai-icon", {
+        ["ai-flip-x"]: flip === "x",
+        ["ai-flip-y"]: flip === "y",
+        ["ai-flip"]: flip === true,
+        ["ai-spin"]: spin === true,
+        ["ai-spin ai-spin-pulse"]: spin === "pulse",
+        ["ai-beat"]: beat,
+        ["ai-fade"]: fade,
+        ["ai-bounce"]: bounce,
       })}
+      style={{ ...rotateStyle, ...style }}
       dangerouslySetInnerHTML={{ __html: icon.data }}
       {...props}
     />

amicons/src/amicons.css

@@ -13,7 +13,7 @@
     transform: scale(1);
   }
   45% {
-    transform: scale(var(--vi-animation-scale, 1.4));
+    transform: scale(var(--ai-animation-scale, 1.4));
   }
 }
 
@@ -23,7 +23,7 @@
     opacity: 1;
   }
   50% {
-    opacity: var(--vi-animation-opacity, 0.4);
+    opacity: var(--ai-animation-opacity, 0.4);
   }
 }
 
@@ -40,7 +40,7 @@
 }
 
 /* Base icon styling */
-.vi-icon {
+.ai-icon {
   height: 1em;
   width: 1em;
   min-width: 1em;
@@ -52,63 +52,49 @@
   vertical-align: 0;
   flex-shrink: 0;
   transition: inherit;
+  transform: rotate(var(--ai-rotate, 0deg));
 }
 
 /* Transform classes */
-.vi-rotate {
-  transition: transform var(--vi-transition-duration, 0.2s)
-    var(--vi-transition-timing-function, ease-in-out);
-}
-
-.vi-rotate-90 {
-  transform: rotate(90deg);
-}
-.vi-rotate-180 {
-  transform: rotate(180deg);
-}
-.vi-rotate-270 {
-  transform: rotate(270deg);
-}
-
-.vi-flip {
+.ai-flip {
   transform: scale(-1);
 }
-.vi-flip-x {
+.ai-flip-x {
   transform: scaleX(-1);
 }
-.vi-flip-y {
+.ai-flip-y {
   transform: scaleY(-1);
 }
 
 /* Animation classes */
-.vi-spin {
+.ai-spin {
   animation-name: spin-animation;
-  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-timing-function: var(--ai-animation-timing-function, linear);
+  animation-duration: var(--ai-animation-duration, 2s);
+  animation-iteration-count: var(--ai-animation-iteration-count, infinite);
 }
 
-.vi-spin-pulse {
-  --vi-animation-timing-function: steps(var(--vi-animation-pulse-steps, 8));
-  --vi-animation-duration: 1s;
+.ai-spin-pulse {
+  --ai-animation-timing-function: steps(var(--ai-animation-pulse-steps, 8));
+  --ai-animation-duration: 1s;
 }
 
-.vi-beat {
+.ai-beat {
   animation-name: beat-animation;
-  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);
+  animation-timing-function: var(--ai-animation-timing-function, ease-in-out);
+  animation-duration: var(--ai-animation-duration, 1s);
+  animation-iteration-count: var(--ai-animation-iteration-count, infinite);
 }
 
-.vi-fade {
+.ai-fade {
   animation-name: fade-animation;
-  animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
-  animation-duration: var(--vi-animation-duration, 1.5s);
-  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
+  animation-timing-function: var(--ai-animation-timing-function, ease-in-out);
+  animation-duration: var(--ai-animation-duration, 1.5s);
+  animation-iteration-count: var(--ai-animation-iteration-count, infinite);
 }
 
-.vi-bounce {
+.ai-bounce {
   animation-name: bounce-animation;
-  animation-duration: var(--vi-animation-duration, 1s);
-  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
+  animation-duration: var(--ai-animation-duration, 1s);
+  animation-iteration-count: var(--ai-animation-iteration-count, infinite);
 }

docs/src/app/Docs/pages/Changelog.tsx

@@ -12,10 +12,14 @@ export default function Changelog() {
         version="1.0.0-alpha.12"
         date="March 2026"
         changed={[
+          <>
+            Rotate now allows you to set any numeric value rather than just <Code>0</Code>, <Code>90</Code>, <Code>180</Code>, or <Code>270</Code>.
+          </>,
           <>
             Amicons now only has 1 dependency as we've dropper <Code>html-react-parser</Code>.
           </>
         ]}
+        fixed={[<>Fixes a bug where variables and classes used the wrong prefix.</>]}
       />
       <Release
         name="Amicons 1.0 alpha 11"

docs/src/app/Docs/pages/Rotate.tsx

@@ -15,7 +15,7 @@ export default function PageRotate() {
         label: 'Rotate',
         type: 'chip',
         name: 'rotate',
-        values: [0, 90, 180, 270, false],
+        values: [0, 45, 90, 135, 180, 225, 270, 315, false],
         default: 90
       }
     ],
@@ -37,7 +37,7 @@ export default function PageRotate() {
     <Stack gap={2}>
       <Typography level="h2">Rotate</Typography>
       <Typography>
-        With the <Code>rotate</Code> property you can change the default rotation of your icon.
+        With the <Code>rotate</Code> property you can change the default rotation of your icon. You can pass any numeric degree value for full flexibility.
       </Typography>
 
       <Playground config={playgroundConfig} />