Custom Icon

import React, { SVGProps } from "react";
import FormWizard from "react-form-wizard-component";
import "react-form-wizard-component/styles.css";

export default function FormWizardSample() {
  const handleComplete = () => {
    console.log("Form completed!");
    // Handle form completion logic here
  };

  function SolarUserLinear(props?: SVGProps<SVGSVGElement>) {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        {...props}
      >
        <g fill="none" stroke="black" strokeWidth="1.5">
          <circle cx="12" cy="6" r="4"></circle>
          <path d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5Z"></path>
        </g>
      </svg>
    );
  }
  function vsCodeIcon() {
    return (
      <img
        src="https://vitejs.dev/logo-with-shadow.png"
        alt="vitejs"
        width="24"
        height="24"
      />
    );
  }
  return (
    <>
      <FormWizard onComplete={handleComplete}>
        <FormWizard.TabContent
          title="Personal details"
          icon={SolarUserLinear()}
        >
          <h3>First Tab with custom SVG icon</h3>
          <p>Some content for the first tab</p>
        </FormWizard.TabContent>
        <FormWizard.TabContent title="Additional Info">
          <h3>Second Tab without icon</h3>
          <p>Some content for the second tab</p>
        </FormWizard.TabContent>
        <FormWizard.TabContent title="Last step" icon={vsCodeIcon()}>
          <h3>Last Tab with img tag</h3>
          <p>Some content for the last tab</p>
        </FormWizard.TabContent>
      </FormWizard>
    </>
  );
}