refactor: remove icon dependency

Author: wangdicoder

packages/react/package.json

@@ -63,13 +63,13 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
-    "@tiny-design/icons": "workspace:*",
     "@tiny-design/tokens": "workspace:*",
     "classnames": "^2.3.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",
+    "@tiny-design/icons": "workspace:*",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.0.0",
     "@types/react": "^18.2.0",

packages/react/src/_utils/components.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { forwardRef, type SVGAttributes } from 'react';
 
 type IconProps = {
   className?: string;
   style?: React.CSSProperties;
   size?: number | string;
   color?: string;
 };
+
+/** Props compatible with @tiny-design/icons IconProps */
+export interface SvgIconProps extends SVGAttributes<SVGSVGElement> {
+  size?: string | number;
+  color?: string;
+}
 export const ArrowDown = (props: IconProps): React.ReactElement => {
   const { size = 20, color = 'currentcolor', ...otherProps } = props;
   return (
@@ -198,3 +204,45 @@ export const TreeArrow = (props: IconProps): React.ReactElement => {
     </svg>
   );
 };
+
+export const LeftIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
+  const { size = '1em', color = 'currentColor', className, style, ...rest } = props;
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 1024 1024"
+      width={size}
+      height={size}
+      fill={color}
+      className={className}
+      style={{ verticalAlign: 'middle', ...style }}
+      {...rest}
+    >
+      <g transform="translate(0, 896) scale(1, -1)">
+        <path d="M724 677.7V755c0 6.7-7.7 10.4-12.9 6.3L260.3 409.2c-16.4-12.8-16.4-37.5 0-50.3l450.8-352.1c5.3-4.1 12.9-0.4 12.9 6.3v77.3c0 4.9-2.3 9.6-6.1 12.6l-360 281 360 281.1c3.8 3 6.1 7.7 6.1 12.6z" />
+      </g>
+    </svg>
+  );
+});
+LeftIcon.displayName = 'LeftIcon';
+
+export const StarFillIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
+  const { size = '1em', color = 'currentColor', className, style, ...rest } = props;
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 1024 1024"
+      width={size}
+      height={size}
+      fill={color}
+      className={className}
+      style={{ verticalAlign: 'middle', ...style }}
+      {...rest}
+    >
+      <g transform="translate(0, 896) scale(1, -1)">
+        <path d="M908.1 542.9l-253.9 36.9L540.7 809.9c-3.1 6.3-8.2 11.4-14.5 14.5-15.8 7.8-35 1.3-42.9-14.5L369.8 579.8l-253.9-36.9c-7-1-13.4-4.3-18.3-9.3-12.3-12.7-12.1-32.9 0.6-45.3l183.7-179.1-43.4-252.9c-1.2-6.9-0.1-14.1 3.2-20.3 8.2-15.6 27.6-21.7 43.2-13.4L512 142l227.1-119.4c6.2-3.3 13.4-4.4 20.3-3.2 17.4 3 29.1 19.5 26.1 36.9l-43.4 252.9 183.7 179.1c5 4.9 8.3 11.3 9.3 18.3 2.7 17.5-9.5 33.7-27 36.3z" />
+      </g>
+    </svg>
+  );
+});
+StarFillIcon.displayName = 'StarFillIcon';

packages/react/src/layout/sidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState, useContext, useEffect } from 'react';
 import classNames from 'classnames';
-import { IconLeft } from '@tiny-design/icons';
+import { LeftIcon } from '../_utils/components';
 import { SidebarContext } from './sidebar-context';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -63,7 +63,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
 
       return (
         <button type="button" className={`${prefixCls}__trigger`} onClick={_collapseBtnOnClick} aria-label="Toggle sidebar">
-          <IconLeft className={`${prefixCls}__trigger-icon`} />
+          <LeftIcon className={`${prefixCls}__trigger-icon`} />
         </button>
       );
     };

packages/react/src/rate/rate.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import classNames from 'classnames';
-import { IconStarFill } from '@tiny-design/icons';
+import { StarFillIcon } from '../_utils/components';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { RateProps } from './types';
@@ -10,7 +10,7 @@ const Rate = React.forwardRef<HTMLUListElement, RateProps>(
   (props: RateProps, ref): JSX.Element => {
     const {
       color = '#FADB14',
-      character = <IconStarFill size={20} />,
+      character = <StarFillIcon size={20} />,
       clearable = true,
       half = false,
       count = 5,

packages/react/src/with-spin/__tests__/with-spin.test.tsx

@@ -1,10 +1,33 @@
 import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
-import { IconClose } from '@tiny-design/icons';
+import { Close } from '../../_utils/components';
 import { withSpin } from '../with-spin';
+import { forwardRef } from 'react';
+import type { SvgIconProps } from '../../_utils/components';
+
+// Wrap the simple Close component to make it forwardRef-compatible
+const CloseIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
+  const { size, color, className, style, ...rest } = props;
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 1024 1024"
+      width={size ?? '1em'}
+      height={size ?? '1em'}
+      fill={color ?? 'currentColor'}
+      className={className}
+      style={style}
+      {...rest}
+    >
+      <path d="M782.426059 824.924989l-584.588225-584.727395c-11.987009-11.990079-11.984962-31.42778 0.005116-43.414789 11.990079-11.987009 31.42778-11.984962 43.414789 0.005117l584.588225 584.727395c11.987009 11.990079 11.984962 31.42778-0.005116 43.414788-11.989055 11.988032-31.42778 11.984962-43.414789-0.005116z" />
+      <path d="M197.768249 824.856427c-11.987009-11.990079-11.984962-31.42778 0.005117-43.414788l584.727394-584.589249c11.990079-11.987009 31.42778-11.984962 43.414789 0.005117 11.987009 11.990079 11.984962 31.42778-0.005116 43.414788l-584.727395 584.589249c-11.990079 11.987009-31.42778 11.984962-43.414789-0.005117z" />
+    </svg>
+  );
+});
+CloseIcon.displayName = 'CloseIcon';
 
 describe('withSpin HOC', () => {
-  const SpinClose = withSpin(IconClose);
+  const SpinClose = withSpin(CloseIcon);
 
   it('applies ty-icon-spin CSS class', () => {
     const { container } = render(<SpinClose />);
@@ -33,6 +56,6 @@ describe('withSpin HOC', () => {
   });
 
   it('sets displayName', () => {
-    expect(SpinClose.displayName).toBe('withSpin(IconClose)');
+    expect(SpinClose.displayName).toBe('withSpin(CloseIcon)');
   });
 });

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

@@ -1,11 +1,11 @@
 import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'react';
-import type { IconProps } from '@tiny-design/icons';
+import type { SvgIconProps } from '../_utils/components';
 import classNames from 'classnames';
 
-type IconComponent = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+type IconComponent = ForwardRefExoticComponent<SvgIconProps & RefAttributes<SVGSVGElement>>;
 
 export function withSpin(Icon: IconComponent): IconComponent {
-  const SpinIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  const SpinIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
     const { className, ...rest } = props;
 
     return (