react-native-svg#Circle JavaScript Examples

User = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Circle cx="17.5" cy="18.5" fill="none" r="3.5"/>
      <Circle cx="6.5" cy="18.5" fill="none" r="3.5"/>
      <Polygon fill="none" points="3 12 21 12 18 8 6 8 3 12" stroke={fill}/>
      <Polyline fill="none" points="6 8 7 2 17 2 18 8" stroke={fill}/>
      <Path d="M14.1,17.713a3.437,3.437,0,0,0-4.192,0" fill="none"/>
    </G>
  </Svg>
)

Quality = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Polyline fill="none" points=" 10,15 8,15 8,9 10,9 "/>
      <Polyline fill="none" points=" 14,15 16,15 16,9 14,9 "/>
      <Circle cx="12" cy="12" fill="none" r="11" stroke={fill}/>
    </G>
  </Svg>
)

FlashOff = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Line fill="none" x1="16.172" x2="21.828" y1="16.172" y2="21.828"/>
      <Circle cx="19" cy="19" fill="none" r="4"/>
      <Polyline fill="none" points="18 12.2 20 10 11 10 12 3 2 14 11 14 10 21 12 18.8" stroke={fill}/>
    </G>
  </Svg>
)

Refresh = ({ fill = '#333', style = {} }) => (
  <Svg height={9} width={9} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Circle cx="12" cy="12" fill="none" r="11" stroke={fill}/>
      <Line fill="none" x1="12" x2="12" y1="11" y2="17"/>
      <Circle cx="12" cy="7" r="1" stroke="none"/>
    </G>
  </Svg>
)

Direct = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Rect height="20" width="20" fill="none" stroke={fill} x="2" y="2"/>
      <Polygon points="5 17 8 12 11 15 15 9 19 17 5 17" stroke="none"/>
      <Circle cx="9.5" cy="7.5" r="1.5" stroke="none"/>
    </G>
  </Svg>
)

Search = ({ fill = '#F9F9F9', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="square" strokeWidth="2">
      <Line fill="none" x1="22" x2="18" y1="22" y2="18"/>
      <Circle cx="10" cy="10" fill="none" r="8" stroke={fill}/>
      <Path d="M6,10a4,4,0,0,1,4-4" fill="none" strokeLinecap="butt"/>
    </G>
  </Svg>
)

function ConstellationSimple({ color, dotColor, height, width, style }) {
  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Path
        fill={color}
        d="M470.71 0c-22.768 0-41.29 18.523-41.29 41.29 0 3.702.498 7.288 1.415 10.705l-59.788 29.894c-7.565-9.625-19.301-15.825-32.465-15.825-22.768 0-41.29 18.523-41.29 41.29 0 16.773 10.058 31.232 24.456 37.689l-15.486 69.685c-.238-.004-.473-.018-.712-.018-19.905 0-36.566 14.159-40.439 32.934l-183.36.095c-3.838-18.824-20.52-33.03-40.459-33.03C18.522 214.71 0 233.232 0 256c0 22.086 17.431 40.176 39.259 41.239l20.666 134.775c-15.688 5.857-26.893 20.99-26.893 38.696 0 22.768 18.522 41.29 41.29 41.29s41.29-18.522 41.29-41.29c0-1.678-.112-3.33-.308-4.956l121.462-40.488c7.148 12.343 20.49 20.669 35.75 20.669 22.768 0 41.29-18.522 41.29-41.29 0-16.773-10.058-31.232-24.456-37.689l15.486-69.685c.238.004.473.018.712.018 22.768 0 41.29-18.522 41.29-41.29 0-16.773-10.058-31.232-24.456-37.689l15.484-69.685c.238.004.473.018.712.018 22.768 0 41.29-18.523 41.29-41.29 0-3.702-.498-7.288-1.415-10.705l59.788-29.894c7.567 9.627 19.302 15.827 32.466 15.827 22.768 0 41.29-18.523 41.29-41.29C512 18.523 493.478 0 470.71 0zM16.516 256c0-13.661 11.113-24.774 24.774-24.774 13.661 0 24.774 11.113 24.774 24.774 0 13.661-11.113 24.774-24.774 24.774-13.661 0-24.774-11.113-24.774-24.774zm57.807 239.484c-13.661 0-24.774-11.113-24.774-24.774 0-13.661 11.113-24.774 24.774-24.774 13.661 0 24.774 11.113 24.774 24.774 0 13.661-11.113 24.774-24.774 24.774zm156.903-90.839c0 1.678.112 3.33.308 4.956l-121.462 40.488c-6.845-11.821-19.373-19.955-33.827-20.621L55.586 294.736c13.236-4.9 23.297-16.398 26.165-30.482l183.321-.095c2.658 13.208 11.643 24.147 23.642 29.529l-15.486 69.685c-.238-.004-.473-.018-.712-.018-22.768 0-41.29 18.522-41.29 41.29zm66.064 0c0 13.661-11.114 24.774-24.774 24.774s-24.774-11.113-24.774-24.774c0-13.661 11.114-24.774 24.774-24.774s24.774 11.113 24.774 24.774zM330.323 256c0 13.661-11.114 24.774-24.774 24.774S280.775 269.661 280.775 256c0-13.661 11.114-24.774 24.774-24.774 13.659 0 24.774 11.113 24.774 24.774zm8.258-123.871c-13.66 0-24.774-11.114-24.774-24.774s11.114-24.774 24.774-24.774 24.774 11.114 24.774 24.774-11.114 24.774-24.774 24.774zM470.71 66.065c-13.66 0-24.774-11.114-24.774-24.774s11.114-24.774 24.774-24.774 24.774 11.114 24.774 24.774c0 13.659-11.114 24.774-24.774 24.774z"
      />
      <Circle fill={dotColor} cx={50.099} cy={50.099} r={8.809} />
      <Circle fill={dotColor} cx={83.131} cy={83.131} r={8.809} />
      <Circle fill={dotColor} cx={149.196} cy={149.196} r={8.809} />
      <Circle fill={dotColor} cx={248.292} cy={83.131} r={8.809} />
      <Circle fill={dotColor} cx={461.901} cy={461.901} r={8.809} />
      <Circle fill={dotColor} cx={461.901} cy={263.708} r={8.809} />
      <Circle fill={dotColor} cx={428.869} cy={296.74} r={8.809} />
    </Svg>
  );
}

