feat(Steps): add icon-prefix prop (#8631)

src/step/Step.tsx

@@ -57,7 +57,13 @@ export default defineComponent({
     const onClickStep = () => parent.onClickStep(index.value);
 
     const renderCircle = () => {
-      const { finishIcon, activeIcon, activeColor, inactiveIcon } = parentProps;
+      const {
+        iconPrefix,
+        finishIcon,
+        activeIcon,
+        activeColor,
+        inactiveIcon,
+      } = parentProps;
 
       if (isActive()) {
         if (slots['active-icon']) {
@@ -69,6 +75,7 @@ export default defineComponent({
             class={bem('icon', 'active')}
             name={activeIcon}
             color={activeColor}
+            classPrefix={iconPrefix}
           />
         );
       }
@@ -83,6 +90,7 @@ export default defineComponent({
             class={bem('icon', 'finish')}
             name={finishIcon}
             color={activeColor}
+            classPrefix={iconPrefix}
           />
         );
       }
@@ -92,7 +100,13 @@ export default defineComponent({
       }
 
       if (inactiveIcon) {
-        return <Icon class={bem('icon')} name={inactiveIcon} />;
+        return (
+          <Icon
+            class={bem('icon')}
+            name={inactiveIcon}
+            classPrefix={iconPrefix}
+          />
+        );
       }
 
       return <i class={bem('circle')} style={lineStyle.value} />;

src/steps/README.md

@@ -84,6 +84,7 @@ export default {
 | active-icon | Active icon name | _string_ | `checked` |
 | inactive-icon | Inactive icon name | _string_ | - |
 | finish-icon `v3.0.7` | Finish icon name | _string_ | - |
+| icon-prefix `v3.0.15` | Icon className prefix | _string_ | `van-icon` |
 
 ### Step Slots
 

src/steps/README.zh-CN.md

@@ -90,6 +90,7 @@ export default {
 | finish-icon `v3.0.7` | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
 | active-color | 当前步骤和已完成步骤的颜色 | _string_ | `#07c160` |
 | inactive-color | 未激活步骤的颜色 | _string_ | `#969799` |
+| icon-prefix `v3.0.15` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### Step Slots
 

src/steps/Steps.tsx

@@ -9,6 +9,7 @@ export const STEPS_KEY = Symbol(name);
 export type StepsDirection = 'horizontal' | 'vertical';
 
 const props = {
+  iconPrefix: String,
   finishIcon: String,
   activeColor: String,
   inactiveIcon: String,

src/steps/test/__snapshots__/index.spec.tsx.snap

@@ -69,7 +69,7 @@ exports[`should render finish icon slot correctly 1`] = `
     A
   </div>
   <div class="van-step__circle-container">
-    Custim Fiinsh Icon
+    Custom Finish Icon
   </div>
   <div class="van-step__line">
   </div>
@@ -84,7 +84,7 @@ exports[`should render icon slot correctly 1`] = `
         B
       </div>
       <div class="van-step__circle-container">
-        Custim Active Icon
+        Custom Active Icon
       </div>
       <div class="van-step__line">
       </div>
@@ -94,7 +94,7 @@ exports[`should render icon slot correctly 1`] = `
         A
       </div>
       <div class="van-step__circle-container">
-        Custim Inactive Icon
+        Custom Inactive Icon
       </div>
       <div class="van-step__line">
       </div>
@@ -102,3 +102,17 @@ exports[`should render icon slot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render icon-prefix correctly 1`] = `
+<div class="van-hairline van-step van-step--horizontal van-step--process">
+  <div class="van-step__title van-step__title--active">
+    B
+  </div>
+  <div class="van-step__circle-container">
+    <i class="van-badge__wrapper custom-icon custom-icon-checked van-step__icon van-step__icon--active">
+    </i>
+  </div>
+  <div class="van-step__line">
+  </div>
+</div>
+`;

src/steps/test/index.spec.tsx

@@ -7,8 +7,8 @@ test('should render icon slot correctly', () => {
     render() {
       return (
         <Steps active={0}>
-          <Step v-slots={{ 'active-icon': () => `Custim Active Icon` }}>B</Step>
-          <Step v-slots={{ 'inactive-icon': () => `Custim Inactive Icon` }}>
+          <Step v-slots={{ 'active-icon': () => `Custom Active Icon` }}>B</Step>
+          <Step v-slots={{ 'inactive-icon': () => `Custom Inactive Icon` }}>
             A
           </Step>
         </Steps>
@@ -96,7 +96,7 @@ test('should render finish icon slot correctly', () => {
     render() {
       return (
         <Steps active={1}>
-          <Step v-slots={{ 'finish-icon': () => `Custim Fiinsh Icon` }}>A</Step>
+          <Step v-slots={{ 'finish-icon': () => `Custom Finish Icon` }}>A</Step>
           <Step>B</Step>
         </Steps>
       );
@@ -106,3 +106,19 @@ test('should render finish icon slot correctly', () => {
   const firstStep = wrapper.find('.van-step');
   expect(firstStep.html()).toMatchSnapshot();
 });
+
+test('should render icon-prefix correctly', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Steps active={1} iconPrefix="custom-icon">
+          <Step>A</Step>
+          <Step>B</Step>
+        </Steps>
+      );
+    },
+  });
+
+  const steps = wrapper.findAll('.van-step');
+  expect(steps[1].html()).toMatchSnapshot();
+});