feat(icons): add withSpin HOC for spinning icon variants

Adds a reusable higher-order component that wraps any icon to apply
a continuous CSS rotation animation, useful for loading indicators.

Author: wangdicoder

packages/icons/src/__tests__/icons.test.tsx

@@ -1,6 +1,6 @@
 import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
-import { IconClose, IconPlus, IconSearch, IconHeart, IconStar } from '../index';
+import { IconClose, IconPlus, IconSearch, IconHeart, IconStar, withSpin } from '../index';
 
 const sampleIcons = [
   { name: 'IconClose', Component: IconClose },
@@ -71,4 +71,46 @@ describe('Icon components', () => {
     expect(svg.getAttribute('data-testid')).toBe('close-icon');
     expect(svg.getAttribute('aria-hidden')).toBe('true');
   });
+
+});
+
+describe('withSpin HOC', () => {
+  const SpinClose = withSpin(IconClose);
+
+  it('applies spin animation style', () => {
+    const { container } = render(<SpinClose />);
+    const svg = container.querySelector('svg')!;
+    expect(svg.style.animation).toBe('tiny-icon-spin 1s linear infinite');
+  });
+
+  it('injects keyframes style tag into document head', () => {
+    render(<SpinClose />);
+    const styleEl = document.getElementById('__tiny_icon_spin__');
+    expect(styleEl).toBeTruthy();
+    expect(styleEl!.textContent).toContain('@keyframes tiny-icon-spin');
+  });
+
+  it('passes through icon props', () => {
+    const { container } = render(<SpinClose size={24} color="red" />);
+    const svg = container.querySelector('svg')!;
+    expect(svg.getAttribute('width')).toBe('24');
+    expect(svg.getAttribute('fill')).toBe('red');
+  });
+
+  it('merges custom style with spin animation', () => {
+    const { container } = render(<SpinClose style={{ color: 'red' }} />);
+    const svg = container.querySelector('svg')!;
+    expect(svg.style.animation).toBe('tiny-icon-spin 1s linear infinite');
+    expect(svg.style.color).toBe('red');
+  });
+
+  it('forwards ref', () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<SpinClose ref={ref} />);
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+  });
+
+  it('sets displayName', () => {
+    expect(SpinClose.displayName).toBe('withSpin(IconClose)');
+  });
 });

packages/icons/src/index.ts

@@ -1,4 +1,5 @@
 export type { IconProps } from './types';
+export { withSpin } from './with-spin';
 
 export { IconLoader } from './icon-loader';
 export { IconLoader3quarter } from './icon-loader-3quarter';

packages/icons/src/with-spin.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, useRef, type ForwardRefExoticComponent, type RefAttributes, type CSSProperties } from 'react';
+import type { IconProps } from './types';
+
+type IconComponent = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+const STYLE_ID = '__tiny_icon_spin__';
+
+function ensureKeyframes() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent =
+    '@keyframes tiny-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+  document.head.appendChild(style);
+}
+
+const spinStyle: CSSProperties = { animation: 'tiny-icon-spin 1s linear infinite' };
+
+export function withSpin(Icon: IconComponent): IconComponent {
+  const SpinIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+    const injected = useRef(false);
+    if (!injected.current) {
+      ensureKeyframes();
+      injected.current = true;
+    }
+
+    return (
+      <Icon
+        ref={ref}
+        {...props}
+        style={{ ...spinStyle, ...props.style }}
+      />
+    );
+  });
+
+  const name = Icon.displayName || 'Icon';
+  SpinIcon.displayName = `withSpin(${name})`;
+
+  return SpinIcon;
+}

packages/react/src/icon/demo/svg-spin.md

@@ -2,21 +2,22 @@
 
 ### Spin
 
-Add a CSS animation to rotate icons. Useful for loading indicators.
+Use the `withSpin` HOC to create a spinning variant of any icon. Useful for loading indicators.
 
 ```jsx live
 () => {
-  const spinStyle = {
-    animation: 'spin 1s linear infinite',
-  };
+  const SpinLoader = withSpin(IconLoader);
+  const SpinLoaderQuarter = withSpin(IconLoaderQuarter);
+  const SpinLoader3quarter = withSpin(IconLoader3quarter);
+  const SpinLoaderCircle = withSpin(IconLoaderCircle);
+  const SpinSync = withSpin(IconSync);
   return (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center', fontSize: 24 }}>
-      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
-      <IconLoader style={spinStyle} />
-      <IconLoaderQuarter style={spinStyle} />
-      <IconLoader3quarter style={spinStyle} />
-      <IconLoaderCircle style={spinStyle} />
-      <IconSync style={spinStyle} />
+      <SpinLoader />
+      <SpinLoaderQuarter />
+      <SpinLoader3quarter />
+      <SpinLoaderCircle />
+      <SpinSync />
     </div>
   );
 }

packages/react/src/icon/index.md

@@ -42,6 +42,18 @@ All icon components share the same props interface (`IconProps`), which extends
 | style     | inline styles                 | CSSProperties     | -               |
 | ref       | forwarded ref                 | Ref\<SVGSVGElement\> | -            |
 
+### withSpin
+
+A higher-order component that wraps any icon to add a continuous spin animation.
+
+```jsx
+import { IconLoader, withSpin } from '@tiny-design/icons';
+
+const SpinLoader = withSpin(IconLoader);
+
+<SpinLoader size={24} />
+```
+
 ## List of icons
 
 <SvgIconList />