function Constellation({ color, dotColor, height, width, style }) {
  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <G fill={color}>
        <Path d="M171.39 37.269l102.524 164.723a7.718 7.718 0 01-2.475 10.633 7.714 7.714 0 01-10.633-2.475L157.551 44.253zM460.823 489.936a7.72 7.72 0 01-6.886-8.472l19.288-186.64c.438-4.242 4.231-7.332 8.472-6.886a7.72 7.72 0 016.886 8.472l-19.767 191.277zM445.962 500.589c-.724 0-1.46-.103-2.189-.319l-190.494-56.265a7.719 7.719 0 01-5.217-9.59c1.207-4.089 5.498-6.43 9.59-5.217l190.494 56.265a7.719 7.719 0 015.217 9.59 7.724 7.724 0 01-7.401 5.536zM466.97 282.6a7.726 7.726 0 01-2.138-.303L289.55 231.874a7.72 7.72 0 01-5.285-9.553 7.723 7.723 0 019.553-5.285L469.1 267.459a7.72 7.72 0 01-2.13 15.141zM242.71 423.864a7.722 7.722 0 01-7.621-9.013l30.556-180.107a7.72 7.72 0 0115.223 2.583l-30.556 180.107a7.723 7.723 0 01-7.602 6.43zM36.683 9.274l113.309 13.083-2.555 15.247L32.678 24.353z" />
      </G>
      <Circle cx={90.735} cy={112.896} fill={dotColor} r={7.72} />
      <Circle cx={168.51} cy={252.733} fill={dotColor} r={7.72} />
      <Circle cx={426.639} cy={85.992} fill={dotColor} r={7.72} />
      <Circle cx={333.616} cy={353.147} fill={dotColor} r={7.72} />
      <Circle cx={401.741} cy={418.038} fill={dotColor} r={7.72} />
      <Circle cx={393.976} cy={195.996} fill={dotColor} r={7.72} />
      <Circle cx={471.26} cy={151.807} fill={dotColor} r={7.72} />
      <Circle cx={136.487} cy={406.276} fill={dotColor} r={7.72} />
      <Circle cx={28.345} cy={16.087} fill={dotColor} r={16.087} />
      <Circle cx={158.459} cy={31.1} fill={dotColor} r={16.177} />
      <Circle cx={51.563} cy={432.033} fill={dotColor} r={14.252} />
      <Circle cx={80.067} cy={266.985} fill={dotColor} r={14.252} />
      <Circle cx={240.001} cy={432.033} fill={dotColor} r={18.951} />
      <Circle cx={459.171} cy={496.009} fill={dotColor} r={15.991} />
      <Circle cx={481.55} cy={280.474} fill={dotColor} r={18.192} />
      <Circle cx={319.813} cy={81.435} fill={dotColor} r={16.258} />
      <Circle cx={275.991} cy={219.94} fill={dotColor} r={19.284} />
      <Circle cx={410.308} cy={337.315} fill={dotColor} r={16.331} />
    </Svg>
  );
}

