SVG Path Generator

import React, { forwardRef } from "react";

export interface VectorIconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
  strokeColor?: string;
  fillColor?: string;
  strokeWidth?: number;
}

export const VectorIcon = forwardRef<SVGSVGElement, VectorIconProps>(
  (
    {
      size = 24,
      strokeColor = "currentColor",
      fillColor = "none",
      strokeWidth = 2,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <svg
        ref={ref}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 800 600"
        width={size}
        height={size}
        fill={fillColor}
        stroke={strokeColor}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
        className={className}
        {...props}
      >
        <path
          d="M 120 480 C 180 320, 320 200, 480 240 C 600 270, 680 400, 720 480 Z"
          vectorEffect="non-scaling-stroke"
        />
      </svg>
    );
  }
);

VectorIcon.displayName = "VectorIcon";