import * as React from "react";

export interface SbIconProps {
  id?: string;
  fill?: string;
  className?: string;
  width?: string;
  height?: string;
  onClick?: () => void;
}

export default function SbSvg({
  id = "",
  fill = "#ff0000",
  className = "",
  onClick
}: SbIconProps): JSX.Element {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 565.15 568"
      id={id}
      className={className}
      onClick={() => onClick?.() } >
      <g
      id="Layer_2"
      data-name="Layer 2">
        <g
          id="Layer_1-2"
          data-name="Layer 1"
          style={{
            fill
          }}>
          <path
            d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"
            id="path8"
            style={{
              fill
            }} />
          <path
            style={{
              fill
            }}
            d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "
            id="path10" />
        </g>
      </g>
      <polygon style={{
          fill: "#fff"
        }}
        points="411.28 255.94 220.41 145.74 220.41 366.14 411.28 255.94"
      />
    </svg>
  );
}