function Married({ color, height, width, style }) {
  const { colors } = useTheme();

  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Circle
        cx={236.967}
        cy={236.967}
        r={236.967}
        fill={colors.primary + '50'}
      />
      <Path
        d="M362.409 45.446c0 51.115-85.141 90.88-85.141 90.88s-21.291-9.941-42.571-26.272c-20.532-15.725-42.571-38.626-42.571-64.608 0-24.553 19.548-44.794 44.235-45.43 17.147-.453 32.791 8.769 40.907 23.424C285.489 8.596 301.308-.467 318.153.027c24.685.609 44.256 20.821 44.256 45.419z"
        fill="#f92a08"
      />
      <Path
        d="M361.95 38.992c-3.207 17.418-23.101 32.814-42.8 44.073-25.943 14.828-57.877 14.81-83.815-.026-16.574-9.48-39.3-25.271-42.75-44.036 6.1-43.039 63.624-53.59 84.683-15.563 21.093-38.091 78.62-27.382 84.682 15.552z"
        fill="#f92a08"
      />
      <Path
        d="M267.305 482.053C155.743 558.752.03 479.899.03 341.339c0-94.261 76.405-170.667 170.667-170.667 46.965 0 89.504 18.976 120.363 49.664a153.49 153.49 0 00-48.117 36.821c-70.883-60.907-183.179-11.46-183.179 84.181 0 61.269 49.664 110.933 110.933 110.933 73.767 0 126.852-70.745 106.72-141.291.798 0 12.9-27.511 48.512-40.661 33.773 73.691 11.196 163.7-58.624 211.734z"
        fill="#ffe773"
      />
      <Path
        d="M512.03 358.406c0 126.859-144.667 197.54-244.725 123.648a171.866 171.866 0 0043.264-42.891c61.956 36.853 141.728-7.707 141.728-80.757 0-51.84-42.027-93.867-93.867-93.867-33.759 0-64.316 17.973-81.003 46.432h-.011v.011c-14.524 24.725-16.465 54.08-7.232 79.477a111.248 111.248 0 01-43.627 46.731c-45.793-76.403-16.82-177.157 64.501-216.853 100.938-49.385 220.972 23.819 220.972 138.069z"
        fill="#efd66c"
      />
    </Svg>
  );
}

function Male({ color, height, width, style }) {
  const { colors } = useTheme();
  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Circle cx={236.967} cy={236.967} r={236.967} fill={colors.accent} />
      <G fill={colors.primary}>
        <Path d="M283.19 189.084c-44.146-44.149-115.719-44.149-159.864 0-44.153 44.157-44.153 115.726 0 159.875 44.146 44.142 115.719 44.142 159.864 0 44.149-44.153 44.149-115.722 0-159.875zm-30.391 129.484c-27.356 27.364-71.723 27.364-99.09 0-27.364-27.367-27.364-71.73 0-99.09 27.367-27.367 71.738-27.367 99.09 0 27.367 27.36 27.367 71.723 0 99.09z" />
        <Path d="M252.732 218.835c16.685 16.67 35.573-10.9 46.024-21.343 9.987-9.987 34.847-34.844 44.842-44.845.924 10.458 2.746 50.937 4.277 61.287 2.443 16.445 22.817 22.582 30.316 8.105.778-1.029 1.272-2.324 1.478-3.843.344-1.388.348-2.683.079-3.832-.269-13.549-1.355-57.13-1.635-70.69-.254-13.197 1.53-27.562-3.308-39.97a10.55 10.55 0 00-.804-2.133c-.98-1.957-3.398-3.746-5.74-4.266-11.431-4.322-24.093-2.885-36.318-3.136-15.188-.303-60.205-.681-75.382-.984-17.568-.359-18.17 22.2-5.369 29.714 6.41 3.727 46.529 3.394 53.65 4.116 4.558.471 9.137.906 13.71 1.351-9.923 9.923-34.709 34.713-44.643 44.643-10.435 10.428-37.802 29.19-21.177 45.826z" />
      </G>
      <Path
        d="M368.256 97.301c-11.431-4.322-24.093-2.885-36.318-3.136-15.188-.303-60.205-.681-75.382-.984-17.568-.359-18.17 22.2-5.369 29.714 6.41 3.727 46.529 3.394 53.65 4.116 4.557.471 9.137.906 13.71 1.351-9.923 9.923-34.709 34.713-44.643 44.643-1.306 1.306-2.874 2.735-4.587 4.284-44.183-31.906-106.218-27.985-145.993 11.79-44.075 44.078-44.146 115.468-.228 159.632l30.391-30.387c-27.132-27.382-27.068-71.565.217-98.851 27.293-27.293 71.479-27.356 98.851-.213l.307-.307 30.091-30.095 89.358-89.354c-1.148-1.039-2.596-1.881-4.055-2.203z"
        fill={colors.primary}
      />
    </Svg>
  );
}

Lock = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Path d="M7,11.1V6c0-2.8,2.2-5,5-5h0 c2.8,0,5,2.2,5,5v5.1" fill="none" stroke={fill}/>
      <Circle cx="12" cy="16" fill="none" r="7" stroke={fill}/>
      <Circle cx="12" cy="15" fill="none" r="2"/>
      <Line fill="none" x1="12" x2="12" y1="17" y2="19"/>
    </G>
  </Svg>
)

