import { Icon, IIconProps } from "native-base";
import * as React from "react";
import { Defs, Path, RadialGradient, Rect, Stop } from "react-native-svg";

export const InstagramColoured = (props: IIconProps) => {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <Rect x={1.5} y={1.5} width={21} height={21} rx={6} fill="url(#a)" />
      <Rect x={1.5} y={1.5} width={21} height={21} rx={6} fill="url(#b)" />
      <Rect x={1.5} y={1.5} width={21} height={21} rx={6} fill="url(#c)" />
      <Path
        d="M17.25 7.875a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z"
        fill="#fff"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Zm0-1.5a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"
        fill="#fff"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.5 11.7c0-2.52 0-3.78.49-4.743A4.5 4.5 0 0 1 6.957 4.99C7.92 4.5 9.18 4.5 11.7 4.5h.6c2.52 0 3.78 0 4.743.49a4.5 4.5 0 0 1 1.966 1.967c.491.963.491 2.223.491 4.743v.6c0 2.52 0 3.78-.49 4.743a4.5 4.5 0 0 1-1.967 1.966c-.963.491-2.223.491-4.743.491h-.6c-2.52 0-3.78 0-4.743-.49a4.5 4.5 0 0 1-1.967-1.967C4.5 16.08 4.5 14.82 4.5 12.3v-.6ZM11.7 6h.6c1.285 0 2.158.001 2.833.056.658.054.994.151 1.229.271a3 3 0 0 1 1.311 1.311c.12.235.217.57.27 1.229C18 9.542 18 10.415 18 11.7v.6c0 1.285-.001 2.158-.056 2.833-.054.658-.151.994-.271 1.229a3 3 0 0 1-1.311 1.311c-.235.12-.57.217-1.229.27C14.458 18 13.585 18 12.3 18h-.6c-1.285 0-2.158-.001-2.833-.056-.658-.054-.994-.151-1.229-.271a3 3 0 0 1-1.311-1.311c-.12-.235-.217-.57-.27-1.229C6 14.458 6 13.585 6 12.3v-.6c0-1.285.001-2.158.056-2.833.054-.658.151-.994.271-1.229a3 3 0 0 1 1.311-1.311c.235-.12.57-.217 1.229-.27C9.542 6 10.415 6 11.7 6Z"
        fill="#fff"
      />
      <Defs>
        <RadialGradient
          id="a"
          cx={0}
          cy={0}
          r={1}
          gradientUnits="userSpaceOnUse"
          gradientTransform="rotate(-55.376 20.937 .05) scale(19.1397)"
        >
          <Stop stopColor="#B13589" />
          <Stop offset={0.793} stopColor="#C62F94" />
          <Stop offset={1} stopColor="#8A3AC8" />
        </RadialGradient>
        <RadialGradient
          id="b"
          cx={0}
          cy={0}
          r={1}
          gradientUnits="userSpaceOnUse"
          gradientTransform="rotate(-65.136 22.325 5.167) scale(16.9457)"
        >
          <Stop stopColor="#E0E8B7" />
          <Stop offset={0.445} stopColor="#FB8A2E" />
          <Stop offset={0.715} stopColor="#E2425C" />
          <Stop offset={1} stopColor="#E2425C" stopOpacity={0} />
        </RadialGradient>
        <RadialGradient
          id="c"
          cx={0}
          cy={0}
          r={1}
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(28.87504 -4.125 .8823 6.17607 .375 2.25)"
        >
          <Stop offset={0.157} stopColor="#406ADC" />
          <Stop offset={0.468} stopColor="#6A45BE" />
          <Stop offset={1} stopColor="#6A45BE" stopOpacity={0} />
        </RadialGradient>
      </Defs>
    </Icon>
  );
};

export default InstagramColoured;