refactor(icons): move withSpin HOC from icons to react package

Replace inline JS animation with CSS class (.ty-icon-spin) using the
existing ty-rotate keyframe from @tiny-design/tokens. Update docs to
reference the new @tiny-design/react import path.

Author: wangdicoder

packages/icons/README.md

@@ -39,10 +39,11 @@ All icons accept the following props (plus any standard SVG attributes):
 
 ### Spinning Icons
 
-Use the `withSpin` HOC to create spinning variants (useful for loaders):
+Use the `withSpin` HOC from `@tiny-design/react` to create spinning variants (useful for loaders):
 
 ```tsx
-import { IconLoader, withSpin } from '@tiny-design/icons';
+import { withSpin } from '@tiny-design/react';
+import { IconLoader } from '@tiny-design/icons';
 
 const SpinningLoader = withSpin(IconLoader);
 

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, withSpin } from '../index';
+import { IconClose, IconPlus, IconSearch, IconHeart, IconStar } from '../index';
 
 const sampleIcons = [
   { name: 'IconClose', Component: IconClose },
@@ -73,44 +73,3 @@ describe('Icon components', () => {
   });
 
 });
-
-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/with-spin.tsx

@@ -47,7 +47,8 @@ All icon components share the same props interface (`IconProps`), which extends
 A higher-order component that wraps any icon to add a continuous spin animation.
 
 ```jsx
-import { IconLoader, withSpin } from '@tiny-design/icons';
+import { withSpin } from '@tiny-design/react';
+import { IconLoader } from '@tiny-design/icons';
 
 const SpinLoader = withSpin(IconLoader);
 

packages/react/src/icon/index.md

@@ -80,6 +80,7 @@ export { default as Typography } from './typography';
 export { default as Upload } from './upload';
 
 export { withLocale } from './intl-provider/with-locale';
+export { withSpin } from './with-spin';
 export { en_US, zh_CN } from './locale';
 export type { Locale } from './locale';
 

packages/react/src/index.ts

@@ -75,3 +75,4 @@
 @use "../tree/style/index" as *;
 @use "../typography/style/index" as *;
 @use "../upload/style/index" as *;
+@use "../with-spin/style/index" as *;

packages/react/src/style/_component.scss

@@ -0,0 +1,38 @@
+import React, { createRef } from 'react';
+import { render } from '@testing-library/react';
+import { IconClose } from '@tiny-design/icons';
+import { withSpin } from '../with-spin';
+
+describe('withSpin HOC', () => {
+  const SpinClose = withSpin(IconClose);
+
+  it('applies ty-icon-spin CSS class', () => {
+    const { container } = render(<SpinClose />);
+    const svg = container.querySelector('svg')!;
+    expect(svg).toHaveClass('ty-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 className with existing className prop', () => {
+    const { container } = render(<SpinClose className="custom" />);
+    const svg = container.querySelector('svg')!;
+    expect(svg).toHaveClass('ty-icon-spin');
+    expect(svg).toHaveClass('custom');
+  });
+
+  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/react/src/with-spin/__tests__/with-spin.test.tsx

@@ -0,0 +1 @@
+export { withSpin } from './with-spin';

packages/react/src/with-spin/index.tsx

@@ -0,0 +1,5 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-icon-spin {
+  animation: ty-rotate 1s linear infinite;
+}

packages/react/src/with-spin/style/_index.scss

@@ -0,0 +1 @@
+import './index.scss';