Cash = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Polyline fill="none" points="7,13 1,13 1,1 19,1 19,9.171 "/>
      <Path d="M11,12v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" fill="none" stroke={fill}/>
      <Path d="M11,16v4c0,1.657,2.686,3,6,3 s6-1.343,6-3v-4" fill="none" stroke={fill}/>
      <Ellipse cx="17" cy="12" fill="none" rx="6" ry="3" stroke={fill}/>
      <Circle cx="10" cy="7" fill="none" r="1"/>
      <Circle cx="10" cy="7" r="1" stroke="none" strokeLinecap="square"/>
    </G>
  </Svg>
)

function Female({ color, height, width, style }) {
  const { colors } = useTheme();

  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Circle cx={236.967} cy={236.967} r={236.967} fill={colors.primary} />
      <G fill={colors.accent}>
        <Path d="M197.716 336.944c-3.906-3.903-18.904-19.263-18.63-18.993.056-.052 28.741-28.378 28.741-28.378s16.157-14.271 22.275-27.985c.494-1.104-18.821-18.978-18.821-18.978-13.822 6.11-28.303 22.481-28.303 22.481-9.485 9.478-28.557 28.194-28.557 28.194l-17.934-17.934c-10.425-10.421-21.672-30.279-38.305-13.65-16.673 16.677 3.371 28.048 13.822 38.499 3.906 3.903 17.571 17.927 17.571 17.927-7.289 7.285-2.073 2.069-6.275 6.279-10.428 10.428-37.676 29.059-21.048 45.684 16.681 16.685 35.446-10.75 45.889-21.201 4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.529 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.665-16.671-3.38-28.05-13.827-38.501z" />
        <Path d="M352.241 119.801c-44.146-44.153-115.719-44.153-159.868 0-44.146 44.153-44.146 115.722 0 159.864 44.149 44.157 115.722 44.157 159.868 0 44.149-44.142 44.149-115.711 0-159.864zm-30.376 129.466c-27.364 27.364-71.723 27.364-99.09 0s-27.367-71.726 0-99.09 71.73-27.364 99.09 0c27.364 27.363 27.364 71.726 0 99.09z" />
      </G>
      <Path
        d="M148.141 348.888c4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.528 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.666-16.67-3.379-28.048-13.826-38.499-3.906-3.903-18.904-19.263-18.63-18.993l26.967-26.623c44.198 32.06 106.357 28.179 146.188-11.663 44.149-44.142 44.149-115.711 0-159.864-.03-.03-.064-.06-.094-.086l-30.376 30.372c.03.03.067.06.097.086 27.364 27.364 27.364 71.73 0 99.09-27.364 27.364-71.723 27.364-99.09 0-.03-.03-.056-.064-.086-.094L102.02 369.838c.082.079.146.161.232.247 16.681 16.689 35.446-10.746 45.889-21.197z"
        fill={colors.accent}
      />
    </Svg>
  );
}

export default function CheckedCircle(props) {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <Circle cx="12" cy="12" r="12" />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6 12L10 16L18 8"
        stroke="white"
        strokeWidth="2.4"
      />
    </Icon>
  );
}

