import type { SVGProps } from "react";
export interface PencilIconProps
  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
  className?: string;
  size?: number;
  color?: string;
}
export function PencilIcon({
  className = "",
  size = 24,
  color = "currentColor",
  ...props
}: PencilIconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill="none"
      viewBox="0 0 24 24"
      className={className}
      {...props}
    >
      <path
        fill={color}
        d="M4.5 13.375c.619 0 1.12.5 1.125 1.118v.003l.001.036a4.5 4.5 0 0 0 .146.86c.154.561.452 1.24 1.023 1.812.572.572 1.252.87 1.814 1.023a4.5 4.5 0 0 0 .86.146l.035.002h-.005a1.125 1.125 0 0 1 .116 2.244l-.116.006h-.05l-.095-.005a5 5 0 0 1-.315-.025 7 7 0 0 1-1.022-.198c-.814-.221-1.885-.674-2.813-1.602-.927-.928-1.38-1.997-1.602-2.811a6.8 6.8 0 0 1-.223-1.338l-.004-.096v-.05H4.5 3.375c0-.621.503-1.125 1.125-1.125m7.204-2.67a1.125 1.125 0 0 1 1.59 1.59l-3 3a1.125 1.125 0 0 1-1.59-1.59zm1-6a1.125 1.125 0 0 1 1.506-.078l.085.078 5 5 .077.085a1.124 1.124 0 0 1-1.582 1.583l-.086-.078-5-5-.077-.085a1.126 1.126 0 0 1 .077-1.505"
      />
      <path
        fill={color}
        d="M15.18 2.105a4.2 4.2 0 0 1 5.939 0l.776.775.287.32a4.2 4.2 0 0 1-.287 5.62L9.42 21.295a4.2 4.2 0 0 1-1.958 1.107l-.321.066-3.762.627a2.15 2.15 0 0 1-2.474-2.474l.627-3.762a4.2 4.2 0 0 1 1.173-2.278zm4.348 1.591a1.95 1.95 0 0 0-2.757 0L4.295 16.172a1.95 1.95 0 0 0-.545 1.058l-.605 3.622 3.624-.603.15-.03a1.97 1.97 0 0 0 .91-.515L20.304 7.228a1.95 1.95 0 0 0 .133-2.607l-.133-.148-.777-.777Z"
      />
    </svg>
  );
}
