import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
/* SVGR has dropped some elements not supported by react-native-svg: title */
const Compass = (props:any) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    data-name="Compass 2 - Locked"
    viewBox="0 0 24 24"
    {...props}
  >
    <G
      style={{
        opacity: 0.8,
      }}
    >
      <Circle
        cx={12}
        cy={12}
        r={10}
        style={{
          fill: "#f5f5f5",
        }}
      />
      <Circle
        cx={12}
        cy={12}
        r={10}
        style={{
          strokeMiterlimit: 10,
          fill: "none",
          stroke: "#000",
          strokeWidth: ".2px",
          opacity: 0.2,
        }}
      />
    </G>
    <Circle
      cx={12}
      cy={12}
      r={0.75}
      style={{
        fill: "#00f",
        stroke: "#00f",
        strokeWidth: ".02px",
        strokeMiterlimit: 10,
      }}
    />
    <Path
      d="m12 20-2.5-8a3.12 3.12 0 0 0 2.5 1.8 3.12 3.12 0 0 0 2.5-1.8Z"
      style={{
        isolation: "isolate",
        fill: "#e6e6e6",
        opacity: 0.6,
      }}
    />
    <Path
      d="m12 4-2.5 8a3.12 3.12 0 0 1 2.5-1.8 3.12 3.12 0 0 1 2.5 1.8Z"
      style={{
        fill: "red",
      }}
    />
    <Path
      d="M12 10.2a3.13 3.13 0 0 1 2.5 1.8L12 4"
      style={{
        opacity: 0.2,
        fill: "#3e2723",
        isolation: "isolate",
      }}
    />
    <Path
      d="M12 13.8a3.13 3.13 0 0 0 2.5-1.8L12 20"
      style={{
        opacity: 0.1,
        fill: "#3e2723",
        isolation: "isolate",
      }}
    />
  </Svg>
)
export default Compass