function SvgFurnitureAndHousehold(props) {
  return (
    <Svg height={512} viewBox="0 0 512 512" width={512} className="" {...props}>
      <Circle cx={258.997} cy={136} fill="#d0f2d2" r={40} />
      <Circle cx={366} cy={176} fill="#ffdede" r={20} />
      <Path
        d="M46 502c0-77.32 62.68-140 140-140s140 62.68 140 140"
        fill="#99ebfa"
      />
      <Path
        d="M283.99 402H88.01c25.26-24.74 59.84-40 97.99-40s72.73 15.26 97.99 40z"
        fill="#ccf5fc"
      />
      <G fill="#fff">
        <Path d="M126 502v-40h40v40M206 502v-40h40v40M246 308.274c-18.301 18.301-47.973 18.301-66.274 0s-18.301-47.973 0-66.274z" />
      </G>
      <Path d="M346 342h120v80H346z" fill="#ccf5fc" />
      <Circle cx={86} cy={130} fill="#fff" r={40} />
      <Circle cx={426} cy={50} fill="#fff" r={40} />
      <G fill="#33d6f5">
        <Path d="M366 206c16.542 0 30-13.458 30-30s-13.458-30-30-30-30 13.458-30 30 13.458 30 30 30zm0-40c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zM199.276 174.048c6.647 0 12.974-1.225 16.331-1.875a155.13 155.13 0 007.306-1.615C232.02 180.063 244.824 186 258.997 186c27.57 0 50-22.43 50-50a50.42 50.42 0 00-.153-3.724c19.921-13.089 38.555-30.026 31.722-44.682-3.747-8.034-13.139-11.408-27.926-10.018-10.57.992-24.052 4.318-38.986 9.618a9.97 9.97 0 00-1.361.613 49.859 49.859 0 00-13.295-1.809c-20.739 0-38.565 12.693-46.128 30.717a9.878 9.878 0 00-1.28.685c-28.451 18.292-39.944 33.857-34.159 46.266 3.858 8.275 13.129 10.383 21.845 10.382zM258.997 166a29.82 29.82 0 01-12.466-2.723c8.166-2.976 16.638-6.49 25.145-10.457a328.748 328.748 0 0016.007-8.043C283.922 157.05 272.486 166 258.997 166zm60.934-68.752c-2.848 3.562-8.499 8.77-17.031 14.845a50.259 50.259 0 00-7.868-10.702c11.94-3.29 20.225-4.24 24.899-4.143zM258.997 106c11.845 0 22.106 6.902 26.98 16.894-6.647 3.841-14.22 7.82-22.754 11.799-11.939 5.568-22.687 9.708-31.973 12.701A29.832 29.832 0 01228.996 136c.001-16.542 13.459-30 30.001-30zm-49.461 37.308a49.514 49.514 0 002.281 9.221c-5.91 1.157-10.542 1.611-13.696 1.537 2.003-2.51 5.565-6.158 11.415-10.758zM466 332H346c-5.522 0-10 4.478-10 10v80c0 5.522 4.478 10 10 10h50v60h-60.341c-2.479-37.469-18.769-71.222-43.824-96.193a10.067 10.067 0 00-1.813-1.771C265.28 370.19 232.395 354.749 196 352.341v-22.92a57.19 57.19 0 0016.863 2.552c14.562 0 29.123-5.543 40.208-16.628 3.905-3.905 3.905-10.237 0-14.143l-26.066-26.066 26.066-26.066c3.905-3.905 3.905-10.237 0-14.143-3.906-3.904-10.236-3.904-14.143 0l-26.066 26.066-26.066-26.066c-3.906-3.904-10.236-3.904-14.143 0-22.17 22.171-22.17 58.245 0 80.417a56.895 56.895 0 003.346 3.066v33.929c-36.385 2.407-69.263 17.84-94.001 41.675a9.99 9.99 0 00-1.848 1.804C52.893 422.994 36 460.561 36 502c0 5.522 4.478 10 10 10h360c5.522 0 10-4.478 10-10v-70h50c5.522 0 10-4.478 10-10v-80c0-5.522-4.478-10-10-10zm-285.3-74.884l50.184 50.184c-14.037 7.857-32.164 5.826-44.087-6.097s-13.954-30.049-6.097-44.087zM236 492h-20v-20h20zm10-40h-40c-5.523 0-10 4.478-10 10v30h-20v-30c0-5.522-4.477-10-10-10h-40c-5.522 0-10 4.478-10 10v30H56.381c2.364-30.938 15.609-58.878 35.901-80h187.436c20.292 21.122 33.537 49.062 35.901 80H256v-30c0-5.522-4.477-10-10-10zm-90 40h-20v-20h20zm30-120c25.418 0 49.151 7.339 69.204 20H116.796c20.053-12.661 43.786-20 69.204-20zm270 0h-40v-20h40zm-60-20v20h-40v-20zm-40 60v-20h40v20zm60 0v-20h40v20zM46 140c16.542 0 30 13.458 30 30 0 5.523 4.478 10 10 10s10-4.477 10-10c0-16.542 13.458-30 30-30 5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10-16.542 0-30-13.458-30-30 0-5.522-4.478-10-10-10s-10 4.478-10 10c0 16.542-13.458 30-30 30-5.522 0-10 4.478-10 10 0 5.523 4.478 10 10 10zm40-20.035A50.432 50.432 0 0096.035 130 50.432 50.432 0 0086 140.035 50.432 50.432 0 0075.965 130 50.432 50.432 0 0086 119.965zM386 60c16.542 0 30 13.458 30 30 0 5.522 4.478 10 10 10s10-4.478 10-10c0-16.542 13.458-30 30-30 5.522 0 10-4.478 10-10s-4.478-10-10-10c-16.542 0-30-13.458-30-30 0-5.523-4.478-10-10-10s-10 4.477-10 10c0 16.542-13.458 30-30 30-5.522 0-10 4.478-10 10s4.478 10 10 10zm40-20.035A50.405 50.405 0 00436.035 50 50.432 50.432 0 00426 60.035 50.405 50.405 0 00415.965 50 50.405 50.405 0 00426 39.965z" />
      </G>
    </Svg>
  )
}

