refactor(steps):抽离icon图标(#826)

Author: SunLxy

packages/react-steps/README.md

@@ -21,7 +21,6 @@ import Steps from '@uiw/react-steps';
 ```jsx mdx:preview
 import React from 'react';
 import { Steps } from 'uiw';
-
 function Demo() {
   return (
     <Steps current={1} style={{ padding:"20px 0" }}>
@@ -66,13 +65,15 @@ export default Demo
 ```jsx mdx:preview
 import React from 'react';
 import { Steps, Icon } from 'uiw';
+import { StepsItemHeadInnerSvg } from 'uiw';
+import { Message } from "@uiw/icons"
 
 function Demo() {
   return (
     <Steps current={1} style={{padding:"20px 0"}}>
       <Steps.Step icon={<Icon type="user"/>} title="注册" description="这里是步骤一的说明，可以很长很长哦。" />
       <Steps.Step icon={<Icon type="picasa" spin={true} color="red" />} title="上传头像" description="这里是步骤一的说明，可以很长很长哦。" />
-      <Steps.Step icon="message" title="验证邮箱" description="这里是步骤一的说明，可以很长很长哦。" />
+      <Steps.Step icon={<StepsItemHeadInnerSvg as={Message} />} title="验证邮箱" description="这里是步骤一的说明，可以很长很长哦。" />
     </Steps>
   )
 }
@@ -230,4 +231,4 @@ export default Demo
 | status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：`wait` `process` `finish` `error` | String | `wait` |
 | title | 指定每个步骤标题 | String/ReactNode | - |
 | description | 步骤的详情描述，可选 | String/ReactNode | - |
-| icon | 步骤的图标，字符串类型从`<Icon/>`组件中找，可选 | String/ReactNode | - |
+| icon | 步骤的图标，字符串类型从`<Icon/>`组件中找，可选 | ReactNode | - |

packages/react-steps/src/Step.tsx

@@ -1,6 +1,9 @@
 import React, { CSSProperties } from 'react';
 import Icon, { IconProps, IconsName } from '@uiw/react-icon';
 import { IProps, HTMLDivProps } from '@uiw/utils';
+import { Check } from '@uiw/icons/lib/Check';
+import { Close } from '@uiw/icons/lib/Close';
+
 // import './style/index.less';
 import {
   StepsItem,
@@ -13,8 +16,8 @@ import {
   StepsItemMainDescription,
   StepsItemHeadInnerDot,
   StepsItemHeadInnerIcon,
+  StepsItemHeadInnerSvg,
 } from './style';
-
 export interface StepProps extends IProps, Omit<HTMLDivProps, 'title'> {
   nextError?: boolean | undefined;
   title?: React.ReactNode;
@@ -24,7 +27,7 @@ export interface StepProps extends IProps, Omit<HTMLDivProps, 'title'> {
   itemWidth?: number;
   stepNumber?: string;
   adjustMarginRight?: number;
-  icon?: IconProps['type'];
+  icon?: React.ReactNode;
   direction?: 'horizontal' | 'vertical';
 }
 
@@ -73,23 +76,14 @@ export default function Step(props: StepProps) {
         {icon}
       </StepsItemHeadInnerIcon>
     );
-  } else if ((icon && typeof icon === 'string') || status === 'finish' || status === 'error') {
+  } else if (status === 'finish' || status === 'error') {
+    iconNode = <StepsItemHeadInnerSvg as={status === 'finish' ? Check : Close} />;
+  } else {
     iconNode = (
-      <Icon
-        type={
-          [
-            icon && typeof icon === 'string' ? `${icon}` : null,
-            !icon && status === 'finish' ? 'check' : null,
-            !icon && status === 'error' ? 'close' : null,
-          ]
-            .filter(Boolean)
-            .join(' ')
-            .trim() as IconsName | null
-        }
-      />
+      <StepsItemHeadInnerIcon params={{ status, icon: !!icon }} className={`${prefixCls}-icon`}>
+        {stepNumber}
+      </StepsItemHeadInnerIcon>
     );
-  } else {
-    iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
   }
   return (
     <StepsItem

packages/react-steps/src/index.ts

@@ -1,5 +1,5 @@
 import Steps from './Steps';
-
+export * from './style';
 export * from './Steps';
 export * from './Step';
 

packages/react-steps/src/style/index.ts

@@ -425,6 +425,17 @@ export const StepsItemHeadInnerIcon = styled.span<StepsItemHeadInnerIconProps>`
 `;
 StepsItemHeadInnerIcon.defaultProps = { defaultTheme: StepsBaseDefaultTheme };
 
+export const StepsItemHeadInnerSvg = styled.svg`
+  fill: currentcolor;
+  height: 1em;
+  width: 1em;
+  display: inline-flex;
+  align-self: center;
+  position: relative;
+  transition: color 0.3s;
+  box-sizing: inherit;
+`;
+
 export interface StepsItemMainProps extends StepsBaseProps {
   params?: {
     dot?: boolean;