react-antd组件之Steps组件自定义icon svg图片颜色跟随完成进度改变

demo.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="58px" height="44px" viewBox="0 0 58 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>demo</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="demo" transform="translate(-1063.000000, -107.000000)">
            <g id="demo-28" transform="translate(1063.000000, 107.000000)">
                <g id="demo-2备份-3" transform="translate(5.000000, 4.000000)">
                    <path d="M48.1481026,17.5537154 C48.1481026,26.1197934 42.1008558,33.2883115 34.0001125,35.1075096 L33.9995731,32.0144196 C40.4092217,30.2638528 45.1162253,24.4526945 45.1162253,17.5537154 C45.1162253,10.6547363 40.4092217,4.84357788 33.9995731,3.09301112 L34.0001125,-7.88390522e-05 C42.1008558,1.81911925 48.1481026,8.98763728 48.1481026,17.5537154 Z" id="形状结合" class="data-exploration"></path>
                    <g id="demo" transform="translate(0.000000, 5.000000)">
                        <rect id="矩形" x="0" y="0" width="26" height="26"></rect>
                        <g id="demo-13" transform="translate(0.999996, 0.580392)">
                            <path d="M23.6309874,21.2438673 L19.4372696,23.6626465 C19.0047245,23.9112363 18.4714984,23.9112363 18.0401946,23.6626465 L13.8440043,21.2600255 C13.4102153,21.0114358 13.1442143,20.5515443 13.1442143,20.0543664 L13.1442143,15.2317299 C13.14298,14.7345494 13.4102128,14.2746584 13.8440043,14.0260707 L18.0377221,11.6060501 C18.4702672,11.3574604 19.0034933,11.3574604 19.434797,11.6060501 L23.6297383,14.0049419 C24.0622834,14.2535317 24.3295197,14.7134231 24.3295197,15.2106011 L24.3307774,20.0357356 C24.3320117,20.5341422 24.0647789,20.9952771 23.6309874,21.2438673 Z" id="路径备份-2" class="data-exploration-2"></path>
                            <path d="M6.29058697,11.6060501 L10.4855283,14.0049419 C10.9180734,14.2535317 11.1853097,14.7134231 11.1853097,15.2106011 L11.1865673,20.0357356 C11.1878016,20.5341422 10.9205688,20.9952771 10.4867773,21.2438673 L6.29305951,23.6626465 C5.86051442,23.9112363 5.32728829,23.9112363 4.89598457,23.6626465 L0.699794254,21.2600255 C0.266005242,21.0114358 4.25766029e-06,20.5515443 4.25766029e-06,20.0543664 L4.25766029e-06,15.2317299 C-0.00123008925,14.7345494 0.266002693,14.2746584 0.699794254,14.0260707 L4.89351202,11.6060501 C5.32605711,11.3574604 5.85928324,11.3574604 6.29058697,11.6060501 Z M12.8160772,0.186442303 L17.0110185,2.58533411 C17.4435635,2.83392384 17.7107998,3.29381529 17.7107998,3.79099323 L17.7120532,8.61612778 C17.7132918,9.11453435 17.446059,9.57566921 17.0122675,9.82425945 L12.8185497,12.2430387 C12.3860046,12.4916284 11.8527785,12.4916284 11.4214748,12.2430387 L7.22528445,9.84041767 C6.79149544,9.59182793 6.52549874,9.13193648 6.52549874,8.63475854 L6.52549874,3.81212203 C6.52426011,3.31494153 6.79149289,2.8550506 7.22528445,2.6064629 L11.4190022,0.186442303 C11.8515473,-0.0621474342 12.3847734,-0.0621474342 12.8160772,0.186442303 Z" id="形状结合" class="data-exploration"></path>
                        </g>
                    </g>
                    <text id="3" font-family="PingFangSC-Medium, PingFang SC" font-size="14" font-weight="400" class="data-exploration-text">
                        <tspan x="30" y="23">3</tspan>
                    </text>
                </g>
            </g>
        </g>
    </g>
</svg>

demo.jsx

import step1 from './step1.svg';
import { useState } from 'react';
import { ReactSVG } from 'react-svg';
import { Steps } from 'antd';
import './demo.less';

export default () => {
  const [current, setCurrent] = useState(0);
  const steps = [
    { title: 'demo1', icon: step1, content: <div>xxx</div> },
    { title: 'demo1', icon: step1, content: <div>xxx</div> },
  ];
  const createSVG = (icon) => {
    return (
      <div className="svgDiv">
        <ReactSVG src={icon} />
      </div>
    );
  };
  <Steps current={current} labelPlacement="vertical" size="small">
    {steps.map((step) => {
      <Steps.Step key={index} title={step.title} icon={createSVG(step.icon)} />;
    })}
    <div className="steps-content">{steps[current]?.content}</div>
  </Steps>;
};

demo.less

.svgDiv {

:global {
      .ant-steps-label-vertical {

        // icon 线条
        .ant-steps-item-tail {
          margin-left: 75px;
          padding: 13px 35px;
        }

        // icon 文字
        .ant-steps-item-content {
          width: 155px;
        }
      }

      .dataExploration {
        svg {
          .data-exploration {
            fill: #d4e2ec;
          }

          .data-exploration-text {
            fill: #324558;
          }

          .data-exploration-2 {
            fill: #d4e2ec;
          }

        }
      }

      .ant-steps-item-active,
      .ant-steps-item-finish {
        .dataExploration {
          svg {
            .data-exploration {
              fill: #04a17e;
            }

            .data-exploration-text {
              fill: #04a17e;
            }

            .data-exploration-2 {
              fill: #A3DBC8;
            }
          }
        }
      }

      .ant-empty-description {
        color: #848f9b;
      }
    }

}