function SvgPlanet(props) {
  return (
    <Svg height={512} viewBox="0 0 512 512" width={512} className="" {...props}>
      <Circle cx={256} cy={256} fill="#fff7bf" r={160} />
      <Path
        d="M196 286H98.82a158.844 158.844 0 0013.272 40H196c11.046 0 20-8.954 20-20s-8.954-20-20-20zM388.298 166H296c-11.046 0-20 8.954-20 20s8.954 20 20 20h112.021a159.38 159.38 0 00-19.723-40zM408.021 306H336c-11.046 0-20 8.954-20 20s8.954 20 20 20h52.298a159.38 159.38 0 0019.723-40z"
        fill="#ffee80"
      />
      <Circle cx={416} cy={436} fill="#fff" r={40} />
      <Circle cx={482} cy={316} fill="#e6e6f9" r={20} />
      <G fill="#ffee80">
        <Circle cx={216} cy={146} r={10} />
        <Circle cx={326} cy={238} r={10} />
        <Circle cx={266} cy={366} r={20} />
        <Circle cx={186} cy={176} r={20} />
      </G>
      <Circle cx={96} cy={76} fill="#fff" r={40} />
      <Circle cx={30} cy={216} fill="#ecf2f3" r={20} />
      <G fill="#ffa96b">
        <Path d="M426 256c0-12.693-1.409-25.062-4.06-36.968 32.53-33.648 43.719-59.891 33.246-78.032-10.467-18.132-38.836-21.553-84.305-10.193C340.603 103.001 300.252 86 256 86c-93.738 0-170 76.262-170 170 0 12.694 1.41 25.064 4.061 36.971C57.536 326.619 46.343 352.864 56.814 371c6.45 11.171 19.665 16.766 39.472 16.766 12.383 0 27.347-2.19 44.839-6.568C171.402 409.001 211.751 426 256 426c93.738 0 170-76.262 170-170zm-68.137 110H306c-5.523 0-10 4.477-10 10s4.477 10 10 10h24.77c-22.024 12.717-47.562 20-74.77 20-34.538 0-66.382-11.74-91.766-31.43 38.438-12.316 82.672-32.49 126.766-57.948 17.089-9.867 33.497-20.149 48.931-30.622h63.053c-6.378 31.294-22.534 59.069-45.121 80zM406 256c0 3.361-.123 6.693-.341 10h-37.748c13.386-10.101 25.71-20.246 36.719-30.243A150.729 150.729 0 01406 256zm14.092-111.555c9.342.557 15.653 2.884 17.773 6.555 2.178 3.773.925 10.628-3.53 19.301-3.979 7.747-10.462 16.736-19.006 26.419a170.105 170.105 0 00-28.412-49.048c13.039-2.638 24.357-3.75 33.175-3.227zM256 106c27.208 0 52.746 7.283 74.77 20H256c-5.523 0-10 4.477-10 10s4.477 10 10 10h100c.58 0 1.145-.06 1.698-.155 19.483 18.001 34.194 41.089 42.005 67.134-17.947 17.346-40.436 35.395-65.946 53.021H276c-5.523 0-10 4.477-10 10s4.477 10 10 10h27.208A804.954 804.954 0 01281 299.301c-47.301 27.309-94.554 48.304-134.021 59.614-23.245-24.611-38.266-57.061-40.638-92.915H176c5.523 0 10-4.477 10-10s-4.477-10-10-10h-69.659a149.522 149.522 0 012.675-20H216c5.523 0 10-4.477 10-10s-4.477-10-10-10H114.58c20.638-58.2 76.235-100 141.42-100zM92.615 367.594c-9.739-.479-16.302-2.82-18.48-6.594-2.168-3.755-.935-10.569 3.472-19.189 3.974-7.772 10.478-16.802 19.063-26.532a170.077 170.077 0 0028.412 49.047c-12.692 2.57-23.747 3.696-32.467 3.268zM456 426c-16.542 0-30-13.458-30-30 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 16.542-13.458 30-30 30-5.523 0-10 4.477-10 10s4.477 10 10 10c16.542 0 30 13.458 30 30 0 5.523 4.477 10 10 10s10-4.477 10-10c0-16.542 13.458-30 30-30 5.523 0 10-4.477 10-10s-4.477-10-10-10zm-40 20.035A50.432 50.432 0 00405.965 436 50.432 50.432 0 00416 425.965 50.432 50.432 0 00426.035 436 50.432 50.432 0 00416 446.035zM482 286c-16.542 0-30 13.458-30 30s13.458 30 30 30 30-13.458 30-30-13.458-30-30-30zm0 40c-5.514 0-10-4.486-10-10s4.486-10 10-10 10 4.486 10 10-4.486 10-10 10zM56 86c16.542 0 30 13.458 30 30 0 5.523 4.477 10 10 10s10-4.477 10-10c0-16.542 13.458-30 30-30 5.523 0 10-4.477 10-10s-4.477-10-10-10c-16.542 0-30-13.458-30-30 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 16.542-13.458 30-30 30-5.523 0-10 4.477-10 10s4.477 10 10 10zm40-20.035A50.432 50.432 0 00106.035 76 50.432 50.432 0 0096 86.035 50.432 50.432 0 0085.965 76 50.432 50.432 0 0096 65.965zM30 186c-16.542 0-30 13.458-30 30s13.458 30 30 30 30-13.458 30-30-13.458-30-30-30zm0 40c-5.514 0-10-4.486-10-10s4.486-10 10-10 10 4.486 10 10-4.486 10-10 10z" />
      </G>
    </Svg>
  )
}

function SvgPlusCircle(props) {
  return (
    <Svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className=""
      {...props}
    >
      <Circle cx={12} cy={12} r={10} />
      <Path d="M12 8v8M8 12h8" />
    </Svg>
  )
}

CirclesSmall = props => (
  <Svg width={365} height={365} {...props}>
    <G
      transform="rotate(-15 294.628 36.372)"
      fill="none"
      fillRule="evenodd"
      opacity={0.152}
    >
      <Circle fill="#006DC2" cx={149} cy={149} r={42} />
      <Circle fill="#D8C3B9" cx={149} cy={42} r={42} />
      <Circle fill="#D8C3B9" cx={149} cy={255} r={42} />
      <Circle
        fill="#D8C3B9"
        transform="rotate(-90 42 149)"
        cx={42}
        cy={149}
        r={42}
      />
      <Circle
        fill="#D8C3B9"
        transform="rotate(-90 255 149)"
        cx={255}
        cy={149}
        r={42}
      />
    </G>
  </Svg>
)

function SvgSearch(props) {
  return (
    <Svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className=""
      {...props}
    >
      <Circle cx={11} cy={11} r={8} />
      <Path d="M21 21l-4.35-4.35" />
    </Svg>
  )
}

SvgLoading = props => {
  let { color = '#fff' } = props;
  return (
    <Svg {...props} viewBox="0 0 38 38" style={{ ...props.style }}>
      <Defs>
        <LinearGradient
          x1="8.042%"
          y1="0%"
          x2="65.682%"
          y2="23.865%"
          id="loading_svg__a"
        >
          <Stop stopColor={color} stopOpacity={0} offset="0%" />
          <Stop stopColor={color} stopOpacity={0.631} offset="63.146%" />
          <Stop stopColor={color} offset="100%" />
        </LinearGradient>
      </Defs>
      <G transform="translate(1 2)" fill="none" fillRule="evenodd">
        <Path
          d="M36 18c0-9.94-8.06-18-18-18"
          stroke="url(#loading_svg__a)"
          strokeWidth={2}
          fill="none"
        />
        <Circle fill="#fff" cx={36} cy={18} r={1} />
      </G>
    </Svg>
  );
}

CircleTouchable = ({onPress}) => (
    <TouchableOpacity onPress={onPress}>
        <Svg width="100%" height="100%" viewBox="0 0 200 200">
            <Circle
                cx="100"
                cy="100"
                r="100"
                fill="none"/>
        </Svg>
    </TouchableOpacity>
)

function SvgUser(props) {
  return (
    <Svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className=""
      {...props}
    >
      <Path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
      <Circle cx={12} cy={7} r={4} />
    </Svg>
  )
}

function SvgSun(props) {
  return (
    <Svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className=""
      {...props}
    >
      <Circle cx={12} cy={12} r={5} />
      <Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
    </Svg>
  )
}

function SvgComponent(props) {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" {...props}>
      <G
        fill="none"
        stroke="currentColor"
        strokeWidth={3}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeMiterlimit={10}>
        <Circle cx={36} cy={36} r={28} />
        <Path d="M36 8v56c-8.6 0-15.5-12.5-15.5-28S27.4 8 36 8s15.5 12.5 15.5 28S44.6 64 36 64M64 36H8M60 22H12M60 50H12" />
      </G>
    </Svg>
  );
}

function Capricorn({ color, height, width, style }) {
  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Path
        d="M272 24H136a72 72 0 00-72 72h48a40 40 0 0140-40h88a32 32 0 0032-32z"
        fill="#a961b2"
      />
      <Path
        d="M304 24a32 32 0 01-32 32h-88a40.015 40.015 0 00-40 40H96a71.946 71.946 0 0172-72z"
        fill="#c378cb"
      />
      <Path
        d="M131.61 56.86l-7.22 14.28-19.48-9.85a72.1 72.1 0 019.35-13.2zM151.05 44.22l-14.1 7.56-8.55-15.92a71.967 71.967 0 0114.26-7.27zM168 24h16v16h-16zM200 24h16v16h-16zM232 24h16v16h-16zM264 24h16v16h-16z"
        fill="#b76bbf"
      />
      <Path
        d="M168 336v-48H56a32 32 0 00-32 32v68a60 60 0 0060 60h20v-48H72v-64z"
        fill="#46349e"
      />
      <Path
        d="M360 280l24-40h-18.334A33.167 33.167 0 01336 192h-9.983a33.167 33.167 0 01-31.465-43.656L296 144h-9.983a33.167 33.167 0 01-31.465-43.656L256 96h-72v184z"
        fill="#c378cb"
      />
      <Path
        d="M368 264l-54.428-27.214a122.249 122.249 0 01-58.834-63.94A122.247 122.247 0 00141.235 96H64v72l33.142 59.655A24 24 0 00118.122 240H144v82.745a32 32 0 009.373 22.628l47.6 47.6A24 24 0 00217.941 400H368z"
        fill="#5f4bbc"
      />
      <Path
        d="M392 168h-29.539C325.756 168 296 135.765 296 96h29.539C362.244 96 392 128.235 392 168zM392 168h29.539C458.244 168 488 135.765 488 96h-29.539C421.756 96 392 128.235 392 168z"
        fill="#c378cb"
      />
      <Path
        d="M200 432l-16 16h-56l60.58-36.348a40 40 0 0019.42-34.3V352h-40l-82.278 68.565A38.137 38.137 0 0072 449.863 38.138 38.138 0 00110.137 488H184a56 56 0 0056-56z"
        fill="#5f4bbc"
      />
      <Path d="M56 128h8V96H24a32 32 0 0032 32z" fill="#46349e" />
      <Path
        d="M480 376a112.017 112.017 0 11-169.71-96c1.68-1.02 3.39-1.98 5.13-2.9a122.847 122.847 0 0031.37-23.7 110.271 110.271 0 0011.5-14.21 94.939 94.939 0 0014.72-34.21c.48-2.35 3.79-36.98-1.01-36.98h40c6.41 28.69 10.92 60.27 1.71 88.9a92.545 92.545 0 01-6.04 14.34c.02.01.05.02.07.03a110.466 110.466 0 0114.42 6.69A111.93 111.93 0 01480 376z"
        fill="#6754c4"
      />
      <Path
        d="M108 152a12 12 0 1012 12 12.01 12.01 0 00-12-12z"
        fill="#362684"
      />
      <G fill="#46349e">
        <Path d="M192 152h16v16h-16zM216 176h16v16h-16zM248 232h16v16h-16zM272 256h16v16h-16zM424 336h16v16h-16zM440 368h16v16h-16zM280 352h16v16h-16zM296 416h16v16h-16zM320 440h16v16h-16zM384 232h16v16h-16zM248 280h16v16h-16z" />
      </G>
      <Path
        d="M422.16 277.96a8.14 8.14 0 01-.78 1.67c-10.17 16.44-26.4 33.29-38.99 45.59-3.48 3.4-7.27 6.72-10.93 9.93-.35.31-.71.62-1.06.92-.81.72-1.61 1.42-2.4 2.12-10.67 9.44-20.23 18.8-22.57 30.98a8.086 8.086 0 01-7.9 6.58 8.244 8.244 0 01-1.39-.12 8.005 8.005 0 01-6.51-9.28 44.933 44.933 0 011.5-5.89c-.01-.01.01-.02.01-.02 5.09-15.7 18.02-27.02 29.77-37.32 2.47-2.16 4.84-4.24 7.09-6.31q1.65-1.515 3.21-3.03c11.86-11.59 27.26-27.54 36.53-42.51a110.466 110.466 0 0114.42 6.69z"
        fill="#5a45b5"
      />
      <Path d="M136 96v40h16a40 40 0 0040-40z" fill="#5f4bbc" />
      <Path
        d="M152 144a8 8 0 01-8-8 8 8 0 018-8 32.054 32.054 0 0031.358-25.6 7.989 7.989 0 017.829-6.4h.008a7.977 7.977 0 017.866 9.477A48.083 48.083 0 01152 144z"
        fill="#46349e"
      />
      <Circle cx={368} cy={376} fill="#5a45b5" r={40} />
      <Path d="M144 168h16v48h-16z" fill="#46349e" />
      <Path
        d="M144 208v32h1.373A54.626 54.626 0 01184 256v-8a40 40 0 00-40-40z"
        fill="#c378cb"
      />
    </Svg>
  );
}

Theme = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Path d="M2,12c0,0,4-6,10-6 c6,0,10,6,10,6s-4,6-10,6C6,18,2,12,2,12z" fill="none" stroke={fill}/>
      <Circle cx="12" cy="10" fill="none" r="4"/>
    </G>
  </Svg>
)

Camera = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Circle cx="12" cy="13" fill="none" r="4"/>
      <Path d="M21,22H3a2,2,0,0,1-2-2V7A2,2,0,0,1,3,5H7L9,2h6l2,3h4a2,2,0,0,1,2,2V20A2,2,0,0,1,21,22Z" fill="none" stroke={fill}/>
    </G>
  </Svg>
)

Camera = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Circle cx="12" cy="13" fill="none" r="4"/>
      <Path d="M21,22H3a2,2,0,0,1-2-2V7A2,2,0,0,1,3,5H7L9,2h6l2,3h4a2,2,0,0,1,2,2V20A2,2,0,0,1,21,22Z" fill="none" stroke={fill}/>
    </G>
  </Svg>
)

Checked = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Polyline fill="none" points=" 6,12 10,16 18,8 "/>
      <Circle cx="12" cy="12" fill="none" r="11" stroke={fill}/>
    </G>
  </Svg>
)