react-native-svg#Rect TypeScript Examples

The following examples show how to use react-native-svg#Rect. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Copy.tsx    From react-native-crypto-wallet-app with MIT License 6 votes vote down vote up
function SvgCopy(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      className="copy_svg__feather copy_svg__feather-copy"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      {...props}
    >
      <Rect width={13} height={13} x={9} y={9} rx={2} ry={2} />
      <Path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
    </Svg>
  );
}
Example #2
Source File: bar-chart.tsx    From beancount-mobile with MIT License 6 votes vote down vote up
renderBarTops = ({
    data,
    width = 0,
    height = 0,
    paddingTop = 0,
    paddingRight = 0,
  }: Pick<
    Omit<AbstractChartConfig, "data">,
    "width" | "height" | "paddingRight" | "paddingTop"
  > & {
    data: number[];
  }) => {
    const baseHeight = this.calcBaseHeight(data, height);

    return data.map((x, i) => {
      const barHeight = this.calcHeight(x, data, height);
      const bw = barWidth * this.getBarPercentage();
      return (
        <Rect
          key={Math.random()}
          x={paddingRight + (i * (width - paddingRight)) / data.length + bw / 2}
          y={((baseHeight - barHeight) / 4) * 3 + paddingTop}
          width={bw}
          height={2}
          fill={
            this.props.chartConfig.color && this.props.chartConfig.color(0.6)
          }
        />
      );
    });
  };
Example #3
Source File: bar-chart.tsx    From beancount-mobile with MIT License 6 votes vote down vote up
renderBars = ({
    data,
    width = 0,
    height = 0,
    paddingTop = 0,
    paddingRight = 0,
    barRadius = 0,
  }: Pick<
    Omit<AbstractChartConfig, "data">,
    "width" | "height" | "paddingRight" | "paddingTop" | "barRadius"
  > & {
    data: number[];
  }) => {
    const baseHeight = this.calcBaseHeight(data, height);

    return data.map((x, i) => {
      const barHeight = this.calcHeight(x, data, height);
      const bw = barWidth * this.getBarPercentage();
      return (
        <Rect
          key={Math.random()}
          x={paddingRight + (i * (width - paddingRight)) / data.length + bw / 2}
          y={
            ((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
            paddingTop
          }
          rx={barRadius}
          width={bw}
          height={(Math.abs(barHeight) / 4) * 3}
          fill={this.props.chartConfig.color && this.props.chartConfig.color(0)}
        />
      );
    });
  };
Example #4
Source File: Hightlight.tsx    From natds-rn with ISC License 6 votes vote down vote up
Fade = (props: FadeProps) => {
  const { theme, fade } = props

  const fadePosition = isHighlight(props) && fade === undefined
    ? defaultPosition : getFadePosition(fade)
  const opacity = isHighlight(props) && fade === undefined
    ? theme.opacity.medium : theme.opacity.veryHigh

  return (
    <View style={{
      top: 0, position: 'absolute', width: '100%', height: '100%', zIndex: 1
    }}
    >
      <Svg height="100%" width="100%" style={StyleSheet.absoluteFillObject}>
        <Defs>
          <LinearGradient id="fade_overlay" {...fadePosition}>
            <Stop offset="1" stopColor={theme.color.highlight} stopOpacity={opacity} />
            <Stop offset="0" stopColor={theme.color.highlight} stopOpacity="0" />
          </LinearGradient>
        </Defs>
        <Rect width="100%" height="100%" fill="url(#fade_overlay)" />
      </Svg>
    </View>
  )
}
Example #5
Source File: PiercedTongue.tsx    From react-native-bigheads with MIT License 6 votes vote down vote up
PiercedTongue = () => {
  const { colors } = useTheme()

  return (
    <G>
      <Path d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z" fill={colors.outline} />
      <Path
        d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit="10"
        strokeWidth="6px"
      />
      <Circle cx="500.5" cy="721.5" r="6.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
      <Path
        d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
        fill={colors.tongue}
      />
      <Path
        d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit="10"
        strokeWidth="8px"
      />
      <Path
        d="M479.31,626.6l.91-.21.76-.14c.49-.08,1-.14,1.46-.18a21.42,21.42,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.39,21.39,0,0,1,10.34,6.11A20.07,20.07,0,0,1,506.54,643a17.19,17.19,0,0,1-1.37,10.35c-2.08-2.93-3.66-5.55-5.32-7.76a27.26,27.26,0,0,0-2.46-3,14.09,14.09,0,0,0-2.69-2.16,15.31,15.31,0,0,0-6.11-2.08,25.67,25.67,0,0,0-3.43-.22c-.59,0-1.18,0-1.76,0l-.85.06-.4,0c-.09,0-.29,0-.22,0Z"
        fill={colors.outline}
      />
      <Rect x="498" y="685" width="5" height="19" rx="2.5" fill="#FFC227" stroke={colors.outline} strokeWidth="2" />
      <Circle cx="500.5" cy="684.5" r="8.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
    </G>
  )
}
Example #6
Source File: Redwood.tsx    From react-native-bigheads with MIT License 6 votes vote down vote up
RedwoodGraphic = () => {
  return (
    <>
      <Rect x="441.15" y="860.49" width="112" height="112" fill="none" />
      <Rect x="433.91" y="856" width="132.18" height="132.18" fill="none" />
      <Path
        d="M490.59,859c-4.7,2.37-14.62,7-20,10.65s-4.7,7.1-7.05,9.47-9.4,8.28-14.1,11.83-3.53,13-4.7,16.56-3.53,11.83-4.71,15.38,2.35,8.28,4.71,13,8.22,17.74,10.57,22.48,9.41,2.36,15.28,7.09a206.67,206.67,0,0,0,20,14.2c5.87,3.55,8.23,3.55,14.1,0a205.35,205.35,0,0,0,20-14.2c5.88-4.73,12.93-2.36,15.29-7.09s8.22-17.75,10.57-22.48,5.88-9.47,4.71-13-3.53-11.83-4.71-15.38,0-13-4.7-16.56a174,174,0,0,1-14.1-11.83c-4-3.77-2.35-5.92-7.06-9.47s-15.28-8.28-20-10.65A14.93,14.93,0,0,0,490.59,859Z"
        fillRule="evenodd"
        fill={colors.white}
      />
      <Path
        d="M474,879.46l22,15a3.14,3.14,0,0,0,1.68.52,3,3,0,0,0,1.67-.52l22-15.07a3,3,0,0,0-.41-5.13l-22-10.9a3.05,3.05,0,0,0-2.64,0l-21.94,10.9a3,3,0,0,0-.36,5.18Zm31.14,19.73a3,3,0,0,0,1.3,2.49l17.64,12.06a3,3,0,0,0,3.66-.24l14.79-13.23a3,3,0,0,0-.13-4.6l-14.12-11.29a3,3,0,0,0-3.55-.14l-18.29,12.51A3,3,0,0,0,505.13,899.19Zm-43.87,16.4a3,3,0,0,1,1,2.54,3,3,0,0,1-1.49,2.29l-10.53,6.31a3,3,0,0,1-3.39-.23,3,3,0,0,1-1-3.27l3.9-12.25a3,3,0,0,1,2.05-2,2.92,2.92,0,0,1,2.78.66Zm57.13,1.28-19.05-13a3,3,0,0,0-3.34,0l-19,13a3,3,0,0,0-1.3,2.29,3.13,3.13,0,0,0,1,2.46l19,17a2.94,2.94,0,0,0,2,.75,3,3,0,0,0,2-.75l19-17a3,3,0,0,0,1-2.46A3,3,0,0,0,518.39,916.87ZM467.6,913.5l-14.78-13.23a3.07,3.07,0,0,1-1-2.37,3,3,0,0,1,1.12-2.28l14.12-11.36a3,3,0,0,1,3.57-.13l18.27,12.5a3.05,3.05,0,0,1,1.36,2.53,3,3,0,0,1-1.36,2.52l-17.62,12.06A3,3,0,0,1,467.6,913.5Zm75.88,19-15.05-9a3,3,0,0,0-3.51.34l-18.39,16.41a3,3,0,0,0,.87,5l25.51,10.34a3,3,0,0,0,3.85-1.57l7.9-17.71A3,3,0,0,0,543.48,932.51ZM545.57,911l3.89,12.25h0a3,3,0,0,1-2.86,3.93,2.91,2.91,0,0,1-1.52-.43l-10.55-6.31a2.93,2.93,0,0,1-1.44-2.29,3,3,0,0,1,1-2.54l6.69-6a3,3,0,0,1,2.77-.66A3,3,0,0,1,545.57,911Zm-55.8,32a3,3,0,0,0-1-2.76l-18.39-16.41a3,3,0,0,0-3.51-.34l-15,9a3.05,3.05,0,0,0-1.2,3.84l7.92,17.71a3,3,0,0,0,3.84,1.56l25.5-10.33A3,3,0,0,0,489.77,943Zm9,5,20.46,8.29a3,3,0,0,1,.54,5.27l-20.48,14.22a2.94,2.94,0,0,1-1.67.54,3,3,0,0,1-1.67-.54l-20.46-14.22a3,3,0,0,1,.58-5.27l20.46-8.29A3.09,3.09,0,0,1,498.79,948.06Z"
        fill="#c04927"
        fillRule="evenodd"
      />
    </>
  )
}
Example #7
Source File: Chevron.tsx    From react-native-meetio with MIT License 6 votes vote down vote up
function Chevron({ width = 24, height = 24, fillColor = "#78849e" }: Props) {
  return (
    <Svg viewBox="0 0 24 24" {...{ width, height }}>
      <Defs>
        <ClipPath id="prefix__a">
          <Path fill="none" d="M0 0h24v24H0z" />
        </ClipPath>
      </Defs>
      <G data-name="icons/chevron" opacity={0.563} clipPath="url(#prefix__a)">
        <Path fill="none" d="M0 0h24v24H0z" />
        <Rect
          width={8}
          height={2}
          rx={1}
          transform="rotate(45 -6.01 14.389)"
          fill={fillColor}
        />
        <Rect
          data-name="line"
          width={8}
          height={2}
          rx={1}
          transform="rotate(-45 22.696 -6.58)"
          fill={fillColor}
        />
      </G>
    </Svg>
  );
}
Example #8
Source File: Azerbaijan.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function SvgAzerbaijan(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#azerbaijan_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="azerbaijan_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#azerbaijan_svg__a)">
        <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        <Mask id="azerbaijan_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#azerbaijan_svg__b)">
          <Path fill="#24AAD5" fillRule="evenodd" d="M-8 13h56V0H-8v13z" clipRule="evenodd" />
          <Path fill="#21BF75" fillRule="evenodd" d="M-8 40h56V27H-8v13z" clipRule="evenodd" />
          <Path fill="#ED1845" fillRule="evenodd" d="M-8 27h56V13H-8v14z" clipRule="evenodd" />
          <G filter="url(#azerbaijan_svg__filter0_d)">
            <Path
              fill="#fff"
              fillRule="evenodd"
              d="M20 23.5c.823 0 1.587-.248 2.223-.674a3.333 3.333 0 110-6.652A4 4 0 1020 23.5zm4-4a1.333 1.333 0 11-2.667 0 1.333 1.333 0 012.667 0z"
              clipRule="evenodd"
            />
          </G>
        </G>
      </G>
      <Defs>
        <Pattern
          id="azerbaijan_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#azerbaijan_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #9
Source File: PixieCut.tsx    From react-native-bigheads with MIT License 5 votes vote down vote up
Front = ({ hairColor }: HairProps) => {
  const { colors, skin } = useTheme()

  const { base, shadow } = colors.hair[hairColor]

  return (
    <>
      <Rect x="290.23" y="414.02" width="439.24" height="64.15" fill={skin.shadow} />
      <Path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill={base}
      />
      <Path
        d="M325.14,464.92c.9-57.85,19.88-126.43,66.22-207.44h0q-4.07,1.88-8.06,3.88l-.59.29c-1.22.61-2.44,1.24-3.65,1.88l-1,.53q-5.64,3-11.13,6.23l-.9.53c-1.16.69-2.31,1.39-3.46,2.1l-.86.54q-5.37,3.35-10.56,6.93l-1.08.75c-1.08.76-2.16,1.52-3.23,2.29l-.65.47q-3.27,2.39-6.47,4.84l-.62.48c-1,.78-2,1.58-3,2.39l-1.18.94c-1,.81-2,1.62-3,2.45l0,0c-2.11,1.75-4.18,3.55-6.24,5.37l-1.14,1-2.69,2.45L320.53,305q-4.27,4-8.37,8.17l-1.37,1.41c-.8.82-1.59,1.64-2.37,2.47l-1.37,1.48Q305,320.77,303,323c-.46.51-.92,1-1.37,1.54-.71.81-1.41,1.63-2.11,2.45L298,328.8c-.68.81-1.36,1.62-2,2.44-.54.66-1.07,1.33-1.61,2-1.06,1.33-2.11,2.66-3.15,4-.55.7-1.09,1.4-1.62,2.11s-1.2,1.59-1.79,2.4l-1.59,2.18c-.56.78-1.13,1.55-1.68,2.33-.94,1.34-1.88,2.69-2.8,4.05-.5.73-1,1.48-1.48,2.22s-1.11,1.66-1.65,2.5-1,1.54-1.48,2.31-1.13,1.8-1.69,2.71c-.43.69-.86,1.38-1.28,2.07q-1.32,2.19-2.6,4.4c-.42.72-.82,1.44-1.23,2.16-.54.95-1.08,1.91-1.61,2.87-.4.73-.8,1.46-1.19,2.19-.64,1.19-1.27,2.39-1.89,3.59-.41.78-.81,1.56-1.21,2.34-.64,1.28-1.28,2.55-1.9,3.84-.34.69-.67,1.39-1,2.09-.52,1.09-1,2.19-1.54,3.29l-.91,2q-1.11,2.47-2.17,5c-.22.52-.43,1.05-.65,1.57-.53,1.27-1,2.54-1.56,3.82-.27.67-.53,1.34-.79,2-.49,1.26-1,2.53-1.45,3.8l-.61,1.65q-1,2.63-1.86,5.26l-.56,1.7q-.66,2-1.29,4c-.2.63-.4,1.27-.59,1.91q-.72,2.31-1.38,4.63c-.1.33-.2.66-.29,1q-.78,2.76-1.5,5.54l-.45,1.78c-.19.74-.37,1.49-.55,2.24-1.56,6.69-2.88,13.23-4,19.63-.1.66-.22,1.31-.32,2l-.24,1.52q-.45,2.93-.82,5.88c-.06.43-.11.87-.16,1.3-.2,1.59-.38,3.19-.55,4.79l-.18,1.81c-.17,1.68-.32,3.37-.45,5.06l-.09,1q-.23,3-.38,6.05c0,.53-.05,1.07-.08,1.6q-.11,2.36-.18,4.71c0,.59,0,1.18-.05,1.77,0,2.05-.07,4.11-.07,6.17v.1c0,2.22,0,4.42.08,6.62,0,.76.06,1.52.08,2.28.05,1.47.1,2.94.17,4.41.05.89.11,1.77.16,2.66.08,1.33.16,2.66.25,4l.24,2.83c.11,1.26.21,2.52.34,3.77.09,1,.21,1.94.31,2.91.14,1.21.27,2.43.42,3.64.12,1,.26,2,.39,2.95.16,1.18.33,2.37.5,3.55.15,1,.31,2,.47,3,.19,1.16.37,2.33.58,3.49.17,1,.35,2,.54,3,.21,1.15.43,2.3.66,3.44s.4,2,.61,3c.24,1.14.48,2.27.74,3.4s.45,2,.68,2.93c.27,1.13.54,2.25.82,3.36s.49,1.95.75,2.92.59,2.22.9,3.33c.26,1,.53,1.92.81,2.87.32,1.11.65,2.21,1,3.31s.57,1.89.87,2.84.71,2.19,1.07,3.28c.31.93.61,1.87.93,2.8.38,1.09.76,2.18,1.15,3.27l1,2.74c.41,1.09.83,2.18,1.25,3.27.34.89.68,1.79,1,2.68.44,1.09.89,2.19,1.34,3.28.36.86.71,1.73,1.08,2.59.48,1.12,1,2.22,1.46,3.33.36.83.72,1.65,1.09,2.47.52,1.16,1.07,2.3,1.61,3.44.36.77.71,1.54,1.08,2.3.6,1.26,1.23,2.5,1.86,3.75l.95,1.9q2.88,5.61,6,11.07c.36.62.73,1.23,1.09,1.84.7,1.2,1.39,2.4,2.11,3.58.44.72.89,1.42,1.33,2.14.66,1.07,1.32,2.14,2,3.19.48.76,1,1.5,1.47,2.24.65,1,1.31,2,2,3,.51.76,1,1.52,1.56,2.28.66,1,1.32,1.92,2,2.88.54.77,1.1,1.53,1.65,2.3s1.34,1.85,2,2.77,1.15,1.53,1.72,2.29l2.07,2.7c.59.76,1.19,1.51,1.79,2.26s1.41,1.76,2.12,2.63,1.23,1.49,1.85,2.23,1.44,1.72,2.17,2.57l1.91,2.2,2.22,2.5c.65.73,1.31,1.44,2,2.16.4.44.81.87,1.22,1.31,2.37,1.37-57.48-103.69-17.57-216.15C297.34,465.29,309.57,465.08,325.14,464.92Z"
        fill={shadow}
      />
      <Path
        d="M420.82,134.59A71.58,71.58,0,0,1,433,112.84c1.37-1.59,2.72-3.21,4.16-4.74s3-3,4.53-4.41,3.21-2.73,4.88-4,3.41-2.5,5.17-3.65,3.6-2.21,5.47-3.19l2.82-1.43a31,31,0,0,1,2.86-1.35c2-.76,3.89-1.62,5.89-2.29s4-1.32,6-1.81a72,72,0,0,1,24.86-2,112.32,112.32,0,0,0-24,5c-1,.26-1.9.7-2.85,1l-2.85,1c-1.88.73-3.69,1.65-5.54,2.45s-3.58,1.85-5.38,2.77-3.44,2.09-5.17,3.12-3.33,2.28-5,3.41-3.15,2.52-4.76,3.75-3,2.68-4.53,4l-4.28,4.31A110.47,110.47,0,0,0,420.82,134.59Z"
        fill={colors.white}
      />
      <Path
        d="M520.11,249.17a367.15,367.15,0,0,0-42.48,4.93c-3.49.68-7,1.42-10.44,2.06s-6.9,1.61-10.35,2.41l-10.27,2.72c-3.39,1-6.76,2.08-10.14,3.11A312.8,312.8,0,0,0,397,280.14a347.55,347.55,0,0,0-37.25,21A183.48,183.48,0,0,1,394.83,276a218.27,218.27,0,0,1,39.76-17.3c3.47-1,6.93-2.08,10.42-3.05s7-1.82,10.54-2.59,7.1-1.41,10.66-2,7.15-1.08,10.74-1.52A189.39,189.39,0,0,1,520.11,249.17Z"
        fill={colors.white}
      />
      <Path
        d="M529.83,233.83a70.16,70.16,0,0,1,15.44-1.92c2.56-.06,5.11,0,7.67.13s5.12.3,7.68.52a138.69,138.69,0,0,1,15.35,2.2A95.37,95.37,0,0,1,591.05,239l-3.89,11.35c-4.62-1.38-9.25-2.78-13.95-4.07s-9.45-2.51-14.25-3.71l-7.25-1.76c-2.43-.57-4.87-1.15-7.3-1.81A85.14,85.14,0,0,1,529.83,233.83Z"
        fill={colors.outline}
      />
      <Path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit={10}
        strokeWidth="12px"
      />
      <Path
        d="M284.48,462.85c.18-.75.33-1.32.53-1.94s.4-1.2.62-1.78c.46-1.17,1-2.31,1.51-3.42a48.48,48.48,0,0,1,3.85-6.42,37.51,37.51,0,0,1,4.88-5.75,17,17,0,0,1,7-4,31,31,0,0,1-.87,7.68c-.28,1.14-.59,2.25-.93,3.32l-1,3.25q-1,3.23-2,6.39c-.33,1.06-.68,2.09-1,3.13-.17.51-.37,1-.56,1.53s-.39,1-.56,1.4Z"
        fill={colors.outline}
      />
      <Path
        d="M710.68,459.58a35,35,0,0,1,6.23.06,60.73,60.73,0,0,1,6.24.86c1,.2,2.08.4,3.12.64a25.74,25.74,0,0,1,3.11.86,18.53,18.53,0,0,1,6.24,3.58,18.74,18.74,0,0,1-6.24,3.59,25.68,25.68,0,0,1-3.11.85c-1,.25-2.08.45-3.12.65q-3.12.58-6.24.86a35,35,0,0,1-6.23.05Z"
        fill={colors.outline}
      />
      <Path
        d="M444.84,452.07a132.29,132.29,0,0,1,1.49-14.25c.72-4.7,1.6-9.37,2.61-14s2.15-9.25,3.44-13.83A132.09,132.09,0,0,1,457,396.4a131.77,131.77,0,0,1-1.5,14.25q-1.08,7.05-2.61,14t-3.44,13.83A137,137,0,0,1,444.84,452.07Z"
        fill={colors.white}
      />
      <Path
        d="M668,452.07a134.88,134.88,0,0,1,1.49-14.25q1.09-7.05,2.61-14T675.49,410a132.09,132.09,0,0,1,4.57-13.58,131.76,131.76,0,0,1-1.49,14.25q-1.1,7.05-2.61,14c-1,4.64-2.16,9.25-3.45,13.83A134.48,134.48,0,0,1,668,452.07Z"
        fill={colors.white}
      />
    </>
  )
}
Example #10
Source File: BobCut.tsx    From react-native-bigheads with MIT License 5 votes vote down vote up
Front = ({ hairColor }: HairProps) => {
  const { colors, skin } = useTheme()

  const { base } = colors.hair[hairColor]

  return (
    <>
      <Rect x="290.23" y="414.02" width="439.24" height="64.15" fill={skin.shadow} />
      <Path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27A283.11,283.11,0,0,0,332.67,294q-4.37,3.58-8.57,7.32c-28.34,23.69-50.34,53.69-65.47,87.9q-2.2,4.92-4.16,9.93a212.31,212.31,0,0,0-9.41,30.61C213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill={base}
      />
      <Path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27A283.11,283.11,0,0,0,332.67,294q-4.37,3.58-8.57,7.32c-28.34,23.69-50.34,53.69-65.47,87.9q-2.2,4.92-4.16,9.93a212.31,212.31,0,0,0-9.41,30.61C213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit={10}
        strokeWidth="12px"
      />
      <Path
        d="M584.15,228l-6.47-1.74c-25.21-7-50.93-7.55-75.13-7.55-30.59,0-57.07,3.49-80.91,10.64l-4.26,1.27-.49.15a299.89,299.89,0,0,0-93.42,52c-3,2.46-6,5-8.84,7.55-29.63,24.82-52.93,56.11-69.24,93-1.56,3.49-3,7.05-4.42,10.57-4.18,10.69-21.29,59.77-23.75,70.65l72.53,1c7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05L783.8,500c0-86.19-41.3-149-46.48-156.6C706,288,651.63,247,584.15,228ZM750.31,547.25c-3.17-25.92-11.17-55.26-26.51-87.84l-3.89-8.27-6.49,0-26.78-93.63L663,450.81c-40.43-.22-107.06-.54-172.86-.69l-25.95-97.57-22.94,97.5c-27.4,0-51.55,0-72.09.09L340.6,367.53l-25.42,83c-11.45.15-20.16.34-26,.56l-9.83.38-3.29,9.26C261.72,501.22,257.92,545,264.76,591c-15.9-40-22.46-91.39-5.65-157.63l.09-.38A197.7,197.7,0,0,1,268,404.47c1.2-3.09,2.51-6.22,3.91-9.35,14.54-32.86,35.24-60.67,61.51-82.63l.33-.29c2.65-2.35,5.39-4.69,8.14-6.95a270.41,270.41,0,0,1,84-46.87l4.05-1.2c21.12-6.34,44.87-9.43,72.6-9.43,22.22,0,45.73.51,67.45,6.52l6.38,1.71c60.24,17,108.53,53.27,136,102.23l.37.66.44.63c.42.59,41.61,59.63,41.61,140.5A252.08,252.08,0,0,1,750.31,547.25Z"
        fill={base}
      />
      <Path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66ZM307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit={10}
        strokeWidth="12px"
      />
      <Path
        d="M284.48,462.85c.18-.75.33-1.32.53-1.94s.4-1.2.62-1.78c.46-1.17,1-2.31,1.51-3.42a48.48,48.48,0,0,1,3.85-6.42,37.51,37.51,0,0,1,4.88-5.75,17,17,0,0,1,7-4,31,31,0,0,1-.87,7.68c-.28,1.14-.59,2.25-.93,3.32l-1,3.25q-1,3.23-2,6.39c-.33,1.06-.68,2.09-1,3.13-.17.51-.37,1-.56,1.53s-.39,1-.56,1.4Z"
        fill={colors.outline}
      />
      <Path
        d="M710.68,459.58a35,35,0,0,1,6.23.06,60.73,60.73,0,0,1,6.24.86c1,.2,2.08.4,3.12.64a25.74,25.74,0,0,1,3.11.86,18.53,18.53,0,0,1,6.24,3.58,18.74,18.74,0,0,1-6.24,3.59,25.68,25.68,0,0,1-3.11.85c-1,.25-2.08.45-3.12.65q-3.12.58-6.24.86a35,35,0,0,1-6.23.05Z"
        fill={colors.outline}
      />
      <Path
        d="M444.84,452.07a134.88,134.88,0,0,1,1.49-14.25c.72-4.7,1.6-9.37,2.61-14s2.15-9.25,3.44-13.83A132.09,132.09,0,0,1,457,396.4a131.77,131.77,0,0,1-1.5,14.25q-1.08,7.05-2.61,14t-3.44,13.83A137,137,0,0,1,444.84,452.07Z"
        fill={colors.white}
      />
      <Path
        d="M668,452.07a134.88,134.88,0,0,1,1.49-14.25q1.09-7.05,2.61-14T675.49,410a132.09,132.09,0,0,1,4.57-13.58,131.76,131.76,0,0,1-1.49,14.25q-1.1,7.05-2.61,14c-1,4.64-2.16,9.25-3.45,13.83A134.48,134.48,0,0,1,668,452.07Z"
        fill={colors.white}
      />
      <Path d="M237.55,468.26a143,143,0,0,1,11.42-38" fill={base} />
      <Path
        d="M231.6,467.51c.09-1,.18-1.85.32-2.73s.29-1.72.46-2.58c.35-1.7.75-3.38,1.23-5a78.48,78.48,0,0,1,3.47-9.75,66.09,66.09,0,0,1,4.7-9.22,29.18,29.18,0,0,1,7.19-7.91,50.46,50.46,0,0,1-.48,10.43c-.25,1.63-.51,3.25-.83,4.84s-.58,3.19-.83,4.78l-1.63,9.49-.83,4.68c-.12.78-.28,1.56-.42,2.32s-.3,1.57-.44,2.19Z"
        fill={colors.outline}
      />
      <Path d="M769.33,496s-.46-20.78-8.37-47.63" fill={base} />
      <Path
        d="M763.33,496.12l-.24-2.76c-.08-1-.16-1.93-.22-2.89l-.45-5.84-.91-11.8c-.3-3.95-.71-7.91-1-11.93-.08-2-.16-4.06-.1-6.14a47.58,47.58,0,0,1,.5-6.4,42.78,42.78,0,0,1,6.58,10.89,62.13,62.13,0,0,1,2.17,5.84c.67,2,1.24,4,1.81,6a111.89,111.89,0,0,1,2.69,12.17c.33,2.05.63,4.12.81,6.21q.16,1.56.24,3.15c.06,1.07.08,2.07.07,3.28Z"
        fill={colors.outline}
      />
      <Path
        d="M506.7,235.5a369.62,369.62,0,0,0-42.48,4.93c-3.48.68-7,1.42-10.44,2.06s-6.9,1.61-10.35,2.41l-10.26,2.72c-3.4,1-6.77,2.08-10.15,3.12a314.87,314.87,0,0,0-39.44,15.73,348.17,348.17,0,0,0-37.24,21,183.41,183.41,0,0,1,35.08-25.14A219.23,219.23,0,0,1,421.18,245c3.48-1,6.94-2.09,10.42-3.05s7-1.82,10.55-2.6,7.1-1.4,10.65-2,7.16-1.07,10.74-1.52A190,190,0,0,1,506.7,235.5Z"
        fill={colors.white}
      />
    </>
  )
}
Example #11
Source File: SleepBars.tsx    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up
StyledRect = styled(Rect).attrs<RectProps>(({ value, theme }) => ({
  fill: value === Value.Asleep ? theme.accent : colors.darkBlue
}))<RectProps>``
Example #12
Source File: TargetBars.tsx    From nyxo-app with GNU General Public License v3.0 5 votes vote down vote up
TargetBars: FC<Props> = ({
  data,
  scaleX,
  scaleY,
  barWidth,
  onPress,
  start
}) => {
  const end = addHours(new Date(start ?? new Date()), 8)

  const { bars } = useMemo(
    () => ({
      bars: data.map((datum) => {
        const y = scaleY(new Date(start ?? new Date()).valueOf())
        const x = scaleX(new Date(datum.date))
        const height =
          scaleY(end.valueOf()) -
          scaleY(new Date(start ?? new Date()).valueOf())

        if (Number.isNaN(y)) return null

        return (
          <G onPress={() => onPress(datum)} key={datum.date}>
            <Rect
              x={x}
              width={barWidth}
              fillOpacity={0.1}
              rx={5}
              y={y}
              height={height}
              fill={colors.darkBlue}
            />
          </G>
        )
      })
    }),
    [barWidth, data, end, onPress, scaleX, scaleY, start]
  )

  if (!start && typeof start !== 'string') return null

  return <G>{bars}</G>
}
Example #13
Source File: Armenia.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
function SvgArmenia(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#armenia_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="armenia_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#armenia_svg__a)">
        <Rect width={59} height={43} x={-9} y={-3} fill="#fff" rx={2} />
        <Mask id="armenia_svg__b" width={59} height={43} x={-9} y={-3} maskUnits="userSpaceOnUse">
          <Rect width={59} height={43} x={-9} y={-3} fill="#fff" rx={2} />
        </Mask>
        <G fillRule="evenodd" clipRule="evenodd" mask="url(#armenia_svg__b)">
          <Path fill="#1047B9" d="M-9 28h59V13H-9v15z" />
          <Path fill="#F01C31" d="M-9 13h59V0H-9v13z" />
          <Path fill="#FECB2F" d="M-9 40h59V27H-9v13z" />
        </G>
      </G>
      <Defs>
        <Pattern
          id="armenia_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#armenia_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #14
Source File: Argentine.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
function SvgArgentine(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#argentine_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="argentine_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#argentine_svg__a)">
        <Rect
          width={55.5}
          height={39.5}
          x={-7.75}
          y={0.25}
          fill="#fff"
          stroke="#F5F5F5"
          strokeWidth={0.5}
          rx={1.75}
        />
        <Mask id="argentine_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect
            width={55.5}
            height={39.5}
            x={-7.75}
            y={0.25}
            fill="#fff"
            stroke="#fff"
            strokeWidth={0.5}
            rx={1.75}
          />
        </Mask>
        <G mask="url(#argentine_svg__b)">
          <Path
            fill="#88BBE8"
            fillRule="evenodd"
            d="M-8 13h56V0H-8v13zM-8 40h56V27H-8v13z"
            clipRule="evenodd"
          />
          <Path
            fill="#F4B32E"
            stroke="#DB7A2C"
            strokeWidth={0.667}
            d="M20 24.333a4.333 4.333 0 100-8.666 4.333 4.333 0 000 8.666z"
          />
        </G>
      </G>
      <Defs>
        <Pattern
          id="argentine_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#argentine_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #15
Source File: Angola.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function SvgAngola(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#angola_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="angola_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#angola_svg__a)">
        <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        <Mask id="angola_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#angola_svg__b)">
          <Path fill="url(#angola_svg__paint0_linear)" d="M-8 0h56v40H-8z" />
          <G filter="url(#angola_svg__filter0_d)">
            <Path fill="#262626" fillRule="evenodd" d="M-8 40h56V21H-8v19z" clipRule="evenodd" />
          </G>
          <G filter="url(#angola_svg__filter1_d)">
            <Path fill="#DD2137" fillRule="evenodd" d="M-8 21h56V0H-8v21z" clipRule="evenodd" />
          </G>
          <G filter="url(#angola_svg__filter2_d)">
            <Path
              fill="#F8D84B"
              fillRule="evenodd"
              d="M24.78 22.909a8.297 8.297 0 00.761-1.925c1.118-4.329-1.357-8.778-5.528-9.938-.695-.193-1.41.235-1.596.957-.186.721.226 1.463.922 1.656 2.78.773 4.43 3.74 3.685 6.625-.102.396-.244.77-.42 1.119l-4.003-2.77a1.274 1.274 0 00-1.807.376c-.399.621-.237 1.46.362 1.875l3.669 2.539a5.04 5.04 0 01-4.184.686c-.695-.193-1.41.235-1.596.956-.187.722.226 1.463.921 1.656 2.606.725 5.257-.006 7.152-1.712l1.856 1.285a1.274 1.274 0 001.807-.375c.4-.622.237-1.462-.361-1.876l-1.64-1.134zm-6.901-5.855c.72 0 1.303-.605 1.303-1.352 0-.747-.584-1.352-1.303-1.352-.72 0-1.303.605-1.303 1.352 0 .747.583 1.352 1.303 1.352z"
              clipRule="evenodd"
            />
          </G>
        </G>
      </G>
      <Defs>
        <LinearGradient
          id="angola_svg__paint0_linear"
          x1={-8}
          x2={-8}
          y1={0}
          y2={40}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#FF323E" />
          <Stop offset={1} stopColor="#FD0D1B" />
        </LinearGradient>
        <Pattern
          id="angola_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#angola_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #16
Source File: Albania.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
function SvgAlbania(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#albania_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="albania_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#albania_svg__a)">
        <Mask id="albania_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#albania_svg__b)">
          <Path fill="#EE343C" d="M-8 0h56v40H-8z" />
          <Path
            fill="#262626"
            fillRule="evenodd"
            d="M16.959 8.915a.667.667 0 00-.848-.084l-2.53 1.71a.667.667 0 00.071 1.146l3.863 1.957a.667.667 0 01.365.595v1.577a.667.667 0 01-.667.667H15.42a.667.667 0 01-.3-.072l-4.664-2.362a.667.667 0 00-.776.126l-1.636 1.658a.667.667 0 00.173 1.063l3.413 1.729c.454.23.493.862.072 1.147L10.029 20.9a.667.667 0 00.24 1.206l3.547.718a.667.667 0 01.27 1.185l-2.49 1.891c-.508.387-.234 1.198.404 1.198h.557a.67.67 0 00.164-.02l3.494-.886a.667.667 0 01.721 1.013l-.996 1.514a.667.667 0 00.557 1.033h2.21c.288 0 .544.185.634.458l.525 1.598c.201.611 1.066.611 1.267 0l.526-1.598a.667.667 0 01.633-.458h2.21c.531 0 .849-.59.557-1.033l-.996-1.514a.667.667 0 01.72-1.012l3.495.885a.67.67 0 00.164.02h.557c.639 0 .912-.811.404-1.198l-2.49-1.891a.667.667 0 01.27-1.185l3.547-.718a.667.667 0 00.24-1.206L29.3 19.77a.667.667 0 01.072-1.146l3.412-1.73a.667.667 0 00.173-1.062l-1.636-1.658a.667.667 0 00-.776-.126l-4.663 2.362a.667.667 0 01-.301.072h-1.794a.667.667 0 01-.667-.667V14.24c0-.252.141-.481.365-.595l3.863-1.957a.666.666 0 00.072-1.147l-2.531-1.71a.667.667 0 00-.848.085l-3.066 3.106a.667.667 0 01-.949 0L16.96 8.915z"
            clipRule="evenodd"
          />
        </G>
      </G>
      <Defs>
        <Pattern
          id="albania_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#albania_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #17
Source File: Afghanistan.tsx    From react-native-crypto-wallet-app with MIT License 5 votes vote down vote up
function SvgAfganistan(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#afganistan_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="afganistan_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#afganistan_svg__a)">
        <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        <Mask id="afganistan_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#afganistan_svg__b)">
          <Path fill="#1AB11F" d="M19 0h29v40H19z" />
          <Path fill="#262626" fillRule="evenodd" d="M-8 40h19V0H-8v40z" clipRule="evenodd" />
          <Path fill="#DC0D18" fillRule="evenodd" d="M10 40h19V0H10v40z" clipRule="evenodd" />
          <Path
            fill="#fff"
            d="M17.09 22.43l.348-.569-.347.57zm-.693 1.14l-.347.569.347-.57zm6.434-.147l.372.554-.372-.554zm-.743-1.106l.371.553-.371-.553zM15.333 18c0-.736-.597-1.333-1.333-1.333V18h1.333zm2.105 3.861c-1.242-.756-2.105-2.189-2.105-3.861H14c0 2.136 1.103 4 2.744 5l.694-1.139zm.444 1.833a1.333 1.333 0 00-.444-1.833L16.744 23l1.138.694zm-1.832.445c.629.383 1.449.184 1.832-.445L16.744 23l-.694 1.139zM12.667 18c0 2.599 1.344 4.896 3.383 6.139L16.744 23C15.104 22 14 20.136 14 18h-1.333zM14 16.667c-.736 0-1.333.597-1.333 1.333H14v-1.333zM26.333 18c0-.736-.597-1.333-1.333-1.333V18h1.333zm-3.13 5.977c1.896-1.274 3.13-3.487 3.13-5.977H25c0 2.046-1.013 3.844-2.54 4.87l.743 1.107zm-1.85-.364c.41.612 1.239.774 1.85.364l-.744-1.107-1.106.743zm.363-1.85a1.333 1.333 0 00-.363 1.85l1.106-.743-.743-1.107zM23.666 18c0 1.602-.791 2.985-1.95 3.763l.743 1.107C23.987 21.844 25 20.046 25 18h-1.333zM25 16.667c-.736 0-1.333.597-1.333 1.333H25v-1.333z"
            opacity={0.75}
          />
          <Path
            fill="#fff"
            fillOpacity={0.5}
            fillRule="evenodd"
            d="M19.5 21c1.38 0 2.5-1.79 2.5-4s-1.12-4-2.5-4-2.5 1.79-2.5 4 1.12 4 2.5 4z"
            clipRule="evenodd"
          />
        </G>
      </G>
      <Defs>
        <Pattern
          id="afganistan_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#afganistan_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}
Example #18
Source File: Candle.tsx    From react-native-wagmi-charts with MIT License 5 votes vote down vote up
AnimatedRect = Animated.createAnimatedComponent(Rect)
Example #19
Source File: RenderStackBars.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
RenderStackBars = (props: Props) => {
  const {
    barBackgroundPattern,
    patternId,
    item,
    index,
    containerHeight,
    maxValue,
    spacing,
    propSpacing,
    rotateLabel,
    xAxisThickness,
    label,
    labelTextStyle,
    xAxisTextNumberOfLines,
    renderTooltip,
    initialSpacing,
    selectedIndex,
    setSelectedIndex,
    activeOpacity,
    stackData,
  } = props;
  let leftSpacing = initialSpacing;
  for (let i = 0; i < index; i++) {
    leftSpacing +=
      (stackData[i].spacing === 0 ? 0 : stackData[i].spacing || propSpacing) +
      (stackData[i].stacks[0].barWidth || props.barWidth || 30);
  }
  const disablePress = props.disablePress || false;
  const renderLabel = (label: String, labelTextStyle: any) => {
    return (
      <View
        style={[
          {
            width:
              (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
            position: 'absolute',
            bottom: rotateLabel ? -40 : -25,
          },
          rotateLabel
            ? props.horizontal
              ? {transform: [{rotate: '330deg'}]}
              : {transform: [{rotate: '60deg'}]}
            : props.horizontal
            ? {transform: [{rotate: '-90deg'}]}
            : {},
        ]}>
        {item.labelComponent ? (
          item.labelComponent()
        ) : (
          <Text style={[labelTextStyle]} numberOfLines={xAxisTextNumberOfLines}>
            {label || ''}
          </Text>
        )}
      </View>
    );
  };

  const getPosition = (index: number) => {
    let position = 0;
    for (let i = 0; i < index; i++) {
      position +=
        (Math.abs(props.item.stacks[i].value) * (containerHeight || 200)) /
        (maxValue || 200);
    }
    return position;
  };

  const totalHeight = props.item.stacks.reduce(
    (acc, stack) =>
      acc +
      (Math.abs(stack.value) * (containerHeight || 200)) / (maxValue || 200),
    0,
  );

  const static2DSimple = (item: itemType) => {
    const cotainsNegative = item.stacks.some(item => item.value < 0);
    return (
      <>
        <TouchableOpacity
          disabled={disablePress}
          activeOpacity={activeOpacity}
          onPress={() => {
            setSelectedIndex(index);
            if (item.onPress) {
              item.onPress();
            }
          }}
          style={[
            {
              position: 'absolute',
              width: item.stacks[0].barWidth || props.barWidth || 30,
              height: '100%',
            },
            cotainsNegative && {
              transform: [
                {translateY: totalHeight + xAxisThickness / 2},
                {rotate: '180deg'},
              ],
            },
          ]}>
          {item.stacks.map((stackItem, index) => {
            return (
              <TouchableOpacity
                key={index}
                onPress={stackItem.onPress}
                activeOpacity={activeOpacity}
                disabled={disablePress || !stackItem.onPress}
                style={[
                  {
                    position: 'absolute',
                    bottom: getPosition(index) + (stackItem.marginBottom || 0),
                    width: '100%',
                    height:
                      (Math.abs(stackItem.value) * (containerHeight || 200)) /
                        (maxValue || 200) -
                      (stackItem.marginBottom || 0),
                    backgroundColor: stackItem.color || 'black',
                    borderRadius:
                      stackItem.borderRadius || props.barBorderRadius || 0,
                  },
                  !props.barBorderRadius &&
                    !stackItem.borderRadius && {
                      borderTopLeftRadius: stackItem.borderTopLeftRadius || 0,
                      borderTopRightRadius: stackItem.borderTopRightRadius || 0,
                      borderBottomLeftRadius:
                        stackItem.borderBottomLeftRadius || 0,
                      borderBottomRightRadius:
                        stackItem.borderBottomRightRadius || 0,
                    },
                ]}>
                {stackItem.innerBarComponent && stackItem.innerBarComponent()}
              </TouchableOpacity>
            );
          })}
          {(item.barBackgroundPattern || barBackgroundPattern) && (
            <Svg>
              <Defs>
                {item.barBackgroundPattern
                  ? item.barBackgroundPattern()
                  : barBackgroundPattern()}
              </Defs>
              <Rect
                stroke="transparent"
                x="1"
                y="1"
                width="100%"
                height="100%"
                fill={`url(#${item.patternId || patternId})`}
              />
            </Svg>
          )}
        </TouchableOpacity>
        {item.topLabelComponent && (
          <View
            style={[
              {
                position: 'absolute',
                top: cotainsNegative
                  ? 0
                  : (item.barWidth || props.barWidth || 30) * -1,
                height: item.barWidth || props.barWidth || 30,
                width: item.barWidth || props.barWidth || 30,
                justifyContent: 'center',
                alignItems: 'center',
              },
              cotainsNegative && {transform: [{translateY: totalHeight * 2}]},
              props.horizontal &&
                !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
              item.topLabelContainerStyle,
            ]}>
            {item.topLabelComponent()}
          </View>
        )}
      </>
    );
  };

  return (
    <>
      <View
        style={[
          {
            // overflow: 'visible',
            marginBottom: 60,
            width: item.stacks[0].barWidth || props.barWidth || 30,
            height: totalHeight,
            marginRight: spacing,
          },
        ]}>
        {/* {props.showVerticalLines && (
          <View
            style={{
              zIndex: props.verticalLinesZIndex,
              position: 'absolute',
              height: (containerHeight || 200) + 15,
              width: props.verticalLinesThickness,
              bottom: 0,
              left: (item.barWidth || props.barWidth || 30) / 2,
              backgroundColor: props.verticalLinesColor,
            }}
          />
        )} */}
        {props.showXAxisIndices && (
          <View
            style={{
              zIndex: 2,
              position: 'absolute',
              height: props.xAxisIndicesHeight,
              width: props.xAxisIndicesWidth,
              bottom: 0,
              left: (item.barWidth || props.barWidth || 30) / 2,
              backgroundColor: props.xAxisIndicesColor,
            }}
          />
        )}
        {static2DSimple(item)}
        {renderLabel(label || '', labelTextStyle)}
      </View>
      {renderTooltip && selectedIndex === index && (
        <View
          style={{
            position: 'absolute',
            bottom: totalHeight + 60,
            left: leftSpacing,
            zIndex: 1000,
          }}>
          {renderTooltip(item, index)}
        </View>
      )}
    </>
  );
}
Example #20
Source File: RenderBars.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
RenderBars = (props: Props) => {
  const {
    item,
    index,
    containerHeight,
    maxValue,
    spacing,
    propSpacing,
    side,
    data,
    // oldValue,

    isThreeD,
    isAnimated,
    rotateLabel,
    appearingOpacity,
    opacity,
    animationDuration,
    autoShiftLabels,
    label,
    labelTextStyle,
    xAxisTextNumberOfLines,
    renderTooltip,
    initialSpacing,
    selectedIndex,
    setSelectedIndex,
  } = props;

  const barMarginBottom =
    item.barMarginBottom === 0
      ? 0
      : item.barMarginBottom || props.barMarginBottom || 0;

  const renderLabel = (label: String, labelTextStyle: any, value: number) => {
    return (
      <View
        style={[
          {
            width:
              (item.labelWidth ||
                props.labelWidth ||
                item.barWidth ||
                props.barWidth ||
                30) +
              spacing / 2,
            left: -6,
            position: 'absolute',
            bottom: (rotateLabel ? -40 : -25) - barMarginBottom,
          },
          rotateLabel
            ? props.horizontal
              ? {transform: [{rotate: '330deg'}]}
              : {
                  transform: [
                    {rotate: value < 0 ? '240deg' : '60deg'},
                    {translateX: value < 0 ? 56 : 0},
                    {translateY: value < 0 ? 32 : 0},
                  ],
                }
            : props.horizontal
            ? {transform: [{rotate: '-90deg'}]}
            : value < 0
            ? {
                transform: [
                  {rotate: '180deg'},
                  {translateY: autoShiftLabels ? 0 : 32},
                ],
              }
            : {},
        ]}>
        {item.labelComponent ? (
          item.labelComponent()
        ) : (
          <Text
            style={labelTextStyle || {textAlign: 'center'}}
            numberOfLines={xAxisTextNumberOfLines}>
            {label || ''}
          </Text>
        )}
      </View>
    );
  };

  const renderAnimatedLabel = (
    label: String,
    labelTextStyle: any,
    value: number,
  ) => {
    return (
      <Animated.View
        style={[
          {
            width:
              (item.labelWidth ||
                props.labelWidth ||
                item.barWidth ||
                props.barWidth ||
                30) +
              spacing / 2,
            position: 'absolute',
            left: -4,
            bottom: (rotateLabel ? -40 : -25) - barMarginBottom,
            opacity: appearingOpacity,
          },
          value < 0 && {transform: [{rotate: '180deg'}]},
          rotateLabel
            ? props.horizontal
              ? {transform: [{rotate: '330deg'}]}
              : {transform: [{rotate: '60deg'}]}
            : props.horizontal
            ? {transform: [{rotate: '-90deg'}]}
            : {},
        ]}>
        {item.labelComponent ? (
          item.labelComponent()
        ) : (
          <Text
            style={labelTextStyle || {textAlign: 'center'}}
            numberOfLines={xAxisTextNumberOfLines}>
            {label || ''}
          </Text>
        )}
      </Animated.View>
    );
  };

  const static2DWithGradient = (item: itemType) => {
    // console.log('comes to static2DWithGradient', item);
    return (
      <>
        <LinearGradient
          style={[
            {
              position: 'absolute',
              width: '100%',
              height: '100%',
              borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
            },
            props.roundedBottom && {
              borderBottomLeftRadius:
                (item.barWidth || props.barWidth || 30) / 2,
              borderBottomRightRadius:
                (item.barWidth || props.barWidth || 30) / 2,
            },
            props.cappedBars && {
              borderTopLeftRadius:
                item.capRadius === 0
                  ? 0
                  : item.capRadius || props.capRadius || 0,
              borderTopRightRadius:
                item.capRadius === 0
                  ? 0
                  : item.capRadius || props.capRadius || 0,
            },
            props.roundedTop && {
              borderTopLeftRadius: (item.barWidth || props.barWidth || 30) / 2,
              borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
            },
          ]}
          start={{x: 0, y: 0}}
          end={{x: 0, y: 1}}
          colors={[
            item.gradientColor || props.gradientColor || 'white',
            item.frontColor || props.frontColor || 'black',
          ]}>
          {props.cappedBars && (
            <View
              style={{
                position: 'absolute',
                width: '100%',
                height:
                  item.capThickness === 0
                    ? 0
                    : item.capThickness || props.capThickness || 6,
                backgroundColor: item.capColor || props.capColor || 'gray',
                borderTopLeftRadius:
                  item.capRadius === 0
                    ? 0
                    : item.capRadius || props.capRadius || 0,
                borderTopRightRadius:
                  item.capRadius === 0
                    ? 0
                    : item.capRadius || props.capRadius || 0,
              }}
            />
          )}
        </LinearGradient>
        {(item.barBackgroundPattern || props.barBackgroundPattern) && (
          <Svg>
            <Defs>
              {item.barBackgroundPattern
                ? item.barBackgroundPattern()
                : props.barBackgroundPattern()}
            </Defs>
            <Rect
              stroke="transparent"
              x="1"
              y="1"
              width="100%"
              height="100%"
              fill={`url(#${item.patternId || props.patternId})`}
            />
          </Svg>
        )}
        {item.topLabelComponent && (
          <View
            style={[
              {
                position: 'absolute',
                top: (item.barWidth || props.barWidth || 30) * -1,
                height: item.barWidth || props.barWidth || 30,
                width: item.barWidth || props.barWidth || 30,
                justifyContent:
                  (props.horizontal && !props.intactTopLabel) || item.value < 0
                    ? 'center'
                    : 'flex-end',
                alignItems: 'center',
              },
              item.value < 0 && {transform: [{rotate: '180deg'}]},
              props.horizontal &&
                !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
              item.topLabelContainerStyle,
            ]}>
            {item.topLabelComponent()}
          </View>
        )}
      </>
    );
  };

  const barHeight =
    (item.value >= 0 && (!isThreeD || isAnimated) && item.topLabelComponent
      ? (item.topLabelComponentHeight || 30) +
        (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
      : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)) -
    barMarginBottom;

  let leftSpacing = initialSpacing;
  for (let i = 0; i < index; i++) {
    leftSpacing +=
      (data[i].spacing === 0 ? 0 : data[i].spacing || propSpacing) +
      (data[i].barWidth || props.barWidth || 30);
  }

  return (
    <>
      <TouchableOpacity
        disabled={item.disablePress || props.disablePress}
        activeOpacity={props.activeOpacity || 0.2}
        onPress={() => {
          if (renderTooltip) {
            setSelectedIndex(index);
          }
          item.onPress
            ? item.onPress()
            : props.onPress
            ? props.onPress(item, index)
            : null;
        }}
        style={[
          {
            // overflow: 'visible',
            marginBottom: 60 + barMarginBottom,
            width: item.barWidth || props.barWidth || 30,
            height: barHeight,
            marginRight: spacing,
          },
          item.value < 0 && {
            transform: [
              {
                translateY:
                  (Math.abs(item.value) * (containerHeight || 200)) /
                  (maxValue || 200),
              },
              {rotateZ: '180deg'},
            ],
          },
          // !isThreeD && !item.showGradient && !props.showGradient &&
          // { backgroundColor: item.frontColor || props.frontColor || 'black' },
          side !== 'right' && {zIndex: data.length - index},
        ]}>
        {/* {props.showVerticalLines && (
          <View
            style={{
              zIndex: props.verticalLinesZIndex,
              position: 'absolute',
              height: (containerHeight || 200) + 15,
              width: props.verticalLinesThickness,
              bottom: 0,
              left: (item.barWidth || props.barWidth || 30) / 2,
              backgroundColor: props.verticalLinesColor,
            }}
          />
        )} */}
        {props.showXAxisIndices && (
          <View
            style={{
              zIndex: 2,
              position: 'absolute',
              height: props.xAxisIndicesHeight,
              width: props.xAxisIndicesWidth,
              bottom: 0,
              left: (item.barWidth || props.barWidth || 30) / 2,
              backgroundColor: props.xAxisIndicesColor,
            }}
          />
        )}
        {isThreeD ? (
          isAnimated ? (
            <AnimatedBar
              barBackgroundPattern={
                item.barBackgroundPattern || props.barBackgroundPattern
              }
              patternId={item.patternId || props.patternId}
              topLabelContainerStyle={item.topLabelContainerStyle}
              width={item.barWidth || props.barWidth || 30}
              sideWidth={
                item.sideWidth ||
                props.sideWidth ||
                (item.barWidth || props.barWidth || 30) / 2
              }
              side={side || 'left'}
              frontColor={item.frontColor || props.frontColor || ''}
              sideColor={item.sideColor || props.sideColor || ''}
              topColor={item.topColor || props.topColor || ''}
              showGradient={item.showGradient || props.showGradient || false}
              gradientColor={item.gradientColor || props.gradientColor}
              topLabelComponent={item.topLabelComponent}
              opacity={opacity || 1}
              animationDuration={animationDuration || 800}
              height={
                (Math.abs(item.value) * (containerHeight || 200)) /
                  (maxValue || 200) -
                barMarginBottom
              }
              intactTopLabel={props.intactTopLabel}
              horizontal={props.horizontal}
            />
          ) : (
            <ThreeDBar
              barBackgroundPattern={
                item.barBackgroundPattern || props.barBackgroundPattern
              }
              patternId={item.patternId || props.patternId}
              style={{}}
              color={''}
              topLabelContainerStyle={item.topLabelContainerStyle}
              width={item.barWidth || props.barWidth || 30}
              sideWidth={
                item.sideWidth ||
                props.sideWidth ||
                (item.barWidth || props.barWidth || 30) / 2
              }
              side={side || 'left'}
              frontColor={item.frontColor || props.frontColor || ''}
              sideColor={item.sideColor || props.sideColor || ''}
              topColor={item.topColor || props.topColor || ''}
              showGradient={item.showGradient || props.showGradient || false}
              gradientColor={item.gradientColor || props.gradientColor}
              topLabelComponent={item.topLabelComponent || Function}
              opacity={opacity || 1}
              horizontal={props.horizontal}
              intactTopLabel={props.intactTopLabel}
              height={
                (Math.abs(item.value) * (containerHeight || 200)) /
                  (maxValue || 200) -
                barMarginBottom
              }
              value={item.value}
            />
          )
        ) : item.showGradient || props.showGradient ? (
          isAnimated ? (
            <Animated2DWithGradient
              barBackgroundPattern={props.barBackgroundPattern}
              patternId={props.patternId}
              barWidth={props.barWidth}
              item={item}
              opacity={opacity}
              animationDuration={animationDuration || 800}
              roundedBottom={props.roundedBottom || false}
              roundedTop={props.roundedTop || false}
              gradientColor={props.gradientColor}
              frontColor={props.frontColor || 'black'}
              containerHeight={containerHeight}
              maxValue={maxValue}
              height={
                (Math.abs(item.value) * (containerHeight || 200)) /
                (maxValue || 200)
              }
              barMarginBottom={barMarginBottom}
              cappedBars={props.cappedBars}
              capThickness={props.capThickness}
              capColor={props.capColor}
              capRadius={props.capRadius}
              horizontal={props.horizontal}
              intactTopLabel={props.intactTopLabel}
              barBorderRadius={props.barBorderRadius || 0}
            />
          ) : (
            static2DWithGradient(item)
          )
        ) : isAnimated ? (
          <Animated2DWithGradient
            barBackgroundPattern={props.barBackgroundPattern}
            patternId={props.patternId}
            barWidth={props.barWidth}
            item={item}
            opacity={opacity}
            animationDuration={animationDuration || 800}
            roundedBottom={props.roundedBottom || false}
            roundedTop={props.roundedTop || false}
            gradientColor={props.gradientColor}
            noGradient
            frontColor={props.frontColor || 'black'}
            containerHeight={containerHeight}
            maxValue={maxValue}
            height={
              (Math.abs(item.value) * (containerHeight || 200)) /
              (maxValue || 200)
            }
            barMarginBottom={barMarginBottom}
            cappedBars={props.cappedBars}
            capThickness={props.capThickness}
            capColor={props.capColor}
            capRadius={props.capRadius}
            horizontal={props.horizontal}
            intactTopLabel={props.intactTopLabel}
            barBorderRadius={props.barBorderRadius || 0}
          />
        ) : (
          <Animated2DWithGradient
            barBackgroundPattern={props.barBackgroundPattern}
            patternId={props.patternId}
            barWidth={props.barWidth}
            item={item}
            opacity={opacity}
            animationDuration={animationDuration || 800}
            roundedBottom={props.roundedBottom || false}
            roundedTop={props.roundedTop || false}
            gradientColor={props.gradientColor}
            noGradient
            noAnimation
            frontColor={props.frontColor || 'black'}
            containerHeight={containerHeight}
            maxValue={maxValue}
            height={
              (Math.abs(item.value) * (containerHeight || 200)) /
              (maxValue || 200)
            }
            barMarginBottom={barMarginBottom}
            cappedBars={props.cappedBars}
            capThickness={props.capThickness}
            capColor={props.capColor}
            capRadius={props.capRadius}
            horizontal={props.horizontal}
            intactTopLabel={props.intactTopLabel}
            barBorderRadius={props.barBorderRadius || 0}
          />
        )}
        {isAnimated
          ? renderAnimatedLabel(label, labelTextStyle, item.value)
          : renderLabel(label, labelTextStyle, item.value)}
      </TouchableOpacity>
      {renderTooltip && selectedIndex === index && (
        <View
          style={{
            position: 'absolute',
            bottom: barHeight + 60,
            left: leftSpacing,
            zIndex: 1000,
          }}>
          {renderTooltip(item, index)}
        </View>
      )}
    </>
  );
}
Example #21
Source File: bar-chart.tsx    From beancount-mobile with MIT License 4 votes vote down vote up
render() {
    const {
      width,
      height,
      data,
      style = {},
      withHorizontalLabels = true,
      withVerticalLabels = true,
      verticalLabelRotation = 0,
      horizontalLabelRotation = 0,
      withInnerLines = true,
      showBarTops = true,
      showValuesOnTopOfBars = false,
      segments = 4,
    } = this.props;

    const { borderRadius = 0, paddingTop = 16, paddingRight = 64 } = style;

    const config = {
      width,
      height,
      verticalLabelRotation,
      horizontalLabelRotation,
      barRadius:
        (this.props.chartConfig && this.props.chartConfig.barRadius) || 0,
      decimalPlaces:
        (this.props.chartConfig && this.props.chartConfig.decimalPlaces) || 2,
      formatYLabel:
        (this.props.chartConfig && this.props.chartConfig.formatYLabel) ||
        function (label) {
          return label;
        },
      formatXLabel:
        (this.props.chartConfig && this.props.chartConfig.formatXLabel) ||
        function (label) {
          return label;
        },
    };

    return (
      <View style={style}>
        <Svg height={height} width={width}>
          {this.renderDefs({
            ...config,
            ...this.props.chartConfig,
          })}
          <Rect
            width="100%"
            height={height}
            rx={borderRadius}
            ry={borderRadius}
            fill="url(#backgroundGradient)"
          />
          <G>
            {withInnerLines
              ? this.renderHorizontalLines({
                  ...config,
                  count: segments,
                  paddingTop,
                  paddingRight,
                })
              : null}
          </G>
          <G>
            {withHorizontalLabels
              ? this.renderHorizontalLabels({
                  ...config,
                  count: segments,
                  data: data.datasets[0].data,
                  paddingTop: paddingTop as number,
                  paddingRight: paddingRight as number,
                })
              : null}
          </G>
          <G>
            {withVerticalLabels
              ? this.renderVerticalLabels({
                  ...config,
                  labels: data.labels,
                  paddingRight: paddingRight as number,
                  paddingTop: paddingTop as number,
                  horizontalOffset: barWidth * this.getBarPercentage(),
                })
              : null}
          </G>
          <G>
            {this.renderBars({
              ...config,
              data: data.datasets[0].data,
              paddingTop: paddingTop as number,
              paddingRight: paddingRight as number,
            })}
          </G>
          <G>
            {showValuesOnTopOfBars &&
              this.renderValuesOnTopOfBars({
                ...config,
                data: data.datasets[0].data,
                paddingTop: paddingTop as number,
                paddingRight: paddingRight as number,
              })}
          </G>
          <G>
            {showBarTops &&
              this.renderBarTops({
                ...config,
                data: data.datasets[0].data,
                paddingTop: paddingTop as number,
                paddingRight: paddingRight as number,
              })}
          </G>
        </Svg>
      </View>
    );
  }
Example #22
Source File: index.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
BarChart = (props: PropTypes) => {
  const scrollRef = useRef();
  const [points, setPoints] = useState('');
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const showLine = props.showLine || false;
  const initialSpacing =
    props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
  const data = useMemo(() => props.data || [], [props.data]);
  const lineData = props.lineData || data;
  const defaultLineConfig = {
    initialSpacing: initialSpacing,
    curved: false,
    isAnimated: false,
    thickness: 1,
    color: 'black',
    hideDataPoints: false,
    dataPointsShape: 'circular',
    dataPointsWidth: 2,
    dataPointsHeight: 2,
    dataPointsColor: 'black',
    dataPointsRadius: 3,
    textColor: 'gray',
    textFontSize: 10,
    textShiftX: 0,
    textShiftY: 0,
    shiftY: 0,
    delay: 0,
    startIndex: 0,
    endIndex: lineData.length - 1,
  };
  const lineConfig = props.lineConfig
    ? {
        initialSpacing:
          props.lineConfig.initialSpacing === 0
            ? 0
            : props.lineConfig.initialSpacing ||
              defaultLineConfig.initialSpacing,
        curved: props.lineConfig.curved || defaultLineConfig.curved,
        isAnimated: props.lineConfig.isAnimated || defaultLineConfig.isAnimated,
        thickness: props.lineConfig.thickness || defaultLineConfig.thickness,
        color: props.lineConfig.color || defaultLineConfig.color,
        hideDataPoints:
          props.lineConfig.hideDataPoints || defaultLineConfig.hideDataPoints,
        dataPointsShape:
          props.lineConfig.dataPointsShape || defaultLineConfig.dataPointsShape,
        dataPointsHeight:
          props.lineConfig.dataPointsHeight ||
          defaultLineConfig.dataPointsHeight,
        dataPointsWidth:
          props.lineConfig.dataPointsWidth || defaultLineConfig.dataPointsWidth,
        dataPointsColor:
          props.lineConfig.dataPointsColor || defaultLineConfig.dataPointsColor,
        dataPointsRadius:
          props.lineConfig.dataPointsRadius ||
          defaultLineConfig.dataPointsRadius,
        textColor: props.lineConfig.textColor || defaultLineConfig.textColor,
        textFontSize:
          props.lineConfig.textFontSize || defaultLineConfig.textFontSize,
        textShiftX: props.lineConfig.textShiftX || defaultLineConfig.textShiftX,
        textShiftY: props.lineConfig.textShiftY || defaultLineConfig.textShiftY,
        shiftY: props.lineConfig.shiftY || defaultLineConfig.shiftY,
        delay: props.lineConfig.delay || defaultLineConfig.delay,
        startIndex: props.lineConfig.startIndex || defaultLineConfig.startIndex,
        endIndex:
          props.lineConfig.endIndex === 0
            ? 0
            : props.lineConfig.endIndex || defaultLineConfig.endIndex,
      }
    : defaultLineConfig;
  const containerHeight = props.height || 200;
  const noOfSections = props.noOfSections || 10;
  const horizSections = [{value: '0'}];
  const horizSectionsBelow = [];
  const stepHeight = props.stepHeight || containerHeight / noOfSections;
  const spacing = props.spacing === 0 ? 0 : props.spacing || 20;
  const labelWidth = props.labelWidth || 0;
  const scrollToEnd = props.scrollToEnd || false;
  const scrollAnimation = props.scrollAnimation === false ? false : true;
  const labelsExtraHeight = props.labelsExtraHeight || 0;

  let totalWidth = spacing;
  let maxItem = 0,
    minItem = 0;
  if (props.stackData) {
    props.stackData.forEach(stackItem => {
      // console.log('stackItem', stackItem);
      let stackSum = stackItem.stacks.reduce(
        (acc, stack) => acc + stack.value,
        0,
      );
      // console.log('stackSum--->', stackSum);
      if (stackSum > maxItem) {
        maxItem = stackSum;
      }
      if (stackSum < minItem) {
        minItem = stackSum;
      }
      totalWidth +=
        (stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
      // console.log('totalWidth for stack===', totalWidth);
    });
  } else {
    data.forEach((item: itemType) => {
      if (item.value > maxItem) {
        maxItem = item.value;
      }
      if (item.value < minItem) {
        minItem = item.value;
      }
      totalWidth +=
        (item.barWidth || props.barWidth || 30) +
        (item.spacing === 0 ? 0 : item.spacing || spacing);
      // console.log('totalWidth for bar===', totalWidth);
    });
  }
  if (props.showFractionalValues || props.roundToDigits) {
    maxItem *= 10 * (props.roundToDigits || 1);
    maxItem = maxItem + (10 - (maxItem % 10));
    maxItem /= 10 * (props.roundToDigits || 1);
    maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
    if (minItem !== 0) {
      minItem *= 10 * (props.roundToDigits || 1);
      minItem = minItem - (10 + (minItem % 10));
      minItem /= 10 * (props.roundToDigits || 1);
      minItem = parseFloat(minItem.toFixed(props.roundToDigits || 1));
    }
  } else {
    maxItem = maxItem + (10 - (maxItem % 10));
    if (minItem !== 0) {
      minItem = minItem - (10 + (minItem % 10));
    }
  }

  const maxValue = props.maxValue || maxItem;
  const minValue = props.minValue || minItem;

  const stepValue = props.stepValue || maxValue / noOfSections;
  const noOfSectionsBelowXAxis =
    props.noOfSectionsBelowXAxis || -minValue / stepValue;
  const disableScroll = props.disableScroll || false;
  const showScrollIndicator = props.showScrollIndicator || false;
  // const oldData = props.oldData || [];
  const side = props.side || '';
  const rotateLabel = props.rotateLabel || false;
  const isAnimated = props.isAnimated || false;
  const animationDuration = props.animationDuration || 800;
  // const animationEasing = props.animationEasing || Easing.ease;
  const opacity = props.opacity || 1;
  const isThreeD = props.isThreeD || false;

  const showVerticalLines = props.showVerticalLines || false;
  const rulesThickness =
    props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
  const rulesColor = props.rulesColor || 'lightgray';
  const verticalLinesThickness =
    props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
  const verticalLinesHeight = props.verticalLinesHeight;
  const verticalLinesColor = props.verticalLinesColor || 'lightgray';
  const verticalLinesZIndex = props.verticalLinesZIndex || -1;
  let verticalLinesAr = [];
  props.noOfVerticalLines
    ? (verticalLinesAr = [...Array(props.noOfVerticalLines).keys()])
    : (verticalLinesAr = [
        ...Array(props.stackData ? props.stackData.length : data.length).keys(),
      ]);
  const verticalLinesSpacing = props.verticalLinesSpacing || 0;

  const showYAxisIndices = props.showYAxisIndices || false;
  const showXAxisIndices = props.showXAxisIndices || false;
  const yAxisIndicesHeight = props.yAxisIndicesHeight || 2;
  const xAxisIndicesHeight = props.xAxisIndicesHeight || 2;
  const yAxisIndicesWidth = props.yAxisIndicesWidth || 4;
  const xAxisIndicesWidth = props.xAxisIndicesWidth || 4;
  const xAxisIndicesColor = props.xAxisIndicesColor || 'black';
  const yAxisIndicesColor = props.yAxisIndicesColor || 'black';

  const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
  const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
  const yAxisSide = props.yAxisSide || 'left';

  const xAxisThickness =
    props.xAxisThickness === 0
      ? props.xAxisThickness
      : props.xAxisThickness || 1;
  const xAxisColor = props.xAxisColor || 'black';

  const hideRules = props.hideRules || false;

  const yAxisThickness =
    props.yAxisThickness === 0
      ? props.yAxisThickness
      : props.yAxisThickness || 1;
  const yAxisColor = props.yAxisColor || 'black';
  const yAxisTextStyle = props.yAxisTextStyle;
  const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
  const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
  const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
  const horizontalRulesStyle = props.horizontalRulesStyle;
  const showFractionalValues = props.showFractionalValues || false;
  const yAxisLabelWidth = props.yAxisLabelWidth || 35;
  const hideYAxisText = props.hideYAxisText || false;

  const backgroundColor = props.backgroundColor || 'transparent';
  const horizontal = props.horizontal || false;
  const yAxisAtTop = props.yAxisAtTop || false;
  const intactTopLabel = props.intactTopLabel || false;
  const hideOrigin = props.hideOrigin || false;

  const rulesType = props.rulesType || 'line';
  const xAxisType = props.xAxisType || 'solid';
  const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
  const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;

  const heightValue = useMemo(() => new Animated.Value(0), []);
  const opacValue = useMemo(() => new Animated.Value(0), []);
  const widthValue = useMemo(() => new Animated.Value(0), []);
  const autoShiftLabels = props.autoShiftLabels || false;

  const labelsAppear = useCallback(() => {
    opacValue.setValue(0);
    Animated.timing(opacValue, {
      toValue: 1,
      duration: 500,
      easing: Easing.ease,
      useNativeDriver: false,
    }).start();
  }, [opacValue]);
  // const moveBar = useCallback(() => {
  //   heightValue.setValue(0);
  //   Animated.timing(heightValue, {
  //     toValue: 1,
  //     duration: animationDuration,
  //     easing: animationEasing,
  //     useNativeDriver: false,
  //   }).start();
  // }, [animationDuration, animationEasing, heightValue]);

  const decreaseWidth = useCallback(() => {
    widthValue.setValue(0);
    Animated.timing(widthValue, {
      toValue: 1,
      duration: animationDuration,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  }, [animationDuration, widthValue]);
  // console.log('olddata', oldData);

  useEffect(() => {
    if (showLine) {
      let pp = '';
      if (!lineConfig.curved) {
        for (let i = 0; i < lineData.length; i++) {
          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
          const currentBarWidth =
            (data && data[i] && data[i].barWidth) || props.barWidth || 30;
          pp +=
            'L' +
            (yAxisLabelWidth +
              lineConfig.initialSpacing +
              6 -
              (initialSpacing - currentBarWidth / 2) -
              lineConfig.dataPointsWidth / 2 +
              (currentBarWidth + spacing) * i) +
            ' ' +
            (containerHeight -
              lineConfig.shiftY -
              (lineData[i].value * containerHeight) / maxValue) +
            ' ';
        }
        setPoints(pp.replace('L', 'M'));
      } else {
        let p1Array = [];
        for (let i = 0; i < lineData.length; i++) {
          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
          const currentBarWidth =
            (data && data[i] && data[i].barWidth) || props.barWidth || 30;
          p1Array.push([
            yAxisLabelWidth +
              lineConfig.initialSpacing +
              6 -
              (initialSpacing - currentBarWidth / 2) -
              lineConfig.dataPointsWidth / 2 +
              (currentBarWidth + spacing) * i,
            containerHeight -
              lineConfig.shiftY -
              (lineData[i].value * containerHeight) / maxValue,
          ]);
          let xx = svgPath(p1Array, bezierCommand);
          setPoints(xx);
        }
      }
      if (lineConfig.isAnimated) {
        setTimeout(() => decreaseWidth(), lineConfig.delay || 0);
      }
    }
    // moveBar();
    setTimeout(() => labelsAppear(), animationDuration);
  }, [
    animationDuration,
    containerHeight,
    data,
    lineData,
    decreaseWidth,
    initialSpacing,
    labelsAppear,
    lineConfig.initialSpacing,
    lineConfig.curved,
    lineConfig.dataPointsWidth,
    lineConfig.shiftY,
    lineConfig.isAnimated,
    lineConfig.delay,
    lineConfig.startIndex,
    lineConfig.endIndex,
    maxValue,
    // moveBar,
    props.barWidth,
    showLine,
    spacing,
    yAxisLabelWidth,
  ]);

  const defaultReferenceConfig = {
    thickness: rulesThickness,
    width: horizontal
      ? props.width || totalWidth
      : (props.width || totalWidth) + 11,
    color: 'black',
    type: rulesType,
    dashWidth: dashWidth,
    dashGap: dashGap,
    labelText: '',
    labelTextStyle: null,
  };

  const showReferenceLine1 = props.showReferenceLine1 || false;
  const referenceLine1Position =
    props.referenceLine1Position === 0
      ? 0
      : props.referenceLine1Position || containerHeight / 2;
  const referenceLine1Config = props.referenceLine1Config
    ? {
        thickness: props.referenceLine1Config.thickness || rulesThickness,
        width: horizontal
          ? props.referenceLine1Config.width || props.width || totalWidth
          : (props.referenceLine1Config.width || props.width || totalWidth) +
            11,
        color: props.referenceLine1Config.color || 'black',
        type: props.referenceLine1Config.type || rulesType,
        dashWidth: props.referenceLine1Config.dashWidth || dashWidth,
        dashGap: props.referenceLine1Config.dashGap || dashGap,
        labelText:
          props.referenceLine1Config.labelText ||
          defaultReferenceConfig.labelText,
        labelTextStyle:
          props.referenceLine1Config.labelTextStyle ||
          defaultReferenceConfig.labelTextStyle,
      }
    : defaultReferenceConfig;

  const showReferenceLine2 = props.showReferenceLine2 || false;
  const referenceLine2Position =
    props.referenceLine2Position === 0
      ? 0
      : props.referenceLine2Position || (3 * containerHeight) / 2;
  const referenceLine2Config = props.referenceLine2Config
    ? {
        thickness: props.referenceLine2Config.thickness || rulesThickness,
        width: horizontal
          ? props.referenceLine2Config.width || props.width || totalWidth
          : (props.referenceLine2Config.width || props.width || totalWidth) +
            11,
        color: props.referenceLine2Config.color || 'black',
        type: props.referenceLine2Config.type || rulesType,
        dashWidth: props.referenceLine2Config.dashWidth || dashWidth,
        dashGap: props.referenceLine2Config.dashGap || dashGap,
        labelText:
          props.referenceLine2Config.labelText ||
          defaultReferenceConfig.labelText,
        labelTextStyle:
          props.referenceLine2Config.labelTextStyle ||
          defaultReferenceConfig.labelTextStyle,
      }
    : defaultReferenceConfig;

  const showReferenceLine3 = props.showReferenceLine3 || false;
  const referenceLine3Position =
    props.referenceLine3Position === 0
      ? 0
      : props.referenceLine3Position || containerHeight / 3;
  const referenceLine3Config = props.referenceLine3Config
    ? {
        thickness: props.referenceLine3Config.thickness || rulesThickness,
        width: horizontal
          ? props.referenceLine3Config.width || props.width || totalWidth
          : (props.referenceLine3Config.width || props.width || totalWidth) +
            11,
        color: props.referenceLine3Config.color || 'black',
        type: props.referenceLine3Config.type || rulesType,
        dashWidth: props.referenceLine3Config.dashWidth || dashWidth,
        dashGap: props.referenceLine3Config.dashGap || dashGap,
        labelText:
          props.referenceLine3Config.labelText ||
          defaultReferenceConfig.labelText,
        labelTextStyle:
          props.referenceLine3Config.labelTextStyle ||
          defaultReferenceConfig.labelTextStyle,
      }
    : defaultReferenceConfig;

  horizSections.pop();
  for (let i = 0; i <= noOfSections; i++) {
    let value = maxValue - stepValue * i;
    if (props.showFractionalValues || props.roundToDigits) {
      value = parseFloat(value.toFixed(props.roundToDigits || 1));
    }
    horizSections.push({
      value: props.yAxisLabelTexts
        ? props.yAxisLabelTexts[noOfSections - i] ?? value.toString()
        : value.toString(),
    });
  }
  if (noOfSectionsBelowXAxis) {
    for (let i = 1; i <= noOfSectionsBelowXAxis; i++) {
      let value = stepValue * -i;
      if (props.showFractionalValues || props.roundToDigits) {
        value = parseFloat(value.toFixed(props.roundToDigits || 1));
      }
      horizSectionsBelow.push({
        value: props.yAxisLabelTexts
          ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ??
            value.toString()
          : value.toString(),
      });
    }
  }

  const animatedHeight = heightValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  });
  const appearingOpacity = opacValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  const animatedWidth = widthValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, totalWidth],
  });

  const getLabel = (val, index) => {
    let label = '';
    if (
      showFractionalValues ||
      (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
    ) {
      if (val) {
        label = val;
      } else {
        label = '0';
      }
    } else {
      if (val) {
        label = val.toString().split('.')[0];
      } else {
        label = '0';
      }
    }

    return yAxisLabelPrefix + label + yAxisLabelSuffix;
  };

  const renderHorizSections = () => {
    return (
      <>
        {horizSections.map((sectionItems, index) => {
          return (
            <View
              key={index}
              style={[
                styles.horizBar,
                {
                  width: horizontal
                    ? props.width || Math.min(300, totalWidth)
                    : props.width || totalWidth + 11,
                },
                yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
                horizontalRulesStyle,
              ]}>
              <View
                style={[
                  styles.leftLabel,
                  {
                    borderRightWidth: yAxisThickness,
                    borderColor: yAxisColor,
                  },
                  horizontal &&
                    !yAxisAtTop && {
                      transform: [
                        {
                          translateX:
                            (props.width || Math.min(300, totalWidth)) +
                            yAxisThickness,
                        },
                      ],
                    },
                  {
                    height:
                      index === noOfSections ? stepHeight / 2 : stepHeight,
                    width: yAxisLabelWidth,
                  },
                  yAxisLabelContainerStyle,
                ]}
              />
              <View
                style={[
                  index === noOfSections
                    ? styles.lastLeftPart
                    : styles.leftPart,
                  {backgroundColor: backgroundColor},
                ]}>
                {index === noOfSections ? (
                  <Rule
                    config={{
                      thickness: xAxisThickness,
                      color: xAxisColor,
                      width: horizontal
                        ? props.width || Math.min(300, totalWidth)
                        : (props.width || totalWidth) + 11,
                      dashWidth: dashWidth,
                      dashGap: dashGap,
                      type: xAxisType,
                    }}
                  />
                ) : hideRules ? null : (
                  <Rule
                    config={{
                      thickness: rulesThickness,
                      color: rulesColor,
                      width: horizontal
                        ? props.width || Math.min(300, totalWidth)
                        : (props.width || totalWidth) + 11,
                      dashWidth: dashWidth,
                      dashGap: dashGap,
                      type: rulesType,
                    }}
                  />
                )}
              </View>
            </View>
          );
        })}

        {
          /***********************************************************************************************/
          /**************************      Render the y axis labels separately      **********************/
          /***********************************************************************************************/
          props.hideAxesAndRules !== true &&
            !hideYAxisText &&
            horizSections.map((sectionItems, index) => {
              let label = getLabel(sectionItems.value, index);
              if (hideOrigin && index === horizSections.length - 1) {
                label = '';
              }
              return (
                <View
                  key={index}
                  style={[
                    styles.horizBar,
                    styles.leftLabel,
                    {
                      position: 'absolute',
                      zIndex: 1,
                      top: stepHeight * index,
                      width: yAxisLabelWidth,
                      height:
                        index === noOfSections ? stepHeight / 2 : stepHeight,
                    },
                    yAxisSide === 'right' && {
                      transform: [
                        {
                          translateX:
                            (props.width ? props.width : totalWidth) - 30,
                        },
                        {rotateY: '180deg'},
                      ],
                    },
                    horizontal &&
                      !yAxisAtTop && {
                        transform: [
                          {
                            translateX:
                              (props.width || Math.min(300, totalWidth)) +
                              yAxisThickness +
                              yAxisLabelWidth,
                          },
                        ],
                      },
                    yAxisLabelContainerStyle,
                  ]}>
                  <Text
                    numberOfLines={yAxisTextNumberOfLines}
                    ellipsizeMode={'clip'}
                    style={[
                      yAxisTextStyle,
                      yAxisSide === 'right' && {
                        transform: [{rotateY: '180deg'}],
                      },
                      index === noOfSections && {
                        marginBottom: stepHeight / -2,
                      },
                    ]}>
                    {label}
                  </Text>
                </View>
              );
            })
          /***********************************************************************************************/
          /***********************************************************************************************/
        }
        {horizSectionsBelow.map((sectionItems, index) => {
          return (
            <View
              key={index}
              style={[
                styles.horizBar,
                {
                  width: horizontal
                    ? props.width || totalWidth
                    : props.width || totalWidth + 11,
                },
                yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
                index === 0 && {marginTop: stepHeight / 2},
              ]}>
              <View
                style={[
                  styles.leftLabel,
                  {
                    borderRightWidth: yAxisThickness,
                    borderColor: yAxisColor,
                  },
                  horizontal &&
                    !yAxisAtTop && {
                      transform: [{translateX: totalWidth + yAxisThickness}],
                    },
                  {
                    height: index === 0 ? stepHeight * 1.5 : stepHeight,
                    width: yAxisLabelWidth,
                  },
                  index === 0 && {marginTop: -stepHeight / 2},
                ]}
              />
              <View
                style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
                {hideRules ? null : (
                  <Rule
                    config={{
                      thickness: rulesThickness,
                      color: rulesColor,
                      width: horizontal
                        ? props.width || totalWidth
                        : (props.width || totalWidth) + 11,
                      dashWidth: dashWidth,
                      dashGap: dashGap,
                      type: rulesType,
                    }}
                  />
                )}
              </View>
            </View>
          );
        })}
        {
          /***********************************************************************************************/
          /*************************      Render the y axis labels below origin      *********************/
          /***********************************************************************************************/
          props.hideAxesAndRules !== true &&
            !hideYAxisText &&
            horizSectionsBelow.map((sectionItems, index) => {
              let label = getLabel(
                horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
                index,
              );
              return (
                <View
                  key={index}
                  style={[
                    styles.horizBar,
                    styles.leftLabel,
                    {
                      position: 'absolute',
                      zIndex: 1,
                      bottom: stepHeight * (index - 1),
                      width: yAxisLabelWidth,
                      height:
                        index === noOfSections ? stepHeight / 2 : stepHeight,
                    },
                    yAxisSide === 'right' && {
                      transform: [
                        {
                          translateX:
                            (props.width ? props.width : totalWidth) - 30,
                        },
                        {rotateY: '180deg'},
                      ],
                    },
                    yAxisLabelContainerStyle,
                  ]}>
                  <Text
                    numberOfLines={yAxisTextNumberOfLines}
                    ellipsizeMode={'clip'}
                    style={[
                      yAxisTextStyle,
                      yAxisSide === 'right' && {
                        transform: [{rotateY: '180deg'}],
                      },
                      index === noOfSections && {
                        marginBottom: stepHeight / -2,
                      },
                    ]}>
                    {label}
                  </Text>
                </View>
              );
            })
          /***********************************************************************************************/
          /***********************************************************************************************/
        }

        {
          /***********************************************************************************************/
          /*************************      Render the reference lines separately      *********************/
          /***********************************************************************************************/
          props.hideAxesAndRules !== true &&
            !hideYAxisText &&
            horizSections.map((sectionItems, index) => {
              let label = getLabel(sectionItems.value, index);
              if (hideOrigin && index === horizSections.length - 1) {
                label = '';
              }
              return (
                <View
                  key={index}
                  style={[
                    styles.horizBar,
                    styles.leftLabel,
                    {
                      position: 'absolute',
                      zIndex: 1,
                      top: stepHeight * index,
                      width: yAxisLabelWidth,
                      height:
                        index === noOfSections ? stepHeight / 2 : stepHeight,
                    },
                    yAxisSide === 'right' && {
                      transform: [
                        {
                          translateX:
                            (props.width ? props.width : totalWidth) - 30,
                        },
                        {rotateY: '180deg'},
                      ],
                    },
                  ]}>
                  {index === noOfSections && showReferenceLine1 ? (
                    <View
                      style={{
                        position: 'absolute',
                        bottom:
                          (referenceLine1Position * containerHeight) / maxValue,
                        left:
                          yAxisSide === 'right'
                            ? yAxisLabelWidth + yAxisThickness
                            : yAxisLabelWidth + yAxisThickness - 5,
                      }}>
                      <Rule config={referenceLine1Config} />
                      {referenceLine1Config.labelText ? (
                        <Text
                          style={[
                            {position: 'absolute'},
                            yAxisSide === 'right' && {
                              transform: [{rotateY: '180deg'}],
                            },
                            referenceLine1Config.labelTextStyle,
                          ]}>
                          {referenceLine1Config.labelText}
                        </Text>
                      ) : null}
                    </View>
                  ) : null}
                  {index === noOfSections && showReferenceLine2 ? (
                    <View
                      style={{
                        position: 'absolute',
                        bottom:
                          (referenceLine2Position * containerHeight) / maxValue,
                        left:
                          yAxisSide === 'right'
                            ? yAxisLabelWidth + yAxisThickness
                            : yAxisLabelWidth + yAxisThickness - 5,
                      }}>
                      <Rule config={referenceLine2Config} />
                      {referenceLine2Config.labelText ? (
                        <Text
                          style={[
                            {position: 'absolute'},
                            yAxisSide === 'right' && {
                              transform: [{rotateY: '180deg'}],
                            },
                            referenceLine2Config.labelTextStyle,
                          ]}>
                          {referenceLine2Config.labelText}
                        </Text>
                      ) : null}
                    </View>
                  ) : null}
                  {index === noOfSections && showReferenceLine3 ? (
                    <View
                      style={{
                        position: 'absolute',
                        bottom:
                          (referenceLine3Position * containerHeight) / maxValue,
                        left:
                          yAxisSide === 'right'
                            ? yAxisLabelWidth + yAxisThickness
                            : yAxisLabelWidth + yAxisThickness - 5,
                      }}>
                      <Rule config={referenceLine3Config} />
                      {referenceLine3Config.labelText ? (
                        <Text
                          style={[
                            {position: 'absolute'},
                            yAxisSide === 'right' && {
                              transform: [{rotateY: '180deg'}],
                            },
                            referenceLine3Config.labelTextStyle,
                          ]}>
                          {referenceLine3Config.labelText}
                        </Text>
                      ) : null}
                    </View>
                  ) : null}
                </View>
              );
            })
          /***********************************************************************************************/
          /***********************************************************************************************/
        }
      </>
    );
  };

  const renderSpecificVerticalLines = (dataForRender: any) => {
    return dataForRender.map((item: any, index: number) => {
      if (item.showVerticalLine) {
        const currentBarWidth = item.barWidth || props.barWidth || 30;
        return (
          <Rect
            x={
              yAxisLabelWidth +
              6 -
              (item.verticalLineThickness || 1) / 2 -
              1 -
              (initialSpacing - currentBarWidth / 2) +
              (currentBarWidth + spacing) * index
            }
            y={
              containerHeight -
              lineConfig.shiftY -
              (item.value * containerHeight) / maxValue +
              9
            }
            width={item.verticalLineThickness || 1}
            height={
              (item.value * containerHeight) / maxValue + lineConfig.shiftY
            }
            fill={item.verticalLineColor || 'lightgray'}
          />
        );
      }
      return null;
    });
  };

  const renderDataPoints = () => {
    return lineData.map((item: any, index: number) => {
      if (index < lineConfig.startIndex || index > lineConfig.endIndex) {
        return null;
      }
      // console.log('comes in');
      const currentBarWidth = item.barWidth || props.barWidth || 30;
      if (lineConfig.dataPointsShape === 'rectangular') {
        return (
          <Fragment key={index}>
            <Rect
              x={
                yAxisLabelWidth +
                lineConfig.initialSpacing +
                6 -
                (initialSpacing - currentBarWidth / 2) -
                lineConfig.dataPointsWidth +
                (currentBarWidth + spacing) * index
              }
              y={
                containerHeight -
                lineConfig.shiftY -
                lineConfig.dataPointsHeight / 2 -
                (item.value * containerHeight) / maxValue
              }
              width={lineConfig.dataPointsWidth}
              height={lineConfig.dataPointsHeight}
              fill={lineConfig.dataPointsColor}
            />
            {item.dataPointText && (
              <CanvasText
                fill={item.textColor || lineConfig.textColor}
                fontSize={item.textFontSize || lineConfig.textFontSize}
                x={
                  yAxisLabelWidth +
                  lineConfig.initialSpacing +
                  6 -
                  (initialSpacing - currentBarWidth / 2) -
                  lineConfig.dataPointsWidth +
                  (currentBarWidth + spacing) * index +
                  (item.textShiftX || lineConfig.textShiftX || 0)
                }
                y={
                  containerHeight -
                  lineConfig.shiftY -
                  lineConfig.dataPointsHeight / 2 -
                  (item.value * containerHeight) / maxValue +
                  (item.textShiftY || lineConfig.textShiftY || 0)
                }>
                {item.dataPointText}
              </CanvasText>
            )}
          </Fragment>
        );
      }
      return (
        <Fragment key={index}>
          <Circle
            cx={
              yAxisLabelWidth +
              lineConfig.initialSpacing +
              6 -
              (initialSpacing - currentBarWidth / 2) -
              lineConfig.dataPointsWidth / 2 +
              (currentBarWidth + spacing) * index
            }
            cy={
              containerHeight -
              lineConfig.shiftY -
              (item.value * containerHeight) / maxValue
            }
            r={lineConfig.dataPointsRadius}
            fill={lineConfig.dataPointsColor}
          />
          {item.dataPointText && (
            <CanvasText
              fill={item.textColor || lineConfig.textColor}
              fontSize={item.textFontSize || lineConfig.textFontSize}
              x={
                yAxisLabelWidth +
                lineConfig.initialSpacing +
                6 -
                (initialSpacing - currentBarWidth / 2) -
                lineConfig.dataPointsWidth +
                (currentBarWidth + spacing) * index +
                (item.textShiftX || lineConfig.textShiftX || 0)
              }
              y={
                containerHeight -
                lineConfig.shiftY -
                lineConfig.dataPointsHeight / 2 -
                (item.value * containerHeight) / maxValue +
                (item.textShiftY || lineConfig.textShiftY || 0)
              }>
              {item.dataPointText}
            </CanvasText>
          )}
        </Fragment>
      );
    });
  };
  const renderSpecificDataPoints = dataForRender => {
    return dataForRender.map((item: any, index: number) => {
      const currentBarWidth = item.barWidth || props.barWidth || 30;
      if (item.showDataPoint) {
        if (item.dataPointShape === 'rectangular') {
          return (
            <Fragment key={index}>
              <Rect
                x={
                  initialSpacing -
                  (item.dataPointWidth || 2) / 2 -
                  1 +
                  (currentBarWidth + spacing) * index
                }
                y={
                  containerHeight -
                  lineConfig.shiftY -
                  (item.dataPointHeight || 2) / 2 +
                  10 -
                  (item.value * containerHeight) / maxValue
                }
                width={item.dataPointWidth || 2}
                height={item.dataPointHeight || 2}
                fill={item.dataPointColor || 'black'}
              />
              {item.dataPointText && (
                <CanvasText
                  fill={item.textColor || 'black'}
                  fontSize={item.textFontSize || 10}
                  x={
                    initialSpacing -
                    (item.dataPointWidth || 2) +
                    spacing * index +
                    (item.textShiftX || lineConfig.textShiftX || 0)
                  }
                  y={
                    containerHeight -
                    lineConfig.shiftY -
                    (item.dataPointHeight || 2) / 2 +
                    10 -
                    (item.value * containerHeight) / maxValue +
                    (item.textShiftY || lineConfig.textShiftY || 0)
                  }>
                  {item.dataPointText}
                </CanvasText>
              )}
            </Fragment>
          );
        } else {
          return (
            <Fragment key={index}>
              <Circle
                cx={
                  initialSpacing -
                  (item.dataPointWidth || 2) / 2 +
                  spacing * index
                }
                cy={
                  containerHeight -
                  lineConfig.shiftY +
                  10 -
                  (item.value * containerHeight) / maxValue
                }
                r={item.dataPointRadius || 3}
                fill={item.dataPointColor || 'black'}
              />
              {item.dataPointText && (
                <CanvasText
                  fill={item.textColor || 'black'}
                  fontSize={item.textFontSize || 10}
                  x={
                    initialSpacing -
                    (item.dataPointWidth || 2) +
                    spacing * index +
                    (item.textShiftX || lineConfig.textShiftX || 0)
                  }
                  y={
                    containerHeight -
                    lineConfig.shiftY -
                    (item.dataPointHeight || 2) / 2 +
                    10 -
                    (item.value * containerHeight) / maxValue +
                    (item.textShiftY || lineConfig.textShiftY || 0)
                  }>
                  {item.dataPointText}
                </CanvasText>
              )}
            </Fragment>
          );
        }
      }
      return null;
    });
  };

  const renderAnimatedLine = () => {
    // console.log('animatedWidth is-------->', animatedWidth);
    return (
      <Animated.View
        style={{
          position: 'absolute',
          height: containerHeight + 10,
          bottom: 60, //stepHeight * -0.5 + xAxisThickness,
          width: animatedWidth,
          zIndex: -1,
          // backgroundColor: 'wheat',
        }}>
        <Svg>
          <Path
            d={points}
            fill="none"
            stroke={lineConfig.color}
            strokeWidth={lineConfig.thickness}
          />

          {renderSpecificVerticalLines(data)}

          {!lineConfig.hideDataPoints
            ? renderDataPoints()
            : renderSpecificDataPoints(data)}
        </Svg>
      </Animated.View>
    );
  };

  const renderLine = () => {
    return (
      <View
        style={{
          position: 'absolute',
          height: containerHeight + 10,
          bottom: 60, //stepHeight * -0.5 + xAxisThickness,
          width: totalWidth,
          zIndex: -1,
          // backgroundColor: 'rgba(200,150,150,0.1)'
        }}>
        <Svg>
          <Path
            d={points}
            fill="none"
            stroke={lineConfig.color}
            strokeWidth={lineConfig.thickness}
          />
          {renderSpecificVerticalLines(data)}

          {!lineConfig.hideDataPoints
            ? renderDataPoints()
            : renderSpecificDataPoints(data)}
        </Svg>
      </View>
    );
  };

  return (
    <View
      style={[
        styles.container,
        {
          height:
            containerHeight +
            horizSectionsBelow.length * stepHeight +
            labelsExtraHeight,
        },
        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
        props.width && !horizontal && {width: props.width},
        horizontal && {transform: [{rotate: '90deg'}, {translateY: 15}]},
      ]}>
      {props.hideAxesAndRules !== true && renderHorizSections()}
      <ScrollView
        ref={scrollRef}
        onTouchStart={evt => {
          if (props.renderTooltip) {
            setSelectedIndex(-1);
          }
        }}
        onContentSizeChange={() => {
          if (scrollRef.current && scrollToEnd) {
            scrollRef.current.scrollToEnd({animated: scrollAnimation});
          }
        }}
        style={[
          {
            marginLeft:
              yAxisSide === 'right' ? -yAxisLabelWidth + 10 : yAxisLabelWidth,
            position: 'absolute',
            bottom: stepHeight * -0.5 - 60 + xAxisThickness,
          },
          props.width && {width: props.width - 11},
          horizontal && {width: props.width || Math.min(300, totalWidth)},
        ]}
        scrollEnabled={!disableScroll}
        contentContainerStyle={[
          {
            // backgroundColor: 'yellow',
            height:
              containerHeight +
              130 +
              horizSectionsBelow.length * stepHeight +
              labelsExtraHeight,
            paddingLeft: initialSpacing,
            paddingBottom:
              horizSectionsBelow.length * stepHeight + labelsExtraHeight,
            alignItems: 'flex-end',
          },
          !props.width && {width: totalWidth},
        ]}
        showsHorizontalScrollIndicator={showScrollIndicator}
        indicatorStyle={props.indicatorColor}
        horizontal
        // data={props.stackData || data}
        keyExtractor={(item, index) => index.toString()}>
        <Fragment>
          {showVerticalLines &&
            verticalLinesAr.map((item: itemType, index: number) => {
              let totalSpacing = initialSpacing;
              if (verticalLinesSpacing) {
                totalSpacing = verticalLinesSpacing * (index + 1);
              } else {
                if (props.stackData) {
                  totalSpacing +=
                    (props.stackData[0].barWidth || props.barWidth || 30) / 2;
                } else {
                  totalSpacing +=
                    (props.data[0].barWidth || props.barWidth || 30) / 2;
                }
                for (let i = 0; i < index; i++) {
                  let actualSpacing = spacing;
                  if (props.stackData) {
                    if (i >= props.stackData.length - 1) {
                      actualSpacing += (props.barWidth || 30) / 2;
                    } else {
                      if (
                        props.stackData[i].spacing ||
                        props.stackData[i].spacing === 0
                      ) {
                        actualSpacing = props.stackData[i].spacing;
                      }
                      if (props.stackData[i + 1].barWidth) {
                        actualSpacing += props.stackData[i + 1].barWidth;
                      } else {
                        actualSpacing += props.barWidth || 30;
                      }
                    }
                  } else {
                    if (i >= props.data.length - 1) {
                      actualSpacing += (props.barWidth || 30) / 2;
                    } else {
                      if (
                        props.data[i].spacing ||
                        props.data[i].spacing === 0
                      ) {
                        console.log('here for index ' + index + ' and i ' + i);
                        actualSpacing = props.data[i].spacing;
                      }
                      if (props.data[i + 1].barWidth) {
                        actualSpacing += props.data[i + 1].barWidth;
                      } else {
                        actualSpacing += props.barWidth || 30;
                      }
                    }
                  }
                  console.log('i = ' + i + ' actualSpacing ' + actualSpacing);
                  totalSpacing += actualSpacing;
                }
              }

              return (
                <View
                  key={index}
                  style={{
                    position: 'absolute',
                    zIndex: verticalLinesZIndex || -1,
                    marginBottom: xAxisThickness,
                    height:
                      verticalLinesHeight ||
                      containerHeight + 15 - xAxisThickness,
                    width: verticalLinesThickness,
                    backgroundColor: verticalLinesColor,
                    bottom: 60 + labelsExtraHeight,
                    left: totalSpacing,
                  }}
                />
              );
            })}
          {showLine
            ? lineConfig.isAnimated
              ? renderAnimatedLine()
              : renderLine()
            : null}
          {props.stackData
            ? props.stackData.map((item, index) => {
                return (
                  <RenderStackBars
                    key={index}
                    stackData={props.stackData}
                    item={item}
                    index={index}
                    containerHeight={containerHeight}
                    maxValue={maxValue}
                    spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
                    propSpacing={spacing}
                    xAxisThickness={xAxisThickness}
                    barWidth={props.barWidth}
                    opacity={opacity}
                    disablePress={item.disablePress || props.disablePress}
                    rotateLabel={rotateLabel}
                    showXAxisIndices={showXAxisIndices}
                    xAxisIndicesHeight={xAxisIndicesHeight}
                    xAxisIndicesWidth={xAxisIndicesWidth}
                    xAxisIndicesColor={xAxisIndicesColor}
                    horizontal={horizontal}
                    intactTopLabel={intactTopLabel}
                    barBorderRadius={props.barBorderRadius}
                    barBackgroundPattern={props.barBackgroundPattern}
                    patternId={props.patternId}
                    label={
                      item.label ||
                      (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
                        ? props.xAxisLabelTexts[index]
                        : '')
                    }
                    labelTextStyle={
                      item.labelTextStyle || props.xAxisLabelTextStyle
                    }
                    xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                    renderTooltip={props.renderTooltip}
                    initialSpacing={initialSpacing}
                    selectedIndex={selectedIndex}
                    setSelectedIndex={setSelectedIndex}
                    activeOpacity={props.activeOpacity || 0.2}
                  />
                );
              })
            : data.map((item, index) => (
                <RenderBars
                  key={index}
                  item={item}
                  index={index}
                  containerHeight={containerHeight}
                  maxValue={maxValue}
                  spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
                  propSpacing={spacing}
                  side={side}
                  data={data}
                  barWidth={props.barWidth}
                  sideWidth={props.sideWidth}
                  labelWidth={labelWidth}
                  opacity={opacity}
                  isThreeD={isThreeD}
                  isAnimated={isAnimated}
                  animationDuration={animationDuration}
                  rotateLabel={rotateLabel}
                  animatedHeight={animatedHeight}
                  appearingOpacity={appearingOpacity}
                  roundedTop={props.roundedTop}
                  roundedBottom={props.roundedBottom}
                  disablePress={props.disablePress}
                  frontColor={props.frontColor}
                  sideColor={props.sideColor}
                  topColor={props.topColor}
                  showGradient={props.showGradient}
                  gradientColor={props.gradientColor}
                  activeOpacity={props.activeOpacity}
                  cappedBars={props.cappedBars}
                  capThickness={props.capThickness}
                  capColor={props.capColor}
                  capRadius={props.capRadius}
                  showXAxisIndices={showXAxisIndices}
                  xAxisIndicesHeight={xAxisIndicesHeight}
                  xAxisIndicesWidth={xAxisIndicesWidth}
                  xAxisIndicesColor={xAxisIndicesColor}
                  horizontal={horizontal}
                  intactTopLabel={intactTopLabel}
                  barBorderRadius={props.barBorderRadius}
                  autoShiftLabels={autoShiftLabels}
                  barBackgroundPattern={props.barBackgroundPattern}
                  patternId={props.patternId}
                  barMarginBottom={props.barMarginBottom}
                  label={
                    item.label ||
                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
                      ? props.xAxisLabelTexts[index]
                      : '')
                  }
                  labelTextStyle={
                    item.labelTextStyle || props.xAxisLabelTextStyle
                  }
                  onPress={props.onPress}
                  xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                  renderTooltip={props.renderTooltip}
                  initialSpacing={initialSpacing}
                  selectedIndex={selectedIndex}
                  setSelectedIndex={setSelectedIndex}
                />
              ))}
        </Fragment>
      </ScrollView>
    </View>
  );
}
Example #23
Source File: svgs.tsx    From nyxo-app with GNU General Public License v3.0 4 votes vote down vote up
icons = {
  settingsLight: (
    <G>
      <Path
        {...defaultProps}
        d="M20.254,13.5H22.5a1,1,0,0,0,1-1v-1a1,1,0,0,0-1-1H20.253a11.8,11.8,0,0,0-1-2.922l1.589-1.588a1,1,0,0,0,0-1.414L19.424,3.162a1,1,0,0,0-1.414,0L16.42,4.751a11.769,11.769,0,0,0-2.92-1V1.5a1,1,0,0,0-1-1h-1a1,1,0,0,0-1,1V3.749a11.777,11.777,0,0,0-2.921,1L5.989,3.162a1,1,0,0,0-1.414,0L3.16,4.577a1,1,0,0,0,0,1.414L4.75,7.58a11.821,11.821,0,0,0-1,2.921H1.5a1,1,0,0,0-1,1v1a1,1,0,0,0,1,1H3.746a11.821,11.821,0,0,0,1,2.921l-1.59,1.59a1,1,0,0,0,0,1.414L4.575,20.84a1,1,0,0,0,1.414,0L7.578,19.25a11.8,11.8,0,0,0,2.922,1V22.5a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1V20.255a11.8,11.8,0,0,0,2.92-1l1.591,1.589a1,1,0,0,0,1.414,0l1.414-1.414a1,1,0,0,0,0-1.414l-1.589-1.59A11.821,11.821,0,0,0,20.254,13.5Z"
      />
      <Circle {...defaultProps} cx="12" cy="12.001" r="4.5" />
    </G>
  ),
  settingsBold: (
    <G>
      <Path d="M22.421,9.763l-1.266-.449a1.374,1.374,0,0,1-.78-1.886h0l.576-1.213A2.376,2.376,0,0,0,17.786,3.05l-1.213.577a1.375,1.375,0,0,1-1.885-.782l-.45-1.265a2.376,2.376,0,0,0-4.476,0l-.45,1.266a1.375,1.375,0,0,1-1.885.781L6.214,3.05A2.376,2.376,0,0,0,3.049,6.215l.576,1.213a1.375,1.375,0,0,1-.78,1.886l-1.266.45a2.375,2.375,0,0,0,0,4.475l1.266.45a1.374,1.374,0,0,1,.78,1.885l-.576,1.213a2.376,2.376,0,0,0,3.165,3.165l1.213-.576a1.373,1.373,0,0,1,1.885.781l.45,1.265a2.376,2.376,0,0,0,4.476,0l.45-1.266a1.374,1.374,0,0,1,1.885-.78l1.213.576a2.376,2.376,0,0,0,3.165-3.165l-.576-1.213a1.374,1.374,0,0,1,.78-1.885l1.266-.451a2.375,2.375,0,0,0,0-4.475ZM12,16.785a4.93,4.93,0,0,1-4.441-2.944,4.813,4.813,0,0,1,2.6-6.281,4.868,4.868,0,0,1,6.281,2.6,4.813,4.813,0,0,1-2.6,6.281A4.589,4.589,0,0,1,12,16.785Z" />
    </G>
  ),
  userBold: (
    <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,2.5a9.482,9.482,0,0,1,7.3,15.561.5.5,0,0,1-.589.136c-.88-.4-1.945-.79-3.16-1.237l-.744-.274a.8.8,0,0,1-.324-.552A1.99,1.99,0,0,1,14.67,14.6c1.068-1.176,1.73-2.44,1.73-5.1A4.294,4.294,0,0,0,12,4.832,4.294,4.294,0,0,0,7.6,9.5c0,2.663.662,3.927,1.73,5.1a1.99,1.99,0,0,1,.192,1.533.8.8,0,0,1-.324.552l-.744.274c-1.215.447-2.28.84-3.16,1.237a.5.5,0,0,1-.589-.136A9.482,9.482,0,0,1,12,2.5Z" />
  ),
  userLight: (
    <G>
      <Circle {...defaultProps} cx="12" cy="12" r="11.5" />
      <Path
        {...defaultProps}
        d="M3.959,20.221a25.59,25.59,0,0,1,5.413-2.352c.837-.309.928-2.229.328-2.889-.866-.953-1.6-2.07-1.6-4.766A3.812,3.812,0,0,1,12,6.047a3.812,3.812,0,0,1,3.9,4.167c0,2.7-.734,3.813-1.6,4.766-.6.66-.509,2.58.328,2.889a25.59,25.59,0,0,1,5.413,2.352"
      />
    </G>
  ),
  clockBold: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm5.2,17.221a1.016,1.016,0,0,1-1.413.062l-4.959-4.546A1,1,0,0,1,10.5,12V6.5a1,1,0,0,1,2,0v5.06l4.634,4.248A1,1,0,0,1,17.2,17.222Z" />
    </G>
  ),
  clockRegular: (
    <G>
      <Circle fill="none" {...defaultProps} cx="12" cy="12" r="10.5" />
      <Circle
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5px"
        cx="12"
        cy="12"
        r="1.5"
      />
      <Line fill="none" {...defaultProps} x1="12" y1="10.5" x2="12" y2="5.25" />
      <Line
        fill="none"
        {...defaultProps}
        x1="13.061"
        y1="13.061"
        x2="15.75"
        y2="15.75"
      />
    </G>
  ),
  schoolPhysicalBold: (
    <G>
      <Path d="M15.956,12.2a.5.5,0,0,0-.064-.427A6.809,6.809,0,0,0,6.1,10.205.25.25,0,0,1,5.7,10,8.418,8.418,0,0,0,5.364,7.23.5.5,0,0,1,5.525,6.7,3.334,3.334,0,0,0,6.74,4.12,3.373,3.373,0,0,0,3.024.767,3.491,3.491,0,0,0,0,4.284v9.021A3.949,3.949,0,0,0,3.944,17.25H9a.5.5,0,0,0,.5-.5v-.415a2,2,0,0,1,1.26-1.868l4.9-1.947A.5.5,0,0,0,15.956,12.2Z" />
      <Path d="M23.685,15.86l-6-2.382a.5.5,0,0,0-.37,0l-6,2.382a.5.5,0,0,0-.315.475v3.13a.5.5,0,0,0,1,0v-2.08a.25.25,0,0,1,.333-.236l5,1.765a.49.49,0,0,0,.332,0l6-2.117a.5.5,0,0,0,.019-.937Z" />
      <Path d="M20.763,19.079l-2.93,1.034a1,1,0,0,1-.666,0l-2.93-1.034a.5.5,0,0,0-.666.472V21.7a.5.5,0,0,0,.334.471l2.573.908a3.069,3.069,0,0,0,2.043,0l2.574-.908a.5.5,0,0,0,.334-.471V19.551a.5.5,0,0,0-.666-.472Z" />
    </G>
  ),
  percentage: (
    <G>
      <Path d="M15.116,7.116l-8,8a1.25,1.25,0,1,0,1.767,1.768l8-8a1.25,1.25,0,0,0-1.767-1.768Z" />
      <Path d="M5.750 8.135 A2.250 2.250 0 1 0 10.250 8.135 A2.250 2.250 0 1 0 5.750 8.135 Z" />
      <Path d="M13.750 16.135 A2.250 2.250 0 1 0 18.250 16.135 A2.250 2.250 0 1 0 13.750 16.135 Z" />
      <Path d="M2.913,22l-.652.031A.25.25,0,0,1,2,21.781v-.694a1,1,0,0,0-2,0v.956A1.958,1.958,0,0,0,1.956,24h.957a1,1,0,1,0,0-2Z" />
      <Path d="M23,20.087a1,1,0,0,0-1,1l.031.651a.251.251,0,0,1-.069.184.247.247,0,0,1-.181.078h-.7a1,1,0,0,0,0,2h.957A1.959,1.959,0,0,0,24,22.043v-.956A1,1,0,0,0,23,20.087Z" />
      <Path d="M2.913,0H1.956A1.958,1.958,0,0,0,0,1.957v.956a1,1,0,0,0,2,0l-.032-.651a.251.251,0,0,1,.069-.184A.247.247,0,0,1,2.218,2h.695a1,1,0,0,0,0-2Z" />
      <Path d="M21.086,2l.652-.031a.251.251,0,0,1,.184.069A.247.247,0,0,1,22,2.219v.694a1,1,0,1,0,2,0V1.957A1.959,1.959,0,0,0,22.043,0h-.957a1,1,0,0,0,0,2Z" />
      <Path d="M23,5.5a1,1,0,0,0-1,1V10a1,1,0,0,0,2,0V6.5A1,1,0,0,0,23,5.5Z" />
      <Path d="M23,13a1,1,0,0,0-1,1v3.5a1,1,0,0,0,2,0V14A1,1,0,0,0,23,13Z" />
      <Path d="M1,11a1,1,0,0,0,1-1V6.5a1,1,0,0,0-2,0V10A1,1,0,0,0,1,11Z" />
      <Path d="M0,17.5a1,1,0,0,0,2,0V14a1,1,0,0,0-2,0Z" />
      <Path d="M6.5,2H10a1,1,0,0,0,0-2H6.5a1,1,0,0,0,0,2Z" />
      <Path d="M17.5,0H14a1,1,0,0,0,0,2h3.5a1,1,0,0,0,0-2Z" />
      <Path d="M10,22H6.5a1,1,0,0,0,0,2H10a1,1,0,0,0,0-2Z" />
      <Path d="M17.5,22H14a1,1,0,0,0,0,2h3.5a1,1,0,0,0,0-2Z" />
    </G>
  ),
  schoolPhysical: (
    <G>
      <Path
        fill="none"
        {...defaultProps}
        d="M6.75,17.25h-2.3A3.682,3.682,0,0,1,.75,13.583V3.98A3.183,3.183,0,0,1,3.512.766,3.046,3.046,0,0,1,5.188,6.535a8.712,8.712,0,0,1,0,6.437,6.794,6.794,0,0,1,10.668-1.838"
      />
      <Polyline
        fill="none"
        {...defaultProps}
        points="20.25 18.375 20.25 22.333 17.25 23.25 14.25 22.333 14.25 18.375"
      />
      <Polygon
        fill="none"
        {...defaultProps}
        points="23.25 17.25 17.25 15 11.25 17.25 17.25 19.5 23.25 17.25"
      />
      <Line
        fill="none"
        {...defaultProps}
        x1="11.25"
        y1="17.25"
        x2="11.25"
        y2="20.25"
      />
    </G>
  ),

  emailUnreadRegular: (
    <G>
      <Rect
        fill="none"
        {...defaultProps}
        x="1.5"
        y="4.75"
        width="21"
        height="15"
        rx="1.5"
        ry="1.5"
      />
      <Path
        fill="none"
        {...defaultProps}
        d="M22.161,5.3l-8.144,6.264a3.308,3.308,0,0,1-4.034,0L1.839,5.3"
      />
    </G>
  ),
  bookLamp: (
    <G>
      <Path d="M23.25,11.748a.75.75,0,0,0-.75.75v7.221a.256.256,0,0,1-.256.249,23.465,23.465,0,0,0-8.779,1.7.5.5,0,0,1-.715-.452V9.37c0-2.686-5.682-4.078-10.961-4.235a1.7,1.7,0,0,0-1.255.49A1.764,1.764,0,0,0,0,6.886V19.719a1.747,1.747,0,0,0,1.713,1.748c4.036.116,7.69.961,9.093,2.1a1.876,1.876,0,0,0,2.388,0c1.4-1.143,5.057-1.988,9.093-2.1A1.747,1.747,0,0,0,24,19.719V12.5A.75.75,0,0,0,23.25,11.748Zm-12,9.464a.5.5,0,0,1-.715.452,23.465,23.465,0,0,0-8.779-1.7.256.256,0,0,1-.256-.249V6.886A.256.256,0,0,1,1.579,6.7a.2.2,0,0,1,.165-.067c6.241.186,9.506,1.88,9.506,2.736Z" />
      <Path d="M9.258,10.149a21.869,21.869,0,0,0-5.186-1.02.742.742,0,0,0-.818.673.751.751,0,0,0,.674.82,20.181,20.181,0,0,1,4.851.949.75.75,0,0,0,.479-1.422Z" />
      <Path d="M9.258,13.822A21.854,21.854,0,0,0,4.072,12.8a.75.75,0,0,0-.144,1.493,20.224,20.224,0,0,1,4.851.95.75.75,0,0,0,.479-1.422Z" />
      <Path d="M9.258,17.5a21.854,21.854,0,0,0-5.186-1.021.75.75,0,0,0-.144,1.493,20.224,20.224,0,0,1,4.851.95A.75.75,0,0,0,9.258,17.5Z" />
      <Path d="M18.5,3a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V2A1,1,0,0,0,18.5,3Z" />
      <Path d="M22.354,4.122a1,1,0,0,0,.764-.355L23.764,3a1,1,0,1,0-1.528-1.291l-.645.763a1,1,0,0,0,.763,1.646Z" />
      <Path d="M13.882,3.767a1,1,0,1,0,1.527-1.291l-.645-.763A1,1,0,1,0,13.236,3Z" />
      <Path d="M18.5,16.75a.75.75,0,0,0,.75-.75v-.242a.469.469,0,0,1,.237-.407A2,2,0,0,0,20.5,13.612v-.783a.5.5,0,0,1,.25-.433,4.5,4.5,0,1,0-4.5,0,.5.5,0,0,1,.25.433v.783a2,2,0,0,0,1.013,1.739.469.469,0,0,1,.237.407V16A.75.75,0,0,0,18.5,16.75ZM16,8.5A2.5,2.5,0,1,1,18.5,11,2.5,2.5,0,0,1,16,8.5Z" />
    </G>
  ),
  nightMoonBegin: (
    <G>
      <Line {...defaultProps} x1="11.656" y1="23.011" x2="11.656" y2="15.511" />
      <Polyline
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5px"
        points="13.906 17.761 11.656 15.511 9.406 17.761"
      />
      <Line {...defaultProps} x1="14.656" y1="20.011" x2="22.906" y2="20.011" />
      <Line {...defaultProps} x1="1.156" y1="20.011" x2="8.656" y2="20.011" />
      <Path
        {...defaultProps}
        d="M15.406,8.761a6,6,0,0,1-6-6A5.93,5.93,0,0,1,9.745.851a5.984,5.984,0,1,0,7.571,7.571A5.957,5.957,0,0,1,15.406,8.761Z"
      />
    </G>
  ),
  nightMoonEnd: (
    <G>
      <Line {...defaultProps} x1="12" y1="15.617" x2="12" y2="23.117" />
      <Polyline {...defaultProps} points="9.75 20.867 12 23.117 14.25 20.867" />
      <Line {...defaultProps} x1="16.5" y1="20.117" x2="23.25" y2="20.117" />
      <Line {...defaultProps} x1="1.5" y1="20.117" x2="7.5" y2="20.117" />
      <Path
        {...defaultProps}
        d="M15.75,8.867a6,6,0,0,1-6-6,5.931,5.931,0,0,1,.34-1.91,5.984,5.984,0,1,0,7.57,7.571A5.957,5.957,0,0,1,15.75,8.867Z"
      />
    </G>
  ),

  doubleBed: (
    <G>
      <Path
        {...defaultProps}
        d="M3,11.25V9A1.5,1.5,0,0,1,4.5,7.5h6A1.5,1.5,0,0,1,12,9v2.25"
      />
      <Path
        {...defaultProps}
        d="M12,11.25V9a1.5,1.5,0,0,1,1.5-1.5h6A1.5,1.5,0,0,1,21,9v2.25"
      />
      <Path
        {...defaultProps}
        d="M2.75,11.25h18.5a2,2,0,0,1,2,2V18a0,0,0,0,1,0,0H.75a0,0,0,0,1,0,0V13.25A2,2,0,0,1,2.75,11.25Z"
      />
      <Line {...defaultProps} x1="0.75" y1="18" x2="0.75" y2="21" />
      <Line {...defaultProps} x1="23.25" y1="18" x2="23.25" y2="21" />
      <Path
        {...defaultProps}
        d="M21,11.25V4.5A1.5,1.5,0,0,0,19.5,3H4.5A1.5,1.5,0,0,0,3,4.5v6.75"
      />
    </G>
  ),

  // Smileys!!

  smileyEyesOnly: (
    <G>
      <Path
        {...defaultProps}
        d="M6.5,9.75a.25.25,0,1,1-.25.25.25.25,0,0,1,.25-.25"
      />
      <Path
        {...defaultProps}
        d="M17.5,9.75a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25"
      />
      <Circle {...defaultProps} cx="12" cy="12" r="11.5" />
    </G>
  ),
  smileyIndifferent: (
    <G>
      <Circle {...defaultProps} cx="12" cy="12" r="11.5" />
      <Path
        {...defaultProps}
        d="M8.5,7.75A.25.25,0,1,1,8.25,8a.25.25,0,0,1,.25-.25"
      />
      <Path
        {...defaultProps}
        d="M15.5,7.75a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25"
      />
      <Line {...defaultProps} x1="5.5" y1="15.5" x2="18.5" y2="15.5" />
    </G>
  ),
  smileyIndifferentBold: (
    <G>
      <Path d="M17,15H7a1,1,0,0,0,0,2H17a1,1,0,0,0,0-2Z" />
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" />
      <Circle cx="8" cy="9" r="2" />
      <Circle cx="16" cy="9" r="2" />
    </G>
  ),
  smileySmirkGlasses: (
    <G>
      <Path {...defaultProps} d="M17,16.159A6.516,6.516,0,0,1,10.38,18.3" />
      <Circle {...defaultProps} cx="12" cy="12" r="11.5" />
      <Path
        {...defaultProps}
        d="M22.586,7.5l-.922,2.907A3,3,0,0,1,18.8,12.5H14.566a1,1,0,0,1-.857-.486l-.952-1.585a.882.882,0,0,0-1.514,0l-.952,1.585a1,1,0,0,1-.857.486H5.2a3,3,0,0,1-2.86-2.093L1.414,7.5Z"
      />
    </G>
  ),

  smileyUnhappy: (
    <G>
      <Path
        {...defaultProps}
        d="M8.5,7.75A.25.25,0,1,1,8.25,8a.25.25,0,0,1,.25-.25"
      />
      <Path
        {...defaultProps}
        d="M15.5,7.75a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25"
      />
      <Path {...defaultProps} d="M10.38,18.5A6.521,6.521,0,0,1,17,16.355" />
      <Circle {...defaultProps} cx="12" cy="12" r="11.5" />
    </G>
  ),
  smileySadBold: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" />
      <Path d="M12,14a5.624,5.624,0,0,0-4.87,3.008,1,1,0,1,0,1.74.984A3.654,3.654,0,0,1,12,16a3.654,3.654,0,0,1,3.13,1.992,1,1,0,0,0,1.74-.984A5.624,5.624,0,0,0,12,14Z" />
      <Circle cx="8" cy="9" r="2" />
      <Circle cx="16" cy="9" r="2" />
    </G>
  ),
  smileySmirkBold: (
    <G>
      <Path d="M17.887,13.077a1,1,0,0,0-1.308.538,5.508,5.508,0,0,1-7.194,2.964,1,1,0,1,0-.77,1.846,7.508,7.508,0,0,0,9.81-4.04A1,1,0,0,0,17.887,13.077Z" />
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" />
      <Circle cx="8" cy="9" r="2" />
      <Circle cx="16" cy="9" r="2" />
    </G>
  ),

  // Interface icons

  chevronLeft: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm3.906,17.008a1.25,1.25,0,1,1-1.521,1.984L7.039,13.358a1.711,1.711,0,0,1,0-2.716l7.346-5.634a1.25,1.25,0,1,1,1.521,1.984L9.635,11.8a.249.249,0,0,0,0,.4Z" />
    </G>
  ),
  chevronRight: (
    <G>
      <Path d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12C23.993,5.376,18.624,0.007,12,0z M16.961,13.358l-7.346,5.634 c-0.545,0.424-1.33,0.326-1.754-0.219c-0.424-0.545-0.326-1.33,0.219-1.754c0.005-0.004,0.009-0.007,0.014-0.011l6.271-4.81 c0.11-0.082,0.134-0.238,0.052-0.348c-0.015-0.02-0.032-0.037-0.052-0.052L8.094,6.992c-0.551-0.416-0.66-1.2-0.244-1.751 s1.2-0.66,1.751-0.244C9.606,5.001,9.61,5.004,9.615,5.008l7.346,5.634c0.75,0.575,0.892,1.649,0.317,2.399 C17.187,13.16,17.08,13.267,16.961,13.358z" />
    </G>
  ),
  informationCircle: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z" />
    </G>
  ),
  shovel: (
    <G>
      <Path d="M8.474,18.025a.248.248,0,0,0,.052-.2.252.252,0,0,0-.12-.172,5.107,5.107,0,0,0-2.566-.666c-2.886,0-4.591,5.312-4.983,6.681a.248.248,0,0,0,.041.22.251.251,0,0,0,.2.1H4.533a.249.249,0,0,0,.249-.222,2,2,0,0,1,.251-.77A38.61,38.61,0,0,1,8.474,18.025Z" />
      <Path d="M16.408,12.135a.25.25,0,0,0,.184-.325,2.484,2.484,0,0,0-.569-.968l-2.4-2.4a1,1,0,0,0-1.414,0L11.145,9.5,5.135,3.49,6.9,1.723A1,1,0,0,0,5.488.309L.539,5.258A1,1,0,0,0,1.953,6.672L3.721,4.9l6.011,6.011L8.671,11.976a1,1,0,0,0,0,1.414l1.948,1.948a.251.251,0,0,0,.347.006A12.225,12.225,0,0,1,16.408,12.135Z" />
      <Path d="M17.77,13.984c-4.67,0-9.668,7.8-10.775,9.621a.25.25,0,0,0,.214.379H23.5a.254.254,0,0,0,.183-.079.252.252,0,0,0,.066-.189C23.639,22.125,22.807,13.984,17.77,13.984Z" />
    </G>
  ),
  lockCircle: (
    <G>
      <Path d="M19.5,9.5h-.75V6.75a6.75,6.75,0,0,0-13.5,0V9.5H4.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h15a2,2,0,0,0,2-2V11.5A2,2,0,0,0,19.5,9.5Zm-9.5,6a2,2,0,1,1,3,1.723V19.5a1,1,0,0,1-2,0V17.223A1.994,1.994,0,0,1,10,15.5ZM7.75,6.75a4.25,4.25,0,0,1,8.5,0V9a.5.5,0,0,1-.5.5H8.25a.5.5,0,0,1-.5-.5Z" />
    </G>
  ),
  closeCircle: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm5.49,16.076a1,1,0,1,1-1.414,1.414l-3.9-3.9a.252.252,0,0,0-.354,0l-3.9,3.9a1.012,1.012,0,0,1-1.414,0,1,1,0,0,1,0-1.414l3.9-3.9a.249.249,0,0,0,0-.353l-3.9-3.9A1,1,0,0,1,7.924,6.51l3.9,3.9a.25.25,0,0,0,.354,0l3.9-3.9A1,1,0,1,1,17.49,7.924l-3.9,3.9a.249.249,0,0,0,0,.353Z" />
    </G>
  ),
  navigationCircleRight: (
    <G>
      <Path d="M12,24A12,12,0,1,0,0,12,12.013,12.013,0,0,0,12,24Zm0-2A10,10,0,1,1,22,12,10.012,10.012,0,0,1,12,22Z" />
      <Path d="M12.115,15.616l1.939-1.94a.25.25,0,0,0-.177-.426H6a1.25,1.25,0,0,1,0-2.5h7.879a.25.25,0,0,0,.177-.427l-1.939-1.94a1.249,1.249,0,0,1,1.767-1.767l4.5,4.5a1.249,1.249,0,0,1,0,1.767l-4.5,4.5a1.249,1.249,0,0,1-1.767-1.767Z" />
    </G>
  ),
  statsGraphCircle: (
    <G>
      <Path d="M19.354,14A3.08,3.08,0,0,1,16.5,12.433a.248.248,0,0,0-.444.062l-1.576,5.014a1.538,1.538,0,0,1-2.9-.055L9.256,8.8a.25.25,0,0,0-.485.008,14.607,14.607,0,0,1-1.2,3.754A2.809,2.809,0,0,1,4.874,14H.168a12,12,0,0,0,23.664,0Z" />
      <Path d="M4.874,12c.935,0,1.012,0,1.913-3.565.206-.813.448-1.771.755-2.895A1.479,1.479,0,0,1,9,4.5H9a1.476,1.476,0,0,1,1.454,1.047l2.4,8.928a.249.249,0,0,0,.479.01L14.679,10.2a1.479,1.479,0,0,1,1.348-.989,1.521,1.521,0,0,1,1.443.773c.1.194.2.383.285.565.581,1.171.75,1.448,1.6,1.448H24A12,12,0,0,0,0,12Z" />
    </G>
  ),
  circleAlternate: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,21.5A9.5,9.5,0,1,1,21.5,12,9.511,9.511,0,0,1,12,21.5Z" />
    </G>
  ),
  circle: (
    <G>
      <Circle cx="12" cy="12" r="12" />
    </G>
  ),
  circleHelp: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z" />
    </G>
  ),
  smartWatchCircleGraph: (
    <G>
      <Path d="M15.94,12.886l-.519-.866a.25.25,0,0,0-.446.033l-1.216,2.956a1.249,1.249,0,0,1-2.289-.016L9.606,9.613a.249.249,0,0,0-.452-.043L7.232,12.877a.752.752,0,0,1-.649.373h-2.7a.249.249,0,0,0-.245.295,8.5,8.5,0,0,0,16.718,0,.249.249,0,0,0-.053-.205.251.251,0,0,0-.193-.09h-3.53A.751.751,0,0,1,15.94,12.886Z" />
      <Path d="M8.423,7.845A1.267,1.267,0,0,1,9.6,7.255a1.25,1.25,0,0,1,1.035.753l1.788,5.161a.25.25,0,0,0,.467.013l1.092-2.653A1.249,1.249,0,0,1,16.2,10.4l.739,1.232a.25.25,0,0,0,.215.122h3.085a.25.25,0,0,0,.249-.265,8.5,8.5,0,0,0-16.968,0,.25.25,0,0,0,.249.265H6.008a.251.251,0,0,0,.216-.125Z" />
      <Path d="M7.379,3.051a.125.125,0,0,0,.135.014,9.98,9.98,0,0,1,8.972,0,.125.125,0,0,0,.177-.144l-.68-2.55A.5.5,0,0,0,15.5,0h-7a.5.5,0,0,0-.483.371l-.68,2.551A.125.125,0,0,0,7.379,3.051Z" />
      <Path d="M16.621,20.949a.125.125,0,0,0-.135-.015,9.972,9.972,0,0,1-8.972,0,.125.125,0,0,0-.177.144l.68,2.551A.5.5,0,0,0,8.5,24h7a.5.5,0,0,0,.483-.371l.68-2.551A.125.125,0,0,0,16.621,20.949Z" />
    </G>
  ),
  likeCircle: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm6.949,11.213,0,.007-1.125,3.755,0,.009c-.457,1.476-1.239,2.482-2.792,2.482-3.706,0-3.495.427-7.824-1.761-.19-.1-.378-.191-.567-.288a.252.252,0,0,1-.136-.223V10.607a.25.25,0,0,1,.25-.25H8.656a1.181,1.181,0,0,0,.964-.5L12.5,5.426a1.014,1.014,0,0,1,1.611-.054,1,1,0,0,1,.192.888l-.52,1.963a1.169,1.169,0,0,0,.206,1.016,1.183,1.183,0,0,0,.934.457H17.82a1.176,1.176,0,0,1,1.129,1.517Z" />
    </G>
  ),
  loveItCircle: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm5.113,12.666-4.932,5.145a.25.25,0,0,1-.361,0L6.887,12.665a3.026,3.026,0,1,1,4.279-4.279l.658.659A.254.254,0,0,0,12,9.119a.249.249,0,0,0,.176-.074l.658-.658a3.025,3.025,0,1,1,4.278,4.279Z" />
    </G>
  ),
  browserDotCom: (
    <G>
      <Circle cx="4.55" cy="15.5" r="1" />
      <Path d="M9.55,16.75a.75.75,0,0,0,0-1.5A1.25,1.25,0,0,1,8.3,14V13a1.251,1.251,0,0,1,1.25-1.25.75.75,0,0,0,0-1.5A2.753,2.753,0,0,0,6.8,13v1A2.752,2.752,0,0,0,9.55,16.75Z" />
      <Path d="M13.05,16.75A1.752,1.752,0,0,0,14.8,15V12a1.75,1.75,0,0,0-3.5,0v3A1.752,1.752,0,0,0,13.05,16.75ZM12.8,12a.25.25,0,0,1,.5,0v3c0,.275-.5.275-.5,0Z" />
      <Path d="M16.55,16.75A.75.75,0,0,0,17.3,16V13.915a.058.058,0,0,1,.042-.055.057.057,0,0,1,.064.026.781.781,0,0,0,1.287,0,.058.058,0,0,1,.065-.026.058.058,0,0,1,.042.055V16a.75.75,0,0,0,1.5,0V11a.751.751,0,0,0-1.394-.386l-.642,1.071a.249.249,0,0,1-.214.121.252.252,0,0,1-.215-.121l-.642-1.071A.75.75,0,0,0,15.8,11v5A.75.75,0,0,0,16.55,16.75Z" />
      <Path d="M24,4.75a3,3,0,0,0-3-3H3a3,3,0,0,0-3,3v14.5a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3Zm-14.346-1a.966.966,0,0,1,1.692,0,.969.969,0,0,1,.154.5.969.969,0,0,1-.154.5.966.966,0,0,1-1.692,0,.969.969,0,0,1-.154-.5A.969.969,0,0,1,9.654,3.75Zm-3.5,0a.966.966,0,0,1,1.692,0A.969.969,0,0,1,8,4.25a.969.969,0,0,1-.154.5.966.966,0,0,1-1.692,0A.969.969,0,0,1,6,4.25.969.969,0,0,1,6.154,3.75Zm-3.562.092A1,1,0,0,1,3.5,3.25a.985.985,0,0,1,.846.5.969.969,0,0,1,.154.5.969.969,0,0,1-.154.5.966.966,0,0,1-1.692,0,.969.969,0,0,1-.154-.5A.979.979,0,0,1,2.592,3.842ZM22,19.25a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V7a.25.25,0,0,1,.25-.25h19.5A.25.25,0,0,1,22,7Z" />
    </G>
  ),
  envelope: (
    <G>
      <Path d="M4,7H1A1,1,0,0,0,1,9H4A1,1,0,0,0,4,7Z" />
      <Path d="M3,11H1a1,1,0,0,0,0,2H3a1,1,0,0,0,0-2Z" />
      <Path d="M2.247,15H1a1,1,0,0,0,0,2H2.247a1,1,0,0,0,0-2Z" />
      <Path d="M23.934,7.375a.145.145,0,0,0-.152.029l-8.327,7.308a2.363,2.363,0,0,1-1.547.6,1.743,1.743,0,0,1-1.362-.6L6.416,7.4a.123.123,0,0,0-.143-.029.169.169,0,0,0-.1.125l-1.43,9A1.247,1.247,0,0,0,6,18H20.967a1.8,1.8,0,0,0,1.718-1.5L24,7.5A.115.115,0,0,0,23.934,7.375Z" />
      <Path d="M13.461,13.917a.931.931,0,0,0,1.322,0l8.275-7.264A.421.421,0,0,0,23.2,6.27c-.053-.288-.377-.27-.474-.27H7.894a.563.563,0,0,0-.556.27.355.355,0,0,0,.029.383Z" />
    </G>
  ),
  astronomyMoon: (
    <G>
      <Path d="M12.167,22.174A12.236,12.236,0,0,1,7,12,12.232,12.232,0,0,1,12.17,1.826,1.007,1.007,0,0,0,12.556.688,1.018,1.018,0,0,0,11.57,0a12.007,12.007,0,0,0,0,24H11.6a1,1,0,0,0,.566-1.826Z" />
      <Path d="M22.51,18c-2.4-.05-3.517-1.161-3.51-3.5h0a.536.536,0,0,0-.5-.5.5.5,0,0,0-.5.5c-.009,2.356-1.124,3.47-3.507,3.5a.5.5,0,0,0,.007,1h.006C16.9,19,17.979,20.081,18,22.5a.5.5,0,0,0,.49.5h.01a.5.5,0,0,0,.5-.475c.12-2.4,1.224-3.525,3.473-3.525a.261.261,0,0,0,.028,0,.5.5,0,0,0,.01-1Z" />
      <Path d="M15.983,11H16a.5.5,0,0,0,.011-1C14.615,9.971,14,9.354,14,8a.519.519,0,0,0-.5-.5A.5.5,0,0,0,13,8h0C13,9.363,12.376,9.98,10.993,10A.5.5,0,0,0,11,11h.006c1.385,0,1.982.6,1.994,2a.5.5,0,0,0,.49.5h.01a.5.5,0,0,0,.5-.475C14.069,11.625,14.681,11,15.983,11Z" />
      <Path d="M23.51,4C21.769,3.964,21,3.194,21,1.5a.5.5,0,0,0-.5-.5h0a.5.5,0,0,0-.5.5c-.006,1.708-.78,2.479-2.506,2.5A.5.5,0,0,0,17.5,5h.006c1.71,0,2.479.772,2.494,2.5a.5.5,0,0,0,.49.5h.01a.5.5,0,0,0,.5-.476C21.086,5.779,21.851,5,23.48,5h.02a.5.5,0,0,0,.01-1Z" />
    </G>
  ),
  moonIcon: (
    <G>
      <Path d="M19.687,14.934c-4.658,0.587-8.909-2.714-9.495-7.371C10.147,7.21,10.125,6.855,10.125,6.5c0-0.733,0.094-1.462,0.28-2.171 c0.141-0.534-0.178-1.081-0.712-1.222C9.569,3.075,9.441,3.066,9.314,3.082c-5.754,0.725-9.83,5.977-9.105,11.73 s5.977,9.83,11.73,9.105c4.248-0.535,7.745-3.596,8.839-7.735c0.141-0.534-0.178-1.081-0.712-1.222 c-0.123-0.033-0.252-0.041-0.379-0.025V14.934z M10.625,22c-4.694,0.001-8.501-3.804-8.501-8.499 C2.123,9.885,4.411,6.665,7.825,5.474c0.13-0.046,0.272,0.021,0.318,0.151C8.155,5.658,8.16,5.693,8.157,5.728 C8.138,5.985,8.129,6.243,8.129,6.5C8.136,12.052,12.458,16.642,18,16.982c0.137,0.008,0.242,0.125,0.235,0.262 c-0.002,0.035-0.011,0.069-0.027,0.1C16.758,20.199,13.828,21.999,10.625,22z M23.445,10.505l-0.264-0.038 c-0.659-0.097-1.176-0.614-1.273-1.273L21.87,8.929c-0.039-0.273-0.292-0.463-0.566-0.424c-0.22,0.031-0.393,0.204-0.424,0.424 l-0.038,0.265c-0.097,0.659-0.614,1.176-1.273,1.273l-0.264,0.038c-0.273,0.039-0.463,0.292-0.424,0.566 c0.031,0.22,0.204,0.393,0.424,0.424l0.264,0.038c0.659,0.097,1.176,0.614,1.273,1.273l0.038,0.265 c0.039,0.273,0.292,0.463,0.566,0.424c0.22-0.031,0.393-0.204,0.424-0.424l0.038-0.265c0.097-0.659,0.614-1.176,1.273-1.273 l0.264-0.038c0.273-0.039,0.463-0.292,0.424-0.566C23.838,10.709,23.665,10.536,23.445,10.505z M13.305,4.5l0.464,0.066 c1.317,0.193,2.352,1.228,2.544,2.546l0.067,0.463c0.039,0.273,0.292,0.463,0.566,0.424c0.22-0.031,0.393-0.204,0.424-0.424 l0.067-0.464c0.193-1.317,1.227-2.352,2.544-2.545L20.445,4.5c0.273-0.039,0.463-0.292,0.424-0.566 c-0.031-0.22-0.204-0.393-0.424-0.424l-0.464-0.066c-1.319-0.194-2.354-1.231-2.544-2.551L17.37,0.43 c-0.039-0.273-0.292-0.463-0.566-0.424c-0.22,0.031-0.393,0.204-0.424,0.424l-0.067,0.464c-0.193,1.317-1.227,2.352-2.544,2.545 l-0.464,0.066c-0.273,0.039-0.463,0.292-0.424,0.566c0.031,0.22,0.204,0.393,0.424,0.424L13.305,4.5z" />
    </G>
  ),
  powerButton: (
    <G>
      <Path d="M10.5,10.915a1.5,1.5,0,0,0,3,0V1.5a1.5,1.5,0,1,0-3,0Z" />
      <Path d="M1.2,11.533a10.917,10.917,0,0,0,18.52,9.272A10.825,10.825,0,0,0,22.8,11.527,11.021,11.021,0,0,0,17.067,3.4,1.5,1.5,0,1,0,15.63,6.03a8.048,8.048,0,0,1,4.2,5.925A7.914,7.914,0,0,1,6.4,18.684a7.854,7.854,0,0,1-2.237-6.726A8.042,8.042,0,0,1,8.36,6.036,1.5,1.5,0,1,0,6.919,3.405,11.015,11.015,0,0,0,1.2,11.533Z" />
    </G>
  ),
  syncCloud: (
    <G>
      <Path d="M24,11.378a5.765,5.765,0,0,0-5.216-5.952.249.249,0,0,1-.191-.12A7.684,7.684,0,0,0,4.493,7.6a.25.25,0,0,1-.227.2A4.644,4.644,0,0,0,.624,10.04,4.467,4.467,0,0,0,0,12.488a4.293,4.293,0,0,0,1.235,3.1,4.612,4.612,0,0,0,1.78,1.062.963.963,0,0,0,1.243-.86l0-.026A.986.986,0,0,0,3.6,14.731a2.58,2.58,0,0,1-.96-.572A2.374,2.374,0,0,1,2,12.374,2.588,2.588,0,0,1,4.586,9.786a2.626,2.626,0,0,1,.535.055,1,1,0,0,0,1.2-.963c.085-5.736,8.293-7.373,10.818-2.045a.974.974,0,0,0,.941.57,3.737,3.737,0,0,1,3,1.309,3.888,3.888,0,0,1,.9,2.812,3.426,3.426,0,0,1-1.473,2.667.973.973,0,0,0-.4.964l.01.059a.968.968,0,0,0,1.525.608A5.4,5.4,0,0,0,24,11.378Z" />
      <Path d="M6.014,21.464l.97-.97a.25.25,0,0,1,.358,0,6.086,6.086,0,0,0,10.21-2.2,1,1,0,0,0-1.893-.648,4.091,4.091,0,0,1-6.918,1.42.25.25,0,0,1,.009-.345l1.721-1.721a.5.5,0,0,0-.353-.854H5.661a.5.5,0,0,0-.5.5V21.11a.5.5,0,0,0,.308.462.47.47,0,0,0,.14.014A.485.485,0,0,0,6.014,21.464Z" />
      <Path d="M16.281,11.337a.25.25,0,0,1-.357,0,6.1,6.1,0,0,0-10.2,2.226,1,1,0,0,0,1.893.649,4.091,4.091,0,0,1,6.9-1.446.251.251,0,0,1-.006.347l-1.66,1.659a.5.5,0,0,0,.354.854h4.457a.5.5,0,0,0,.5-.5V10.665a.5.5,0,0,0-.854-.354Z" />
    </G>
  ),
  trophyStar: (
    <G>
      <Path d="M22,3H20.237l.2-1.35A1.5,1.5,0,0,0,18.947,0H5.053A1.5,1.5,0,0,0,3.94.494a1.528,1.528,0,0,0-.374,1.2l.2,1.3H2A2,2,0,0,0,0,5V8a5.019,5.019,0,0,0,2.518,4.342,1,1,0,0,0,.994-1.737A3.009,3.009,0,0,1,2,8V5H4.062l.632,4.209C4.868,10.367,6.352,15.5,12,15.5s7.131-5.131,7.306-6.291L19.937,5H22V8a3.009,3.009,0,0,1-1.512,2.605,1,1,0,0,0,.994,1.737A5.019,5.019,0,0,0,24,8V5A2,2,0,0,0,22,3Zm-6.922,7.274a.524.524,0,0,1-.746.656l-2.2-1.239a.251.251,0,0,0-.246,0l-2.2,1.239a.524.524,0,0,1-.746-.656l.893-2.051a.25.25,0,0,0-.053-.278L8.164,6.357A.489.489,0,0,1,8.508,5.5h1.841a.248.248,0,0,0,.226-.145l.962-2.07a.53.53,0,0,1,.942,0l.961,2.07a.25.25,0,0,0,.227.145h1.84a.489.489,0,0,1,.345.855L14.239,7.945a.249.249,0,0,0-.054.278Z" />
      <Path d="M10.784,16.912a.25.25,0,0,0-.2.06.247.247,0,0,0-.086.188v2.433C7.142,20.013,5,21.779,5,23a1,1,0,0,0,1,1H18a1,1,0,0,0,1-1c0-1.221-2.142-2.987-5.5-3.407V17.16a.249.249,0,0,0-.086-.188.254.254,0,0,0-.2-.06,8.445,8.445,0,0,1-2.432,0Z" />
    </G>
  ),
  taskListEdit: (
    <G>
      <Path d="M17,21a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H4.75a.25.25,0,0,1,.25.25V3.5A1.5,1.5,0,0,0,6.5,5h6A1.5,1.5,0,0,0,14,3.5V2.249A.25.25,0,0,1,14.25,2H16a1,1,0,0,1,1,1V8.314a.25.25,0,0,0,.427.177l1.5-1.5A.249.249,0,0,0,19,6.814V3a3,3,0,0,0-3-3H3A3,3,0,0,0,0,3V21a3,3,0,0,0,3,3H16a3,3,0,0,0,3-3V15.764a.25.25,0,0,0-.427-.177l-1.5,1.5a.249.249,0,0,0-.073.177Z" />
      <Path d="M8.469,6.663a.752.752,0,0,0-1.055.118l-1.3,1.627a.248.248,0,0,1-.181.094.251.251,0,0,1-.191-.073l-.71-.71A.75.75,0,1,0,3.97,8.78l1.5,1.5a.759.759,0,0,0,1.116-.061h0l2-2.5A.751.751,0,0,0,8.469,6.663Z" />
      <Path d="M8.469,12.163a.752.752,0,0,0-1.055.118l-1.3,1.627A.248.248,0,0,1,5.931,14a.251.251,0,0,1-.191-.073l-.71-.71A.75.75,0,1,0,3.97,14.28l1.5,1.5a.759.759,0,0,0,1.116-.061h0l2-2.5A.751.751,0,0,0,8.469,12.163Z" />
      <Path d="M14.25,8.5h-3.5a.75.75,0,0,0,0,1.5h3.5a.75.75,0,0,0,0-1.5Z" />
      <Path d="M23.586,8.453a1.414,1.414,0,1,0-2-2L11.573,16.466a.244.244,0,0,0-.06.1l-.665,2a.5.5,0,0,0,.632.632l2-.665a.244.244,0,0,0,.1-.06Z" />
    </G>
  ),
  targetCenter: (
    <G>
      <Path d="M22.962,3.808A.5.5,0,0,0,22.5,3.5H19.75a.249.249,0,0,1-.25-.25V.5a.5.5,0,0,0-.853-.354L16.233,2.56A2.484,2.484,0,0,0,15.5,4.328V6.012a.25.25,0,0,1-.117.212.49.49,0,0,0-.09.069l-5,5a1,1,0,1,0,1.414,1.414l5-5a.463.463,0,0,0,.07-.09.253.253,0,0,1,.212-.117h1.683a2.483,2.483,0,0,0,1.768-.733l2.414-2.414A.5.5,0,0,0,22.962,3.808Z" />
      <Path d="M11,8a1,1,0,0,0,0-2,6,6,0,1,0,6,6,1,1,0,0,0-2,0,4,4,0,1,1-4-4Z" />
      <Path d="M21,12a1,1,0,0,0-2,0,8,8,0,1,1-8-8,1,1,0,0,0,0-2A9.991,9.991,0,0,0,3.839,18.968a.25.25,0,0,1,.011.337L1.241,22.35a1,1,0,0,0,1.519,1.3l2.662-3.105a.249.249,0,0,1,.321-.05,9.94,9.94,0,0,0,10.514,0,.25.25,0,0,1,.322.05l2.662,3.105a1,1,0,0,0,1.519-1.3l-2.609-3.045a.249.249,0,0,1,.01-.336A9.962,9.962,0,0,0,21,12Z" />
    </G>
  ),
  circleCheck: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z" />
    </G>
  ),
  checkMark: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M23.146,5.4l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001c0,0-0.001,0.001-0.001,0.001L7.854,14.4 c-0.195,0.196-0.512,0.196-0.707,0.001c0,0-0.001-0.001-0.001-0.001l-2.792-2.8c-0.195-0.196-0.512-0.196-0.707-0.001 c0,0-0.001,0.001-0.001,0.001l-2.792,2.8c-0.195,0.195-0.195,0.512,0,0.707L7.146,21.4c0.195,0.196,0.512,0.196,0.707,0.001 c0,0,0.001-0.001,0.001-0.001L23.146,6.1C23.337,5.906,23.337,5.594,23.146,5.4z" />
    </G>
  ),
  circleUncheck: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,21.5A9.5,9.5,0,1,1,21.5,12,9.511,9.511,0,0,1,12,21.5Z" />
    </G>
  ),
  emailUnread: (
    <G>
      <Path d="M23.888,5.832a.182.182,0,0,0-.2.039l-9.747,9.745a2.75,2.75,0,0,1-3.888,0L.31,5.871a.18.18,0,0,0-.2-.039A.182.182,0,0,0,0,6V18a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V6A.181.181,0,0,0,23.888,5.832Z" />
      <Path d="M11.115,14.556a1.252,1.252,0,0,0,1.768,0L22.569,4.87a.5.5,0,0,0,.121-.511C22.58,4.03,22.274,4,22,4H2c-.275,0-.583.03-.691.359a.5.5,0,0,0,.121.511Z" />
    </G>
  ),
  singleManCircle: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22a9.958,9.958,0,0,1-6.554-2.456.5.5,0,0,1,.126-.834c.9-.4,1.947-.779,2.979-1.152.376-.137.751-.273,1.118-.409a.251.251,0,0,0,.163-.235V15.175a.249.249,0,0,0-.119-.212,3.074,3.074,0,0,1-1.3-2.613.25.25,0,0,0-.12-.2,1.253,1.253,0,0,1-.483-1.108,1.316,1.316,0,0,1,.41-1.056A.249.249,0,0,0,8.3,9.723c-.253-.909-.6-2.274.011-2.937a1.178,1.178,0,0,1,.965-.34.249.249,0,0,0,.228-.125c.5-.872,1.908-1.266,3.207-1.266,1.467,0,3.071.5,3.351,1.624a5.853,5.853,0,0,1-.36,3.045.25.25,0,0,0,.081.27,1.328,1.328,0,0,1,.4,1.049A1.252,1.252,0,0,1,15.7,12.15a.249.249,0,0,0-.121.2,3.072,3.072,0,0,1-1.305,2.614.249.249,0,0,0-.119.212v1.739a.248.248,0,0,0,.164.234c.407.151.812.3,1.209.441,1.078.39,2.071.749,2.9,1.113a.5.5,0,0,1,.128.835A9.958,9.958,0,0,1,12,22Z" />
    </G>
  ),
  dialPad: (
    <G>
      <Path d="M3.316,0A3.316,3.316,0,1,0,6.631,3.315,3.319,3.319,0,0,0,3.316,0Zm0,4.632A1.316,1.316,0,1,1,4.631,3.315,1.318,1.318,0,0,1,3.316,4.632Z" />
      <Path d="M11.964,0A3.316,3.316,0,1,0,15.28,3.315,3.319,3.319,0,0,0,11.964,0Zm0,4.632A1.316,1.316,0,1,1,13.28,3.315,1.319,1.319,0,0,1,11.964,4.632Z" />
      <Path d="M20.684,6.632a3.316,3.316,0,1,0-3.315-3.317A3.32,3.32,0,0,0,20.684,6.632Zm0-4.632a1.316,1.316,0,1,1-1.315,1.315A1.317,1.317,0,0,1,20.684,2Z" />
      <Path d="M3.316,8.685A3.315,3.315,0,1,0,6.631,12,3.319,3.319,0,0,0,3.316,8.685Zm0,4.63A1.315,1.315,0,1,1,4.631,12,1.316,1.316,0,0,1,3.316,13.315Z" />
      <Path d="M11.964,8.685A3.315,3.315,0,1,0,15.28,12,3.319,3.319,0,0,0,11.964,8.685Zm0,4.63A1.315,1.315,0,1,1,13.28,12,1.317,1.317,0,0,1,11.964,13.315Z" />
      <Path d="M20.684,8.685A3.315,3.315,0,1,0,24,12,3.319,3.319,0,0,0,20.684,8.685Zm0,4.63A1.315,1.315,0,1,1,22,12,1.316,1.316,0,0,1,20.684,13.315Z" />
      <Path d="M11.964,17.368a3.316,3.316,0,1,0,3.316,3.317A3.321,3.321,0,0,0,11.964,17.368Zm0,4.632a1.316,1.316,0,1,1,1.316-1.315A1.317,1.317,0,0,1,11.964,22Z" />
    </G>
  ),
  bedDoubleBold: (
    <G>
      <Path d="M22.5,11.75H1.5A1.5,1.5,0,0,0,0,13.25v4A1.5,1.5,0,0,0,1.125,18.7a.5.5,0,0,1,.375.483V20.25a1,1,0,0,0,2,0v-1a.5.5,0,0,1,.5-.5H20a.5.5,0,0,1,.5.5v1a1,1,0,0,0,2,0V19.186a.5.5,0,0,1,.375-.483A1.5,1.5,0,0,0,24,17.25v-4A1.5,1.5,0,0,0,22.5,11.75Z" />
      <Path d="M2.5,10.25a.5.5,0,0,0,.5.5H21a.5.5,0,0,0,.5-.5v-5A2.5,2.5,0,0,0,19,2.75H5a2.5,2.5,0,0,0-2.5,2.5Zm4-3h2A2.5,2.5,0,0,1,10.666,8.5a.5.5,0,0,1-.433.75H4.767a.5.5,0,0,1-.433-.75A2.5,2.5,0,0,1,6.5,7.25Zm9,0h2A2.5,2.5,0,0,1,19.666,8.5a.5.5,0,0,1-.433.75H13.767a.5.5,0,0,1-.433-.75A2.5,2.5,0,0,1,15.5,7.25Z" />
    </G>
  ),
  moodMoody: (
    <G>
      <Path d="M17.832,15.757a7.721,7.721,0,0,1,1.761-4.078,1.929,1.929,0,0,1,2.426-.609.249.249,0,0,0,.255-.019.253.253,0,0,0,.1-.233,10.761,10.761,0,0,0-9.547-9.459V1a1,1,0,0,0-2,0v.337a10.74,10.74,0,0,0,0,21.409V23a1,1,0,0,0,2,0v-.276a10.731,10.731,0,0,0,6.959-3.616.252.252,0,0,0-.072-.387A3.464,3.464,0,0,1,17.832,15.757Zm.93-5.335a2.555,2.555,0,0,1-2.06,1.03,2.59,2.59,0,0,1-2.061-1.03.75.75,0,1,1,1.2-.9,1.109,1.109,0,0,0,1.723,0,.75.75,0,1,1,1.2.9ZM2.967,12.042a8.754,8.754,0,0,1,7.581-8.665.25.25,0,0,1,.283.248V13.681a.252.252,0,0,0,.269.25A7.007,7.007,0,0,1,16.6,15.988a.75.75,0,0,1-1.06,1.061,5.538,5.538,0,0,0-4.478-1.61.25.25,0,0,0-.226.249v.661a5.324,5.324,0,0,1-3.013-1.512A1,1,0,0,0,6.4,16.251a7.359,7.359,0,0,0,4.211,2.082.249.249,0,0,1,.216.248v1.877a.25.25,0,0,1-.283.248A8.754,8.754,0,0,1,2.967,12.042Z" />
      <Path d="M9.222,10.573a1,1,0,1,0-1.6-1.2.851.851,0,0,1-1.323,0,1,1,0,0,0-1.6,1.2,2.828,2.828,0,0,0,4.522,0Z" />
      <Path d="M21.163,17.627a1.992,1.992,0,0,0,1.87-1.87,7.226,7.226,0,0,0-1.489-3.23.468.468,0,0,0-.762,0,7.226,7.226,0,0,0-1.489,3.23A1.992,1.992,0,0,0,21.163,17.627Z" />
    </G>
  ),
  smileyDisappointed: (
    <G>
      <Path d="M5.947,9.4l4-2a1,1,0,1,0-.894-1.79l-4,2A1,1,0,0,0,5.5,9.5.989.989,0,0,0,5.947,9.4Z" />
      <Path d="M18.947,7.605l-4-2a1,1,0,1,0-.894,1.79l4,2A.989.989,0,0,0,18.5,9.5a1,1,0,0,0,.448-1.895Z" />
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" />
      <Path d="M10.416,11.756a1,1,0,0,0-1.832-.8.909.909,0,0,1-1.668,0,1,1,0,0,0-1.832.8,2.91,2.91,0,0,0,5.332,0Z" />
      <Path d="M17.9,10.438a1,1,0,0,0-1.316.515.909.909,0,0,1-1.668,0,1,1,0,0,0-1.832.8,2.91,2.91,0,0,0,5.332,0A1,1,0,0,0,17.9,10.438Z" />
      <Path d="M12,15a6.053,6.053,0,0,0-4.789,2.386,1,1,0,0,0,1.578,1.228,4,4,0,0,1,6.422,0,1,1,0,0,0,1.578-1.228A6.053,6.053,0,0,0,12,15Z" />
    </G>
  ),
  smileyEyesOnlyBold: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z" />
      <Circle cx="8" cy="9" r="2" />
      <Circle cx="16" cy="9" r="2" />
    </G>
  ),

  // Play and stop buttons
  play: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm4.828,12.894L9.447,16.584h0A1,1,0,0,1,8,15.69V8.308a1,1,0,0,1,1.446-.895L16.829,11.1A1,1,0,0,1,16.828,12.893Z" />
    </G>
  ),
  stop: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0ZM12,21.55A9.551,9.551,0,1,1,21.551,12,9.562,9.562,0,0,1,12,21.55Z" />
      <Rect
        x="8.082"
        y="8.081"
        width="7.837"
        height="7.837"
        rx="0.98"
        ry="0.98"
      />
    </G>
  ),
  record: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm0,21.421A9.421,9.421,0,1,1,21.421,12,9.432,9.432,0,0,1,12,21.417Z" />
      <Circle cx="12" cy="11.996" r="4.381" />
    </G>
  ),
  pause: (
    <G>
      <Path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0ZM12,21.55A9.551,9.551,0,1,1,21.551,12,9.562,9.562,0,0,1,12,21.55Z" />
      <Rect
        x="7.851"
        y="7.142"
        width="3.401"
        height="10.776"
        rx="0.98"
        ry="0.98"
      />
      <Rect
        x="12.721"
        y="7.101"
        width="3.456"
        height="10.776"
        rx="0.98"
        ry="0.98"
      />
    </G>
  ),
  charging: (
    <G>
      <Path d="M22.206,4.536a1,1,0,0,0-1.414,0L18.886,6.442a.25.25,0,0,1-.354,0L16.057,3.967a.252.252,0,0,1,0-.354l1.906-1.9A1,1,0,1,0,16.549.294L14.643,2.2a.249.249,0,0,1-.353,0l-.463-.462a1.5,1.5,0,0,0-2.121,0L8.525,4.919A5.726,5.726,0,0,0,6.878,9.287a6.592,6.592,0,0,0,.711,2.688.251.251,0,0,1-.046.289L5.7,14.112a.5.5,0,0,0,0,.707l.221.222a.25.25,0,0,1,0,.355L2.379,18.843l0,0a3,3,0,0,0,0,4.241,3.074,3.074,0,0,0,4.242,0L9.8,19.905a.5.5,0,1,1,.708.707L8.827,22.294a1,1,0,0,0,1.414,1.414l1.684-1.683a2.5,2.5,0,0,0-3.537-3.534L5.206,21.673a1.025,1.025,0,0,1-1.414,0,1,1,0,0,1-.01-1.4l0,0,3.549-3.46a.251.251,0,0,1,.351,0l.132.132a.5.5,0,0,0,.707,0L10.369,15.1a.249.249,0,0,1,.289-.046,6.581,6.581,0,0,0,2.964.718,5.739,5.739,0,0,0,4.094-1.656L20.9,10.929a1.5,1.5,0,0,0,0-2.121l-.6-.6a.25.25,0,0,1,0-.354L22.206,5.95A1,1,0,0,0,22.206,4.536ZM13.827,8.808a2,2,0,0,1,0,2.828h0a2,2,0,1,1,0-2.828Z" />
    </G>
  ),
  circleAdd: (
    <G>
      <Path d="M12,23.75A11.75,11.75,0,1,0,.25,12,11.764,11.764,0,0,0,12,23.75Zm0-21A9.25,9.25,0,1,1,2.75,12,9.26,9.26,0,0,1,12,2.75Z" />
      <Path d="M6.273,13.25H10.5a.25.25,0,0,1,.25.25v4.227a1.25,1.25,0,0,0,2.5,0V13.5a.25.25,0,0,1,.25-.25h4.227a1.25,1.25,0,0,0,0-2.5H13.5a.25.25,0,0,1-.25-.25V6.272a1.25,1.25,0,1,0-2.5,0V10.5a.25.25,0,0,1-.25.25H6.273a1.25,1.25,0,0,0,0,2.5Z" />
    </G>
  ),
  circleSubtract: (
    <G>
      <Path d="M12,.25A11.75,11.75,0,1,0,23.75,12,11.763,11.763,0,0,0,12,.25Zm0,21A9.25,9.25,0,1,1,21.25,12,9.26,9.26,0,0,1,12,21.25Z" />
      <Path d="M6.273,10.75a1.25,1.25,0,0,0,0,2.5H17.727a1.25,1.25,0,0,0,0-2.5Z" />
    </G>
  ),
  checklist: (
    <G>
      <Path d="M21,0H3A3,3,0,0,0,0,3V21a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V3A3,3,0,0,0,21,0Zm1,21a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H21a1,1,0,0,1,1,1Z" />
      <Path d="M11.249,4.5a1.251,1.251,0,0,0-1.75.25L7.365,7.6l-.482-.481A1.25,1.25,0,0,0,5.116,8.883l1.5,1.5A1.262,1.262,0,0,0,8.5,10.249l3-4A1.25,1.25,0,0,0,11.249,4.5Z" />
      <Path d="M11.249,13.5a1.251,1.251,0,0,0-1.75.25L7.365,16.6l-.482-.481a1.25,1.25,0,1,0-1.767,1.768l1.5,1.5A1.265,1.265,0,0,0,8.5,19.249l3-4A1.25,1.25,0,0,0,11.249,13.5Z" />
      <Path d="M18.5,7.749H14a1.25,1.25,0,0,0,0,2.5h4.5a1.25,1.25,0,0,0,0-2.5Z" />
      <Path d="M18.5,15.749H14a1.25,1.25,0,0,0,0,2.5h4.5a1.25,1.25,0,1,0,0-2.5Z" />
    </G>
  ),
  crown: (
    <G>
      <Path d="M3.5,18.726a2.283,2.283,0,0,0,.5,4.5H20a2.19,2.19,0,0,0,1.678-.723,2.291,2.291,0,0,0,.56-1.527A2.151,2.151,0,0,0,20.5,18.726Z" />
      <Path d="M20.424,17.726a.5.5,0,0,0,.479-.359l1.817-6.175a.751.751,0,0,0-1.218-.773L18.484,13.1a1.413,1.413,0,0,1-1.077.346.885.885,0,0,1-.637-.358c-.369-.527-.189-.889.874-1.753a1.243,1.243,0,0,0,.294-1.6L13.081,1.349a1.3,1.3,0,0,0-2.164,0L6.062,9.738a1.241,1.241,0,0,0,.292,1.6c1.063.866,1.243,1.227.875,1.754a.889.889,0,0,1-.638.358A1.416,1.416,0,0,1,5.515,13.1L2.5,10.417a.751.751,0,0,0-1.219.774L3.1,17.367a.5.5,0,0,0,.48.359ZM10.6,9.177l1-1.335a.5.5,0,0,1,.8,0h0l1,1.334a.507.507,0,0,1,0,.6l-1,1.335a.52.52,0,0,1-.8,0l-1-1.334A.507.507,0,0,1,10.6,9.177Z" />
    </G>
  ),
  listAdd: (
    <G>
      <Path d="M6,2.5H19.5a1,1,0,0,0,0-2H6a1,1,0,0,0,0,2Z" />
      <Path d="M6,8.5H19.5a1,1,0,0,0,0-2H6a1,1,0,0,0,0,2Z" />
      <Path d="M10,13.5a1,1,0,0,0-1-1H6a1,1,0,1,0,0,2H9A1,1,0,0,0,10,13.5Z" />
      <Path d="M2.5.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" />
      <Path d="M2.5,6.5h-1a1,1,0,0,0,0,2h1a1,1,0,1,0,0-2Z" />
      <Path d="M2.5,12.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" />
      <Path d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z" />
    </G>
  ),
  listRemove: (
    <G>
      <Path d="M6,2.5H19.5a1,1,0,0,0,0-2H6a1,1,0,0,0,0,2Z" />
      <Path d="M6,8.5H19.5a1,1,0,0,0,0-2H6a1,1,0,0,0,0,2Z" />
      <Path d="M10,13.5a1,1,0,0,0-1-1H6a1,1,0,1,0,0,2H9A1,1,0,0,0,10,13.5Z" />
      <Path d="M2.5.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" />
      <Path d="M2.5,6.5h-1a1,1,0,0,0,0,2h1a1,1,0,1,0,0-2Z" />
      <Path d="M2.5,12.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" />
      <Path d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm3.25,6.5a.75.75,0,0,1-.75.75H15a.75.75,0,0,1,0-1.5h5A.75.75,0,0,1,20.75,17.5Z" />
    </G>
  ),
  chat: (
    <G>
      <Path d="M14.5,10.5h4.25a.25.25,0,0,0,.25-.25V5.5A4.505,4.505,0,0,0,14.5,1H4.5A4.505,4.505,0,0,0,0,5.5v4A4.5,4.5,0,0,0,4.5,14H5v3.5a.5.5,0,0,0,.876.329l3.276-3.743A.247.247,0,0,1,9.34,14h1a.249.249,0,0,0,.246-.206A3.991,3.991,0,0,1,14.5,10.5Z" />
      <Path d="M24,14.5A2.5,2.5,0,0,0,21.5,12h-7A2.5,2.5,0,0,0,12,14.5v3A2.5,2.5,0,0,0,14.5,20h1.793l2.853,2.854A.5.5,0,0,0,20,22.5V20h1.5A2.5,2.5,0,0,0,24,17.5Z" />
    </G>
  ),
  multiUsers: (
    <G>
      <Path d="M12,24c10.7,0,11.851-2.072,11.851-2.963,0-.641,0-2.143-7.041-2.763a.987.987,0,0,0-.173,1.967,26.87,26.87,0,0,1,3.771.557.247.247,0,0,1,0,.481A38.972,38.972,0,0,1,12,22.025a38.961,38.961,0,0,1-8.406-.746.247.247,0,0,1,0-.481,26.713,26.713,0,0,1,3.731-.553.987.987,0,1,0-.174-1.967c-7,.622-7,2.12-7,2.759C.149,23.711,8.437,24,12,24Z" />
      <Path d="M13.273,6.63a.25.25,0,0,1-.017-.466,3.21,3.21,0,1,0-2.512,0,.25.25,0,0,1-.017.466A3.957,3.957,0,0,0,8.05,10.37v2.963a.493.493,0,0,0,.493.493h.882a.246.246,0,0,1,.246.227l.356,4.259a.493.493,0,0,0,.492.452h2.962a.493.493,0,0,0,.492-.452l.356-4.259a.246.246,0,0,1,.246-.227h.882a.493.493,0,0,0,.493-.493V10.37A3.957,3.957,0,0,0,13.273,6.63Z" />
      <Path d="M4.779,7.612a.251.251,0,0,1-.022-.462,2.716,2.716,0,1,0-2.3,0,.251.251,0,0,1-.021.462A3.463,3.463,0,0,0,.149,10.863v1.483a.493.493,0,0,0,.494.493h.819a.248.248,0,0,1,.245.22l.42,3.786a.5.5,0,0,0,.491.44H4.593a.494.494,0,0,0,.491-.439l.421-3.787a.247.247,0,0,1,.245-.22h.818a.493.493,0,0,0,.494-.493V10.862A3.46,3.46,0,0,0,4.779,7.612Z" />
      <Path d="M21.567,7.612a.251.251,0,0,1-.021-.462,2.716,2.716,0,1,0-2.3,0,.251.251,0,0,1-.021.462,3.461,3.461,0,0,0-2.284,3.251v1.483a.493.493,0,0,0,.494.493h.818a.248.248,0,0,1,.246.22l.42,3.786a.5.5,0,0,0,.491.44h1.975a.494.494,0,0,0,.491-.439l.421-3.787a.247.247,0,0,1,.245-.22h.818a.493.493,0,0,0,.494-.493V10.862A3.46,3.46,0,0,0,21.567,7.612Z" />
      <Path d="M12,24c10.7,0,11.851-2.072,11.851-2.963,0-.641,0-2.143-7.041-2.763a.987.987,0,0,0-.173,1.967,26.87,26.87,0,0,1,3.771.557.247.247,0,0,1,0,.481A38.972,38.972,0,0,1,12,22.025a38.961,38.961,0,0,1-8.406-.746.247.247,0,0,1,0-.481,26.713,26.713,0,0,1,3.731-.553.987.987,0,1,0-.174-1.967c-7,.622-7,2.12-7,2.759C.149,23.711,8.437,24,12,24Z" />
      <Path d="M13.273,6.63a.25.25,0,0,1-.017-.466,3.21,3.21,0,1,0-2.512,0,.25.25,0,0,1-.017.466A3.957,3.957,0,0,0,8.05,10.37v2.963a.493.493,0,0,0,.493.493h.882a.246.246,0,0,1,.246.227l.356,4.259a.493.493,0,0,0,.492.452h2.962a.493.493,0,0,0,.492-.452l.356-4.259a.246.246,0,0,1,.246-.227h.882a.493.493,0,0,0,.493-.493V10.37A3.957,3.957,0,0,0,13.273,6.63Z" />
      <Path d="M4.779,7.612a.251.251,0,0,1-.022-.462,2.716,2.716,0,1,0-2.3,0,.251.251,0,0,1-.021.462A3.463,3.463,0,0,0,.149,10.863v1.483a.493.493,0,0,0,.494.493h.819a.248.248,0,0,1,.245.22l.42,3.786a.5.5,0,0,0,.491.44H4.593a.494.494,0,0,0,.491-.439l.421-3.787a.247.247,0,0,1,.245-.22h.818a.493.493,0,0,0,.494-.493V10.862A3.46,3.46,0,0,0,4.779,7.612Z" />
      <Path d="M21.567,7.612a.251.251,0,0,1-.021-.462,2.716,2.716,0,1,0-2.3,0,.251.251,0,0,1-.021.462,3.461,3.461,0,0,0-2.284,3.251v1.483a.493.493,0,0,0,.494.493h.818a.248.248,0,0,1,.246.22l.42,3.786a.5.5,0,0,0,.491.44h1.975a.494.494,0,0,0,.491-.439l.421-3.787a.247.247,0,0,1,.245-.22h.818a.493.493,0,0,0,.494-.493V10.862A3.46,3.46,0,0,0,21.567,7.612Z" />
    </G>
  ),
  yoga: (
    <G>
      <Circle cx="12" cy="3" r="3" />
      <Path d="M19.768,18.527a1.5,1.5,0,0,0-1.914-.915l-3.7,1.306a.25.25,0,0,0,0,.471l2.135.754a2.481,2.481,0,0,1,.923.577.5.5,0,0,0,.518.116l1.12-.4A1.5,1.5,0,0,0,19.768,18.527Z" />
      <Path d="M15.458,24a1.485,1.485,0,0,1-.5-.086L5.117,20.44a1.5,1.5,0,0,1,1-2.828l9.843,3.474a1.5,1.5,0,0,1-.5,2.914Z" />
      <Path d="M11.352,18.391a2,2,0,0,0,1.326,0l2.595-.916a.334.334,0,0,0,.223-.314.273.273,0,0,0-.244-.272,2.5,2.5,0,0,1-.456-4.881l.379-.132a.5.5,0,0,0,.335-.471v-.48a.424.424,0,0,1,.424-.423,1.08,1.08,0,0,1,.311,2.115l-1.162.349a1.5,1.5,0,0,0,.862,2.873l1.162-.349A4.08,4.08,0,0,0,15.935,7.5H8.065a4.08,4.08,0,0,0-1.173,7.988l1.162.349a1.5,1.5,0,0,0,.862-2.873l-1.162-.349A1.08,1.08,0,0,1,8.065,10.5a.424.424,0,0,1,.424.423v.48a.5.5,0,0,0,.335.471l.379.132a2.5,2.5,0,0,1-.456,4.881.273.273,0,0,0-.244.272.334.334,0,0,0,.223.314Z" />
    </G>
  ),
  daySunrise: (
    <G>
      <Path d="M7.456,15.4l.59-.786a.251.251,0,0,0,0-.3,5,5,0,1,1,7.913-.014.251.251,0,0,0,0,.3l.6.8a2.284,2.284,0,0,1,.254.432.251.251,0,0,0,.19.145.248.248,0,0,0,.225-.081,7,7,0,1,0-10.446.018.25.25,0,0,0,.415-.066,2.255,2.255,0,0,1,.26-.446Z" />
      <Path d="M1.744,12.25h1.5a1,1,0,0,0,0-2h-1.5a1,1,0,0,0,0,2Z" />
      <Path d="M5.1,5.77A1,1,0,1,0,6.514,4.355L5.453,3.3A1,1,0,0,0,4.039,4.709Z" />
      <Path d="M11.994,3.5a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V2.5A1,1,0,0,0,11.994,3.5Z" />
      <Path d="M4.039,19.2a1,1,0,0,0,1.414,0l1.061-1.06A1,1,0,1,0,5.1,16.73L4.039,17.791A1,1,0,0,0,4.039,19.2Z" />
      <Path d="M19.744,11.25a1,1,0,0,0,1,1h1.5a1,1,0,0,0,0-2h-1.5A1,1,0,0,0,19.744,11.25Z" />
      <Path d="M18.182,6.063a1,1,0,0,0,.707-.293l1.06-1.061A1,1,0,1,0,18.535,3.3l-1.06,1.06a1,1,0,0,0,.707,1.708Z" />
      <Path d="M18.889,16.73a1,1,0,0,0-1.414,1.415l1.06,1.06a1,1,0,0,0,1.414-1.414Z" />
      <Path d="M23.994,23a1,1,0,0,0-1-1H1.006a1,1,0,0,0,0,2H22.994A1,1,0,0,0,23.994,23Z" />
      <Path d="M13.006,17.75a.25.25,0,0,1,.25-.25h1.5a.749.749,0,0,0,.6-1.2L12.6,12.631a.772.772,0,0,0-1.2,0L8.655,16.3h0a.75.75,0,0,0,.6,1.2h1.5a.25.25,0,0,1,.25.25V20a1,1,0,0,0,2,0Z" />
    </G>
  ),
  sun: (
    <G>
      <Path d="M12,4.645c-4.062,0-7.355,3.293-7.355,7.355S7.938,19.355,12,19.355s7.355-3.293,7.355-7.355l0,0 C19.351,7.94,16.06,4.649,12,4.645z M12,17.355c-2.957,0-5.355-2.398-5.355-5.355S9.043,6.645,12,6.645S17.355,9.043,17.355,12v0 C17.352,14.956,14.956,17.352,12,17.355z M12,3.467c0.552,0,1-0.448,1-1V1c0-0.552-0.448-1-1-1s-1,0.448-1,1v1.467 C11,3.019,11.448,3.467,12,3.467z M4.552,5.966c0.384,0.397,1.017,0.408,1.414,0.025c0.397-0.384,0.408-1.017,0.025-1.414 C5.983,4.568,5.974,4.56,5.966,4.552L4.929,3.515C4.532,3.131,3.899,3.142,3.515,3.54c-0.374,0.388-0.374,1.002,0,1.389 L4.552,5.966z M2.467,11H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h1.467c0.552,0,1-0.448,1-1S3.019,11,2.467,11z M4.552,18.034 l-1.037,1.037c-0.397,0.384-0.408,1.017-0.025,1.414s1.017,0.408,1.414,0.025c0.008-0.008,0.017-0.016,0.025-0.025l1.037-1.037 c0.397-0.384,0.408-1.017,0.025-1.414c-0.384-0.397-1.017-0.408-1.414-0.025C4.568,18.017,4.56,18.026,4.552,18.034z M12,20.533 c-0.552,0-1,0.448-1,1V23c0,0.552,0.448,1,1,1s1-0.448,1-1v-1.467C13,20.981,12.552,20.533,12,20.533z M19.448,18.034 c-0.397-0.384-1.03-0.373-1.414,0.025c-0.374,0.388-0.374,1.002,0,1.389l1.037,1.037c0.397,0.384,1.03,0.373,1.414-0.025 c0.374-0.388,0.374-1.002,0-1.389L19.448,18.034z M23,11h-1.467c-0.552,0-1,0.448-1,1s0.448,1,1,1H23c0.552,0,1-0.448,1-1 S23.552,11,23,11z M18.741,6.259c0.265,0,0.52-0.105,0.707-0.293l1.037-1.037c0.384-0.397,0.373-1.03-0.025-1.414 c-0.388-0.374-1.002-0.374-1.389,0l-1.037,1.037c-0.39,0.391-0.39,1.024,0,1.414C18.222,6.154,18.476,6.259,18.741,6.259z" />
    </G>
  ),
  daySunset: (
    <G>
      <Path d="M7.865,14.478a.25.25,0,0,0,.049-.341,5,5,0,1,1,8.168-.011.249.249,0,0,0,.051.341,2.289,2.289,0,0,1,.792,1.183.25.25,0,0,0,.432.093,7,7,0,1,0-10.707.022.25.25,0,0,0,.432-.1,2.266,2.266,0,0,1,.783-1.191Z" />
      <Path d="M1.744,12.25h1.5a1,1,0,0,0,0-2h-1.5a1,1,0,0,0,0,2Z" />
      <Path d="M5.1,5.77A1,1,0,1,0,6.514,4.355L5.453,3.3A1,1,0,0,0,4.039,4.709Z" />
      <Path d="M11.994,3.5a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V2.5A1,1,0,0,0,11.994,3.5Z" />
      <Path d="M4.039,19.2a1,1,0,0,0,1.414,0l1.061-1.06A1,1,0,1,0,5.1,16.73L4.039,17.791A1,1,0,0,0,4.039,19.2Z" />
      <Path d="M19.744,11.25a1,1,0,0,0,1,1h1.5a1,1,0,0,0,0-2h-1.5A1,1,0,0,0,19.744,11.25Z" />
      <Path d="M18.182,6.063a1,1,0,0,0,.707-.293l1.06-1.061A1,1,0,1,0,18.535,3.3l-1.06,1.06a1,1,0,0,0,.707,1.708Z" />
      <Path d="M18.889,16.73a1,1,0,0,0-1.414,1.415l1.06,1.06a1,1,0,0,0,1.414-1.414Z" />
      <Path d="M11.408,20.369a.75.75,0,0,0,1.2,0l2.75-3.667a.749.749,0,0,0-.6-1.2h-1.5a.25.25,0,0,1-.25-.25V13a1,1,0,0,0-2,0v2.25a.25.25,0,0,1-.25.25h-1.5a.75.75,0,0,0-.6,1.2h0Z" />
      <Path d="M22.994,22H1.006a1,1,0,0,0,0,2H22.994a1,1,0,0,0,0-2Z" />
    </G>
  ),
  bedWindow: (
    <G>
      <Path d="M23.25,23.25v-3a1.5,1.5,0,0,0-1.5-1.5H.75v4.5" />
      <Path d="M0.75 21.75L23.25 21.75" />
      <Path d="M0.75 15.75H21.75V18.75H0.75z" />
      <Path d="M5.25,12.75h-3a1.5,1.5,0,0,0-1.5,1.5v1.5h6v-1.5A1.5,1.5,0,0,0,5.25,12.75Z" />
      <Path d="M0.75 16.5L0.75 9.75" />
      <Path d="M14.25 0.75H23.25V9.75H14.25z" />
      <Path d="M18.75 0.75L18.75 9.75" />
      <Path d="M14.25 5.25L23.25 5.25" />
    </G>
  ),
  tag: (
    <G>
      <Path d="M22.291,16.12a3,3,0,0,0,0-4.242l-11-11A2.978,2.978,0,0,0,9.169,0H2A2,2,0,0,0,0,2V9.17a2.978,2.978,0,0,0,.879,2.122l11,11a3,3,0,0,0,4.242,0Zm-1.414-1.414-6.172,6.172a1.025,1.025,0,0,1-1.414,0l-11-11A1,1,0,0,1,2,9.17V2.5A.5.5,0,0,1,2.5,2H9.169a1,1,0,0,1,.708.293l11,11a1,1,0,0,1,0,1.414Z" />
      <Path d="M4.498 5.999 A1.500 1.500 0 1 0 7.498 5.999 A1.500 1.500 0 1 0 4.498 5.999 Z" />
    </G>
  ),
  scale: (
    <G>
      <Path d="M24,10.356a1,1,0,0,0-.086-.388L20.827,3.022a.25.25,0,0,1,.136-.334l.654-.258A1,1,0,0,0,20.883.569L13.342,3.546A.25.25,0,0,1,13,3.314V2a1,1,0,0,0-2,0V4.3a.251.251,0,0,1-.158.233L1.883,8.069A1,1,0,0,0,2.25,10h.04a.25.25,0,0,1,.237.352L.087,15.843A1,1,0,0,0,0,16.231v.019a4.5,4.5,0,0,0,9,0,.745.745,0,0,0-.047-.26,1.007,1.007,0,0,0-.052-.145L5.842,8.936a.256.256,0,0,1,0-.2.251.251,0,0,1,.14-.137l4.679-1.847A.249.249,0,0,1,11,6.988V21.25a.25.25,0,0,1-.25.25H7.581a1,1,0,1,0,0,2h8.811a1,1,0,0,0,0-2H13.25a.25.25,0,0,1-.25-.25V6a.25.25,0,0,1,.158-.232L17.2,4.175a.249.249,0,0,1,.32.333L15.1,9.97a1.007,1.007,0,0,0-.052.145.745.745,0,0,0-.047.26,4.5,4.5,0,0,0,9,0ZM2.813,15.5a.251.251,0,0,1-.228-.352l1.684-3.792a.25.25,0,0,1,.457,0l1.68,3.792a.251.251,0,0,1-.228.352ZM17.822,9.625a.251.251,0,0,1-.228-.352l1.68-3.792a.25.25,0,0,1,.457,0l1.684,3.792a.251.251,0,0,1-.228.352Z" />
    </G>
  ),
  phoneTouch: (
    <G>
      <Path d="M6.251,19.5H2.489c-0.276,0-0.5-0.224-0.5-0.5V3.5c0-0.276,0.224-0.5,0.5-0.5h11c0.276,0,0.5,0.224,0.5,0.5v3.02 c0.001,0.084,0.043,0.162,0.113,0.209c0.535,0.352,1.023,0.77,1.452,1.245c0.093,0.102,0.251,0.11,0.353,0.017 c0.052-0.047,0.082-0.114,0.082-0.184V3c0-1.657-1.343-3-3-3h-10c-1.657,0-3,1.343-3,3v18c0,1.657,1.343,3,3,3h6.75 c0.138,0,0.25-0.112,0.25-0.25v-3c0-0.135-0.107-0.246-0.242-0.25C8.517,20.46,7.316,20.117,6.251,19.5z M8.788,18.881 c0.536,0.132,1.078-0.196,1.21-0.732c0.132-0.536-0.196-1.078-0.732-1.21c-0.026-0.006-0.051-0.012-0.077-0.016 C7.024,16.478,5.63,14.364,6.075,12.2c0.445-2.164,2.559-3.558,4.723-3.113c1.272,0.261,2.338,1.124,2.859,2.313 c0.205,0.513,0.787,0.762,1.3,0.556c0.513-0.205,0.762-0.787,0.556-1.3c-0.008-0.019-0.016-0.038-0.025-0.056 c-1.329-3.036-4.867-4.419-7.902-3.091s-4.419,4.867-3.091,7.902c0.782,1.786,2.383,3.081,4.293,3.472L8.788,18.881z M15.7,14.233 l-0.295,0.295c-0.097,0.097-0.255,0.098-0.352,0.001c0,0-0.001-0.001-0.001-0.001l-2.3-2.3c-0.979-0.974-2.562-0.969-3.536,0.01 C8.751,12.706,8.489,13.339,8.489,14c-0.002,0.663,0.262,1.3,0.733,1.767l3.428,3.429c-1.219,0.243-2.01,1.428-1.766,2.647 c0.195,0.976,1.008,1.709,1.999,1.8L16.745,24c0.549,0.063,1.045-0.33,1.108-0.879c0.063-0.549-0.33-1.045-0.879-1.108 c-0.015-0.002-0.03-0.003-0.045-0.004l-3.863-0.356c-0.136-0.014-0.236-0.135-0.225-0.271c0.003-0.13,0.11-0.233,0.24-0.23 c0.01,0,0.021,0.001,0.031,0.003c0.62-0.017,1.239-0.069,1.854-0.155c0.55-0.05,0.955-0.537,0.905-1.087 c-0.021-0.231-0.122-0.448-0.286-0.613l-4.949-4.95c-0.192-0.199-0.186-0.515,0.012-0.707c0.194-0.187,0.501-0.187,0.695,0 l3.181,3.182c0.391,0.39,1.024,0.39,1.414,0l1.179-1.178c0.923-0.882,2.377-0.882,3.3,0l1.883,1.886l0,0 c0.391,0.39,1.024,0.39,1.415,0c0.39-0.391,0.39-1.024-0.001-1.415l-1.887-1.885c-1.687-1.692-4.426-1.697-6.118-0.01 c-0.003,0.003-0.007,0.007-0.01,0.01H15.7z" />
    </G>
  ),
  compass: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M24,12c0-6.627-5.373-12-12-12S0,5.373,0,12s5.373,12,12,12C18.624,23.993,23.993,18.624,24,12z M2.08,13.545 c-0.041-0.267,0.142-0.518,0.409-0.559c0.025-0.004,0.05-0.006,0.075-0.006h1.354c0.541,0,0.98-0.439,0.98-0.98 c0-0.541-0.439-0.98-0.98-0.98H2.564c-0.271,0-0.49-0.22-0.49-0.49c0-0.025,0.002-0.05,0.006-0.075 C2.327,8.872,2.952,7.371,3.9,6.08c0.16-0.218,0.466-0.266,0.685-0.106c0.02,0.015,0.039,0.031,0.057,0.049l0.955,0.955 c0.36,0.404,0.98,0.44,1.384,0.079c0.404-0.36,0.44-0.98,0.079-1.384C7.034,5.645,7.007,5.618,6.978,5.592L6.022,4.638 C5.921,4.536,5.869,4.396,5.88,4.253C5.891,4.11,5.964,3.98,6.08,3.896c1.291-0.948,2.792-1.571,4.375-1.816 c0.267-0.041,0.518,0.142,0.559,0.409c0.004,0.025,0.006,0.05,0.006,0.075v1.354c0,0.541,0.439,0.98,0.98,0.98 c0.541,0,0.98-0.439,0.98-0.98c0,0,0,0,0,0V2.564c0-0.271,0.22-0.49,0.49-0.49c0.025,0,0.05,0.002,0.075,0.006 c4.313,0.678,7.697,4.062,8.375,8.375c0.041,0.267-0.142,0.518-0.409,0.559c-0.025,0.004-0.05,0.006-0.075,0.006h-1.354 c-0.541,0-0.98,0.439-0.98,0.98c0,0.541,0.439,0.98,0.98,0.98h1.354c0.271,0,0.49,0.22,0.49,0.49c0,0.025-0.002,0.05-0.006,0.075 c-0.246,1.583-0.868,3.083-1.815,4.375c-0.16,0.218-0.466,0.266-0.685,0.106c-0.02-0.015-0.039-0.031-0.057-0.049l-0.955-0.955 c-0.383-0.383-1.003-0.383-1.386,0s-0.383,1.003,0,1.386l0.956,0.954c0.101,0.102,0.153,0.242,0.142,0.385 c-0.011,0.143-0.084,0.273-0.2,0.357c-1.291,0.948-2.792,1.571-4.375,1.816c-0.267,0.041-0.518-0.142-0.559-0.409 c-0.004-0.025-0.006-0.05-0.006-0.075v-1.354c0-0.541-0.439-0.98-0.98-0.98c-0.541,0-0.98,0.439-0.98,0.98v1.354 c0,0.271-0.22,0.49-0.49,0.49c-0.025,0-0.05-0.002-0.075-0.006C6.142,21.242,2.758,17.858,2.08,13.545z M17.739,6.3 c-0.266-0.282-0.673-0.38-1.039-0.251L9.953,8.477c-0.688,0.246-1.23,0.787-1.476,1.475L6.049,16.7 c-0.184,0.509,0.08,1.071,0.589,1.255c0.231,0.083,0.485,0.077,0.711-0.018l6.542-2.726c0.598-0.247,1.072-0.722,1.32-1.319 l2.725-6.542C18.084,6.992,18.007,6.58,17.739,6.3z M12,13.714c-0.947,0-1.714-0.767-1.714-1.714c0-0.947,0.767-1.714,1.714-1.714 c0.947,0,1.714,0.767,1.714,1.714l0,0C13.713,12.946,12.946,13.713,12,13.714z" />
    </G>
  ),
  arrowLeft: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M4.5,12c-0.001-0.662,0.283-1.292,0.78-1.729L16.432,0.46c0.781-0.656,1.946-0.554,2.602,0.228 c0.634,0.756,0.562,1.877-0.163,2.545l-9.752,8.579c-0.104,0.091-0.114,0.249-0.023,0.353c0.007,0.008,0.015,0.016,0.023,0.023 l9.752,8.579c0.781,0.656,0.883,1.821,0.228,2.602c-0.656,0.781-1.821,0.883-2.602,0.228c-0.022-0.018-0.043-0.037-0.065-0.057 L5.284,13.732C4.786,13.294,4.501,12.663,4.5,12z" />
    </G>
  ),
  arrowLineLeft: (
    <G>
      <Path d="M22.548,10.561H5.437c-0.139-0.001-0.25-0.115-0.249-0.253c0.001-0.071,0.031-0.138,0.084-0.185l8.637-7.6 c0.579-0.546,0.605-1.457,0.06-2.036c-0.519-0.55-1.375-0.605-1.96-0.126L0.828,10.2c-0.994,0.877-1.089,2.393-0.213,3.387 c0.066,0.075,0.137,0.146,0.213,0.213l11.179,9.837c0.619,0.5,1.525,0.403,2.025-0.215c0.47-0.582,0.416-1.428-0.125-1.946 l-8.637-7.6c-0.103-0.092-0.112-0.251-0.02-0.354c0.047-0.053,0.114-0.083,0.185-0.084h17.113c0.795-0.021,1.423-0.682,1.402-1.477 c-0.02-0.766-0.636-1.381-1.402-1.402V10.561z" />
    </G>
  ),
  arrowRight: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M19.5,12c0.001,0.662-0.283,1.292-0.78,1.729L7.568,23.54c-0.781,0.656-1.946,0.554-2.602-0.228 c-0.634-0.756-0.562-1.877,0.163-2.545l9.752-8.579c0.104-0.091,0.114-0.249,0.023-0.353c-0.007-0.008-0.015-0.016-0.023-0.023 L5.129,3.233c-0.75-0.691-0.798-1.86-0.106-2.61c0.669-0.726,1.79-0.797,2.545-0.163l11.148,9.808 C19.214,10.706,19.499,11.337,19.5,12z" />
    </G>
  ),
  refresh: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M10.664,20.073c-0.676-0.14-1.337,0.294-1.477,0.97c-0.14,0.676,0.294,1.337,0.97,1.477 c5.809,1.198,11.489-2.539,12.687-8.348c1.198-5.809-2.539-11.489-8.348-12.687S3.007,4.024,1.809,9.833 C1.376,11.934,1.581,14.117,2.4,16.1c0.045,0.107,0.011,0.232-0.084,0.3l-1,0.726c-0.447,0.324-0.546,0.95-0.222,1.397 c0.145,0.199,0.358,0.338,0.599,0.39l3.946,0.849c0.069,0.014,0.139,0.022,0.21,0.022c0.471,0,0.879-0.329,0.978-0.79l0.945-4.4 c0.116-0.54-0.227-1.072-0.767-1.188c-0.278-0.06-0.568,0.001-0.798,0.168l-1.361,0.989c-0.112,0.081-0.268,0.057-0.349-0.055 c-0.016-0.022-0.029-0.047-0.037-0.073C3.113,10.079,5.552,5.457,9.908,4.11s8.978,1.092,10.325,5.448 c1.347,4.356-1.092,8.978-5.448,10.325c-1.335,0.413-2.753,0.48-4.12,0.195L10.664,20.073z" />
    </G>
  ),
  arrowCircleRight: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M12,24c6.627,0,12-5.373,12-12S18.627,0,12,0S0,5.373,0,12C0.007,18.624,5.376,23.993,12,24z M12,22 C6.477,22,2,17.523,2,12S6.477,2,12,2s10,4.477,10,10C21.993,17.52,17.52,21.993,12,22z M12.115,15.616l1.939-1.94 c0.097-0.098,0.097-0.256-0.002-0.354c-0.047-0.046-0.11-0.072-0.175-0.072H6c-0.69,0-1.25-0.56-1.25-1.25S5.31,10.75,6,10.75 h7.879c0.138,0,0.25-0.111,0.25-0.25c0-0.067-0.026-0.13-0.073-0.177l-1.939-1.94c-0.488-0.488-0.488-1.279,0-1.767 s1.279-0.488,1.767,0l4.5,4.5c0.488,0.488,0.488,1.278,0.001,1.766c0,0,0,0-0.001,0.001l-4.5,4.5c-0.488,0.488-1.279,0.488-1.767,0 s-0.488-1.279,0-1.767L12.115,15.616z" />
    </G>
  ),
  customerSupport: (
    <G>
      <Path d="M24,14c0.001-1.906-1.202-3.606-3-4.239V9c0-4.971-4.029-9-9-9S3,4.029,3,9v0.761c-2.343,0.83-3.568,3.402-2.738,5.745 C0.715,16.785,1.721,17.791,3,18.244c0.781,0.276,1.638-0.133,1.914-0.914C4.971,17.169,5,17,5,16.83V9c0-3.866,3.134-7,7-7 s7,3.134,7,7v7.83c0.004,0.421,0.186,0.82,0.5,1.1v0.57c0,1.474-1.291,2-2.5,2h-1.778c-0.552-0.957-1.775-1.284-2.732-0.732 c-0.957,0.552-1.284,1.775-0.732,2.732c0.552,0.957,1.775,1.284,2.732,0.732c0.304-0.176,0.557-0.428,0.732-0.732H17 c2.65,0,4.5-1.645,4.5-4v-0.478C23.028,17.264,23.997,15.706,24,14z M15.144,14.045c0.154-0.236,0.418-0.378,0.7-0.377 c0.161,0,0.319,0.046,0.454,0.135c0.386,0.251,0.495,0.767,0.244,1.152c0,0.001-0.001,0.001-0.001,0.002 c-1.633,2.507-4.99,3.216-7.497,1.583c-0.632-0.412-1.171-0.951-1.583-1.583c-0.252-0.387-0.143-0.904,0.244-1.156 c0.387-0.252,0.904-0.143,1.156,0.244c1.129,1.736,3.452,2.229,5.188,1.1c0.44-0.286,0.814-0.66,1.1-1.1L15.144,14.045z M8.667,7.834c0.921,0,1.667,0.746,1.667,1.667s-0.746,1.667-1.667,1.667S7,10.422,7,9.501S7.746,7.834,8.667,7.834z M15.333,7.834 C16.254,7.834,17,8.58,17,9.501s-0.746,1.667-1.667,1.667c-0.921,0-1.667-0.746-1.667-1.667S14.412,7.834,15.333,7.834z" />
    </G>
  ),
  smileyThrilled: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12C23.993,5.376,18.624,0.007,12,0z M12,22C6.477,22,2,17.523,2,12 S6.477,2,12,2s10,4.477,10,10C21.994,17.52,17.52,21.994,12,22z M9.084,9.9c0.159,0.365,0.519,0.6,0.917,0.6 c0.138,0.001,0.274-0.028,0.4-0.084c0.505-0.221,0.736-0.81,0.515-1.316C10.143,7.328,8.08,6.519,6.308,7.292 C5.499,7.645,4.853,8.291,4.5,9.1c-0.236,0.499-0.024,1.095,0.476,1.332s1.095,0.024,1.332-0.476 C6.316,9.938,6.324,9.919,6.332,9.9c0.33-0.76,1.214-1.108,1.974-0.777C8.654,9.274,8.932,9.552,9.084,9.9L9.084,9.9z M19.5,9.1 c-0.774-1.771-2.837-2.58-4.608-1.807c-0.808,0.353-1.454,0.998-1.807,1.807c-0.236,0.499-0.024,1.095,0.476,1.332 c0.499,0.236,1.095,0.024,1.332-0.476c0.009-0.019,0.017-0.037,0.025-0.056c0.33-0.76,1.214-1.108,1.974-0.777 c0.348,0.151,0.626,0.429,0.777,0.777c0.159,0.365,0.519,0.6,0.917,0.6c0.138,0.001,0.274-0.028,0.4-0.084 C19.49,10.195,19.721,9.606,19.5,9.1z M16.561,14.5H7.439c-0.164,0.005-0.311,0.101-0.38,0.25c-0.079,0.157-0.079,0.343,0,0.5 C7.957,17.182,9.87,18.441,12,18.5c2.13-0.06,4.043-1.318,4.941-3.25c0.079-0.157,0.079-0.343,0-0.5 C16.872,14.601,16.725,14.504,16.561,14.5z" />
    </G>
  ),
  receipt: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M18.5,0.063h-13c-0.828,0-1.5,0.672-1.5,1.5v20.913c0.001,0.552,0.449,1,1.001,0.999c0.238,0,0.468-0.085,0.649-0.24 l2.218-1.9c0.089-0.076,0.219-0.08,0.313-0.01l3.219,2.413c0.356,0.265,0.844,0.265,1.2,0l3.219-2.414 c0.094-0.07,0.224-0.066,0.313,0.01l2.218,1.9c0.42,0.359,1.051,0.31,1.41-0.11c0.154-0.181,0.24-0.41,0.24-0.648V1.563 C20,0.735,19.328,0.063,18.5,0.063z M16.5,12.563c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75 S16.914,12.563,16.5,12.563z M17.25,15.813c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75 S17.25,15.399,17.25,15.813z M16.5,8.313c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75l0,0 C17.25,7.977,16.914,8.313,16.5,8.313z M7,12.563c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h6 c0.414,0,0.75,0.336,0.75,0.75s-0.336,0.75-0.75,0.75H7z M12.25,15.813c0,0.414-0.336,0.75-0.75,0.75H7 c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h4.5C11.914,15.063,12.25,15.399,12.25,15.813z M6.25,7.563 c0-0.414,0.336-0.75,0.75-0.75h5.5c0.414,0,0.75,0.336,0.749,0.751c0,0.414-0.336,0.749-0.749,0.749H7 C6.586,8.313,6.25,7.977,6.25,7.563z" />
    </G>
  ),
  facebook: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M19.55,14.56c-0.031,0.252-0.246,0.442-0.5,0.44H17c-0.276,0-0.5,0.224-0.5,0.5v8c0,0.276,0.224,0.5,0.5,0.5h6 c0.552,0,1-0.448,1-1V1c0-0.552-0.448-1-1-1H1C0.448,0,0,0.448,0,1v22c0,0.552,0.448,1,1,1h11c0.276,0,0.5-0.224,0.5-0.5v-8 c0-0.276-0.224-0.5-0.5-0.5h-2c-0.276,0-0.5-0.224-0.5-0.5v-3c0-0.276,0.224-0.5,0.5-0.5h2c0.276,0,0.5-0.224,0.5-0.5V9.19 c0-3.142,2.548-5.69,5.69-5.69h1.31C19.776,3.5,20,3.724,20,4v3c0,0.276-0.224,0.5-0.5,0.5h-1.31c-0.933,0-1.69,0.757-1.69,1.69 l0,0v1.31c0,0.276,0.224,0.5,0.5,0.5h2.43c0.276-0.002,0.502,0.22,0.504,0.496c0,0.021-0.001,0.043-0.004,0.064L19.55,14.56z" />
    </G>
  ),
  instagram: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M17.5,0h-11C2.912,0.006,0.006,2.912,0,6.5v11c0.006,3.588,2.912,6.494,6.5,6.5h11c3.588-0.006,6.494-2.912,6.5-6.5v-11 C23.994,2.912,21.088,0.006,17.5,0z M12,17.5c-3.038,0-5.5-2.462-5.5-5.5S8.962,6.5,12,6.5s5.5,2.462,5.5,5.5S15.038,17.5,12,17.5z M18.5,6.5C17.672,6.5,17,5.828,17,5s0.672-1.5,1.5-1.5S20,4.172,20,5S19.328,6.5,18.5,6.5z" />
    </G>
  ),
  twitter: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M23.32,6.44c0.212-0.177,0.241-0.492,0.065-0.704c-0.068-0.082-0.161-0.14-0.265-0.166l-0.79-0.2 c-0.268-0.067-0.431-0.339-0.364-0.606C21.974,4.731,21.986,4.7,22,4.67l0.44-0.89c0.12-0.249,0.015-0.548-0.233-0.668 C22.099,3.06,21.976,3.049,21.86,3.08l-2,0.56c-0.151,0.044-0.314,0.014-0.44-0.08c-0.865-0.649-1.918-1-3-1c-2.761,0-5,2.239-5,5 l0,0v0.36c0.001,0.127-0.094,0.235-0.22,0.25C8.39,8.5,5.7,7.07,2.8,3.73c-0.128-0.142-0.325-0.2-0.51-0.15 C2.124,3.656,2.013,3.817,2,4C1.599,5.645,1.761,7.377,2.46,8.92c0.062,0.123,0.013,0.274-0.11,0.336 C2.303,9.279,2.251,9.288,2.2,9.28L1.08,9.06C0.807,9.016,0.551,9.202,0.507,9.474C0.498,9.533,0.499,9.592,0.51,9.65 c0.175,1.555,1.047,2.945,2.37,3.78c0.124,0.06,0.176,0.21,0.116,0.334c-0.025,0.051-0.065,0.092-0.116,0.116l-0.53,0.21 c-0.256,0.103-0.381,0.394-0.278,0.65c0.005,0.014,0.011,0.027,0.018,0.04c0.595,1.302,1.791,2.229,3.2,2.48 c0.13,0.047,0.197,0.191,0.15,0.32c-0.025,0.07-0.08,0.124-0.15,0.15C3.93,18.292,2.471,18.575,1,18.56 c-0.276-0.055-0.545,0.124-0.6,0.4s0.124,0.545,0.4,0.6l0,0c2.548,1.208,5.321,1.866,8.14,1.93c2.479,0.038,4.915-0.658,7-2 c3.484-2.326,5.571-6.241,5.56-10.43V8.19c0.001-0.147,0.067-0.286,0.18-0.38L23.32,6.44z" />
    </G>
  ),
  handshake: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M23,6.393h-2.062c-0.312,0.002-0.62,0.074-0.9,0.211c-0.063,0.03-0.135,0.033-0.2,0.007l-4.3-1.645l0,0 c-0.842-0.301-1.77-0.249-2.574,0.143l0,0l-2.123,1.03C10.764,6.177,10.674,6.174,10.6,6.13c-0.801-0.476-1.778-0.55-2.641-0.2l0,0 L4.966,7.206c-0.1,0.043-0.217,0.016-0.288-0.067C4.275,6.666,3.684,6.393,3.062,6.393H1c-0.414,0-0.75,0.336-0.75,0.75v9.5 c0,0.414,0.336,0.75,0.75,0.75h2.062c0.688,0,1.332-0.334,1.73-0.895c0.046-0.064,0.121-0.103,0.2-0.105h0.931 c0.056,0,0.111,0.019,0.155,0.053l2.794,2.2l0.022,0.019c0.706,0.704,1.831,0.758,2.6,0.123l3.057-2.508 c0.032-0.026,0.07-0.044,0.11-0.052l3.895-0.779c0.066-0.013,0.134,0.001,0.19,0.039c0.055,0.038,0.093,0.097,0.105,0.163 c0.18,1.01,1.059,1.744,2.085,1.743H23c0.414,0,0.75-0.336,0.75-0.75v-9.5C23.751,6.73,23.415,6.394,23,6.393 C23.001,6.393,23,6.393,23,6.393z M14.784,13.506l-1.133,0.947l-0.023,0.017c-0.044,0.03-0.085,0.063-0.123,0.1l-0.009,0.008 l-3.038,2.541c-0.081,0.065-0.195,0.065-0.276,0l-3.2-2.521c-0.177-0.138-0.395-0.213-0.619-0.213H5.438 c-0.138,0.001-0.249-0.11-0.25-0.248c0-0.001,0-0.001,0-0.002V9.45c0-0.1,0.06-0.19,0.152-0.229l3.378-1.439h0.006 C8.84,7.736,8.97,7.793,9.016,7.909c0.018,0.045,0.02,0.094,0.008,0.14c-0.143,0.544-0.108,1.12,0.1,1.643 c0.259,0.655,0.768,1.181,1.415,1.462c0.331,0.143,0.688,0.217,1.049,0.216c0.34,0,0.677-0.064,0.993-0.189l0,0l0.158-0.065 c0.097-0.04,0.209-0.014,0.28,0.064l1.788,1.971c0.093,0.101,0.087,0.259-0.015,0.352c-0.003,0.003-0.006,0.006-0.009,0.008 L14.784,13.506z M18.812,13.153c0,0.119-0.084,0.221-0.2,0.245L17.3,13.66c-0.075,0.015-0.152-0.004-0.21-0.054 c-0.059-0.049-0.092-0.123-0.089-0.2c0.01-0.473-0.146-0.935-0.441-1.306l-0.013-0.016l-2.636-2.9 c-0.293-0.295-0.729-0.394-1.12-0.254l0,0l-0.958,0.393l0,0c-0.334,0.132-0.711-0.031-0.844-0.365c0,0,0-0.001,0-0.001 c-0.125-0.308,0.005-0.66,0.3-0.812l0,0L13.845,6.9l0,0c0.309-0.149,0.664-0.171,0.99-0.063l0,0l3.84,1.47 c0.079,0.03,0.131,0.106,0.13,0.19L18.812,13.153z" />
    </G>
  ),
  addRatingIcon: (
    <G>
      <Path d="M11.52,0 C17.87904,0.00672 23.03328,5.16096 23.04,11.52 C23.04,12.3654141 22.9489142,13.1895697 22.7760218,13.9831878 C23.4894147,14.8726939 23.9359299,15.9865307 23.9936311,17.2022857 L24,17.46528 L24,17.46528 L23.9959743,17.6791703 C23.8835913,20.6597031 21.4323795,23.04096 18.42432,23.04096 C17.4032282,23.04096 16.4463007,22.7665734 15.6232383,22.287501 C14.3491585,22.7736553 12.9656602,23.04 11.52,23.04 C5.15808,23.04 0,17.88192 0,11.52 C0,5.15808 5.15808,0 11.52,0 Z M11.52,1.92 C6.21792,1.92 1.92,6.21792 1.92,11.52 C1.92,16.82208 6.21792,21.12 11.52,21.12 C12.3633777,21.1190833 13.1813207,21.009522 13.960586,20.8045592 C13.2614836,19.8737286 12.84864,18.7177752 12.84864,17.46528 C12.84864,14.3856 15.34464,11.8896 18.42432,11.8896 C19.3794464,11.8904938 20.2783611,12.1313044 21.0640832,12.5550224 C21.100554,12.2151488 21.1196198,11.8697616 21.12,11.52 C21.12,6.21792 16.82208,1.92 11.52,1.92 Z M18.42432,14.62176 C18.06,14.62176 17.7586,14.8928 17.7108967,15.2441033 L17.70432,15.34176 L17.70432,16.50432 C17.70432,16.6178743 17.6253257,16.7130906 17.5193283,16.7379778 L17.46432,16.74432 L16.3008,16.74432 C15.90336,16.74432 15.5808,17.06688 15.5808,17.46432 C15.5808,17.82864 15.85184,18.13004 16.2031433,18.1777433 L16.3008,18.18432 L17.46432,18.18432 C17.5778743,18.18432 17.6730906,18.2633143 17.6979778,18.3693117 L17.70432,18.42432 L17.70432,19.584 C17.70432,19.98144 18.02688,20.304 18.42432,20.304 C18.78864,20.304 19.09004,20.03296 19.1377433,19.6816567 L19.14432,19.584 L19.14432,18.42432 C19.14432,18.3107657 19.2233143,18.2155494 19.3293117,18.1906622 L19.38432,18.18432 L20.544,18.18432 C20.94144,18.18432 21.264,17.86176 21.264,17.46432 C21.264,17.1 20.99296,16.7986 20.6416567,16.7508967 L20.544,16.74432 L19.38432,16.74432 C19.2707657,16.74432 19.1755494,16.6653257 19.1506622,16.5593283 L19.14432,16.50432 L19.14432,15.34176 C19.14432,14.94432 18.82176,14.62176 18.42432,14.62176 Z M7.68,6.72 C8.7408,6.72 9.6,7.5792 9.6,8.64 C9.6,9.7008 8.7408,10.56 7.68,10.56 C6.6192,10.56 5.76,9.7008 5.76,8.64 C5.76,7.5792 6.6192,6.72 7.68,6.72 Z M15.36,6.72 C16.4208,6.72 17.28,7.5792 17.28,8.64 C17.28,9.7008 16.4208,10.56 15.36,10.56 C14.2992,10.56 13.44,9.7008 13.44,8.64 C13.44,7.5792 14.2992,6.72 15.36,6.72 Z" />
    </G>
  ),
  flame: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M21.578,11.135c-0.08-0.264-0.36-0.413-0.624-0.333c-0.064,0.02-0.124,0.052-0.176,0.096 c-0.59,0.502-1.245,0.921-1.947,1.248c-0.125,0.058-0.273,0.004-0.331-0.12c-0.013-0.029-0.021-0.059-0.023-0.091 C18.023,5.988,13.623,1.091,7.758,0.006C7.485-0.037,7.229,0.149,7.186,0.421C7.168,0.536,7.19,0.654,7.249,0.754 C8.07,2.201,8.501,3.836,8.5,5.5c0,1.137-0.213,2.264-0.629,3.322C7.82,8.951,7.674,9.014,7.545,8.962 C7.497,8.943,7.456,8.91,7.428,8.867C6.971,8.159,6.618,7.388,6.38,6.579C6.302,6.314,6.024,6.163,5.759,6.241 C5.693,6.261,5.632,6.293,5.58,6.337C3.308,8.233,1.996,11.041,2,14c0,0.18,0,0.359,0.01,0.537 c0.24,5.518,4.908,9.796,10.426,9.555C17.824,23.857,22.055,19.393,22,14C22.001,13.029,21.859,12.064,21.578,11.135z M12,21.25 c-2.22-0.01-4.011-1.817-4.001-4.037c0-0.025,0-0.051,0.001-0.076c0.037-3.017,1.865-5.723,4.65-6.884 c0.129-0.051,0.275,0.013,0.325,0.142c0.032,0.081,0.019,0.173-0.033,0.243c-0.871,1.21-1.049,2.787-0.47,4.161 c0.034,0.071,0.1,0.122,0.177,0.138c0.077,0.015,0.157-0.007,0.216-0.06c0.34-0.275,0.595-0.641,0.735-1.055 c0.02-0.071,0.071-0.129,0.138-0.158c0.067-0.031,0.144-0.031,0.211,0c1.349,0.667,2.16,2.085,2.051,3.586 c0.044,2.166-1.677,3.956-3.842,4C12.105,21.251,12.053,21.251,12,21.25z" />
    </G>
  ),
  bin: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M20.318,9h-15c-0.276,0-0.5,0.224-0.5,0.5V22c0,1.105,0.895,2,2,2h12c1.105,0,2-0.895,2-2V9.5 C20.818,9.224,20.594,9,20.318,9z M11.068,20.5c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75V13 c0-0.414,0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75V20.5z M16.068,20.5c0,0.414-0.336,0.75-0.75,0.75s-0.75-0.336-0.75-0.75V13 c0-0.414,0.336-0.75,0.75-0.75s0.75,0.336,0.75,0.75V20.5z M21.628,2.552l-4.663,0.9c-0.136,0.026-0.267-0.063-0.293-0.198 c0-0.001,0-0.001,0-0.002l-0.238-1.227c-0.264-1.354-1.575-2.238-2.929-1.976L8.6,1C7.244,1.262,6.358,2.573,6.62,3.929 c0,0,0,0.001,0,0.001l0.237,1.227c0.026,0.135-0.061,0.266-0.196,0.292c-0.001,0-0.002,0-0.004,0.001l-4.663,0.9 C1.452,6.454,1.096,6.978,1.2,7.52c0,0,0,0.001,0,0.001c0.119,0.533,0.633,0.88,1.172,0.793l19.636-3.8 c0.542-0.105,0.897-0.63,0.792-1.172C22.695,2.8,22.17,2.445,21.628,2.55l0,0V2.552z M8.58,3.552 C8.528,3.281,8.705,3.019,8.977,2.967c0.001,0,0.002,0,0.003-0.001l4.909-0.949c0.271-0.052,0.533,0.127,0.585,0.398 c0,0.001,0,0.001,0,0.002l0.238,1.228c0.026,0.136-0.064,0.267-0.2,0.293L9.11,4.973C8.974,4.999,8.843,4.91,8.817,4.775 c0-0.001,0-0.001,0-0.002L8.58,3.552z" />
    </G>
  ),
  archive: (
    <G transform="matrix(1,0,0,1,0,0)">
      <Path d="M20,0H4C2.895,0,2,0.895,2,2v20c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V2C22,0.895,21.105,0,20,0z M4,10 c0-0.276,0.224-0.5,0.5-0.5h15c0.276,0,0.5,0.224,0.5,0.5v4.5c0,0.276-0.224,0.5-0.5,0.5h-15C4.224,15,4,14.776,4,14.5V10z M19.5,2 C19.776,2,20,2.224,20,2.5V7c0,0.276-0.224,0.5-0.5,0.5h-15C4.224,7.5,4,7.276,4,7V2.5C4,2.224,4.224,2,4.5,2H19.5z M4.5,22 C4.224,22,4,21.776,4,21.5v-4C4,17.224,4.224,17,4.5,17h15c0.276,0,0.5,0.224,0.5,0.5v4c0,0.276-0.224,0.5-0.5,0.5H4.5z M9.912,5.316C10.048,5.724,10.43,6,10.86,6h2.28c0.43,0,0.812-0.276,0.948-0.684l0.167-0.5c0.175-0.524-0.109-1.09-0.633-1.265 C13.52,3.517,13.413,3.5,13.306,3.5h-2.612c-0.552,0-1,0.447-1,1c0,0.107,0.017,0.214,0.051,0.316L9.912,5.316z M14.118,11.416 C13.93,11.155,13.628,11,13.306,11h-2.612c-0.552,0-1,0.447-1,1c0,0.107,0.017,0.214,0.051,0.316l0.167,0.5 c0.136,0.408,0.518,0.684,0.948,0.684h2.28c0.43,0,0.812-0.276,0.948-0.684l0.167-0.5C14.356,12.011,14.305,11.677,14.118,11.416z M13.306,18.5h-2.612c-0.552,0-1,0.447-1,1c0,0.107,0.017,0.214,0.051,0.316l0.167,0.5C10.048,20.724,10.43,21,10.86,21h2.28 c0.43,0,0.812-0.276,0.948-0.684l0.167-0.5c0.175-0.524-0.109-1.09-0.633-1.265C13.52,18.517,13.413,18.5,13.306,18.5z" />
    </G>
  ),
  star: (
    <G>
      <Path d="M23.555,8.729c-0.219-0.588-0.779-0.978-1.406-0.98h-6.087c-0.212,0-0.402-0.134-0.472-0.334l-2.185-6.193 c-0.29-0.776-1.154-1.17-1.93-0.88c-0.407,0.152-0.728,0.473-0.88,0.88L10.59,1.238L8.41,7.415c-0.07,0.2-0.259,0.334-0.471,0.334 H1.85c-0.828-0.001-1.501,0.67-1.501,1.499c0,0.445,0.197,0.867,0.538,1.152l5.184,4.3c0.159,0.132,0.22,0.347,0.155,0.543 l-2.178,6.531c-0.262,0.786,0.163,1.635,0.949,1.897c0.462,0.154,0.969,0.074,1.361-0.213l5.346-3.92 c0.176-0.129,0.415-0.129,0.591,0l5.344,3.919c0.667,0.491,1.606,0.348,2.097-0.319c0.289-0.393,0.369-0.902,0.215-1.364 l-2.178-6.535c-0.065-0.196-0.004-0.411,0.155-0.543l5.194-4.306C23.6,9.982,23.773,9.319,23.555,8.729z" />
    </G>
  ),
  questionMarkCircle: (
    <G>
      <Path d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12C23.993,5.376,18.624,0.007,12,0z M12,19 c-0.828,0-1.5-0.672-1.5-1.5S11.172,16,12,16s1.5,0.672,1.5,1.5S12.828,19,12,19z M13.6,12.92c-0.365,0.159-0.6,0.519-0.6,0.917 c0,0.552-0.448,1-1,1s-1-0.448-1-1c0-1.193,0.707-2.273,1.8-2.75c1.012-0.442,1.475-1.621,1.033-2.633S12.212,6.979,11.2,7.421 C10.471,7.739,10,8.459,10,9.255c0,0.552-0.448,1-1,1s-1-0.448-1-1c0-2.209,1.791-4,4-4s4,1.791,4,4 C16,10.845,15.058,12.285,13.6,12.92L13.6,12.92z" />
    </G>
  ),
  alarmBell: (
    <G>
      <Path d="M21,17.5c-0.828,0-1.5-0.672-1.5-1.5v-4.862c0.119-3.924-2.641-7.348-6.5-8.065V1c0-0.552-0.448-1-1-1s-1,0.448-1,1v2.073 C7.141,3.79,4.381,7.214,4.5,11.138V16c0,0.828-0.672,1.5-1.5,1.5c-0.552,0-1,0.448-1,1s0.448,1,1,1h18c0.552,0,1-0.448,1-1 S21.552,17.5,21,17.5z M14.236,21H9.764c-0.127,0-0.234,0.096-0.248,0.222C9.505,21.314,9.5,21.407,9.5,21.5 c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-0.093-0.005-0.186-0.016-0.278C14.471,21.095,14.363,20.999,14.236,21z" />
    </G>
  ),
  wrench: (
    <G>
      <Path d="M23.46,7.855a.5.5,0,0,0-.415-.779H21.351a.5.5,0,0,1-.343-.136l-1.591-1.5a.5.5,0,0,1,0-.728l1.591-1.5a.5.5,0,0,1,.343-.136h1.694A.5.5,0,0,0,23.46,2.3a5.053,5.053,0,0,0-.622-.757,5,5,0,0,0-8.427,4.578.5.5,0,0,1-.135.459l-9.21,9.21a.5.5,0,0,1-.382.145A4,4,0,1,0,8.446,19.7a.5.5,0,0,1,.146-.381l9.219-9.218a.5.5,0,0,1,.458-.136,4.972,4.972,0,0,0,4.569-1.358A5.045,5.045,0,0,0,23.46,7.855ZM5.514,20.985a1.5,1.5,0,1,1,0-2.121A1.5,1.5,0,0,1,5.514,20.985Z" />
    </G>
  ),
  calendar: (
    <G>
      <Path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0v4.75a.75.75,0,0,1-.75.75h0a.75.75,0,0,1-.75-.75V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.751V1A1,1,0,1,0,6,1v4.75a.75.75,0,0,1-.75.75h0a.75.75,0,0,1-.75-.75V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3ZM21,22H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5v12A.5.5,0,0,1,21,22Z" />
    </G>
  ),
  doubleBedAdd: (
    <G>
      <Path d="M.9,15.5H9.248a.5.5,0,0,0,.477-.352A8.023,8.023,0,0,1,17.375,9.5a7.925,7.925,0,0,1,4.883,1.669.5.5,0,0,0,.8-.486l-.7-3.773a.5.5,0,0,0-.49-.41H2.385a.5.5,0,0,0-.49.41l-1.49,8a.56.56,0,0,0,.11.41A.527.527,0,0,0,.9,15.5Z" />
      <Path d="M9.375,17.5c0-.159,0-.316.013-.472a.5.5,0,0,0-.5-.528H.625a.5.5,0,0,0-.5.5v3.25a2.253,2.253,0,0,0,2.25,2.25.248.248,0,0,1,.25.25v.5a.75.75,0,0,0,1.5,0V23a.5.5,0,0,1,.5-.5h5.547a.5.5,0,0,0,.424-.766A7.911,7.911,0,0,1,9.375,17.5Z" />
      <Path d="M2.625,5.5H4.2A.5.5,0,0,0,4.7,5.082l.36-2.165A.5.5,0,0,1,5.549,2.5h4.576a.5.5,0,0,1,.5.5V5a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V3a.5.5,0,0,1,.5-.5H18.7a.5.5,0,0,1,.494.417l.36,2.165a.5.5,0,0,0,.494.418h1.576a.5.5,0,0,0,.5-.5V2.25A2.253,2.253,0,0,0,19.875,0H4.375a2.253,2.253,0,0,0-2.25,2.25V5A.5.5,0,0,0,2.625,5.5Z" />
      <Path d="M17.375,11a6.5,6.5,0,1,0,6.5,6.5A6.508,6.508,0,0,0,17.375,11Zm2.5,7.5h-1a.5.5,0,0,0-.5.5v1a1,1,0,0,1-2,0V19a.5.5,0,0,0-.5-.5h-1a1,1,0,0,1,0-2h1a.5.5,0,0,0,.5-.5V15a1,1,0,0,1,2,0v1a.5.5,0,0,0,.5.5h1a1,1,0,0,1,0,2Z" />
    </G>
  )
}
Example #24
Source File: index.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
AnimatedBar = (props: animatedBarPropTypes) => {
  const [initialRender, setInitialRender] = useState(true);
  const [height, setHeight] = useState(Platform.OS === 'ios' ? 0 : 20);

  const animationDuration = props.animationDuration || 800;

  useEffect(() => {
    if (initialRender) {
      // labelsAppear();
      // increaseOpacity();
      setTimeout(() => {
        layoutAppear();
      }, 20);
    } else {
      elevate();
    }
  }, [props.height]);

  const elevate = () => {
    LayoutAnimation.configureNext({
      duration: animationDuration,
      update: {type: 'linear', property: 'scaleY'},
    });
    setHeight(props.height);
  };

  const layoutAppear = () => {
    LayoutAnimation.configureNext({
      duration: Platform.OS == 'ios' ? animationDuration : 20,
      create: {type: 'linear', property: 'scaleY'},
      // update: { type: 'linear' }
    });
    setInitialRender(false);
    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
  };

  const width = props.width;
  const sideWidth = props.sideWidth;

  const {barBackgroundPattern, patternId} = props;

  const showGradient = props.showGradient || false;
  const gradientColor = props.gradientColor || 'white';

  const frontColor = props.frontColor || '#fe2233';
  const sideColor = props.sideColor || '#cc2233';
  const topColor = props.topColor || '#ff4433';

  const topLabelComponent = props.topLabelComponent || null;
  const topLabelContainerStyle = props.topLabelContainerStyle || {};

  const opacity = props.opacity || 1;

  return (
    <View style={styles.container}>
      {!initialRender && (
        <View
          style={[
            styles.row,
            {opacity: opacity, position: 'absolute', bottom: 0},
            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
          ]}>
          {/*******************          Top View             *****************/}
          {props.height ? (
            <>
              <View style={{position: 'absolute', top: sideWidth / -2}}>
                <TriangleCorner
                  color={topColor}
                  width={sideWidth}
                  style={{transform: [{rotate: '90deg'}], opacity: opacity}}
                />
              </View>
              <View style={{position: 'absolute', top: sideWidth / -2}}>
                <View
                  style={{
                    width: width,
                    height: (3 * width) / 4,
                    // left: width / 2,
                    backgroundColor: topColor,
                    opacity: opacity,
                  }}
                />
              </View>
              <View
                style={{
                  position: 'absolute',
                  top: sideWidth / -2,
                  left: width,
                }}>
                <TriangleCorner
                  color={topColor}
                  width={sideWidth}
                  style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
                />
              </View>
            </>
          ) : null}

          {/*******************************************************************/}

          {props.height ? (
            <View style={{marginTop: sideWidth / -2}}>
              <TriangleCorner
                color={sideColor}
                width={sideWidth}
                style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
              />
              <View
                style={{
                  width: sideWidth / 2,
                  height: height - sideWidth / 2, //animatedSideHeight
                  backgroundColor: sideColor,
                  opacity: opacity,
                }}
              />
              <TriangleCorner
                color={sideColor}
                width={sideWidth}
                style={{transform: [{rotate: '90deg'}], opacity: opacity}}
              />
            </View>
          ) : null}

          <View
            style={{
              width: width,
              height: height, //animatedHeight
              backgroundColor: frontColor,
              borderLeftWidth: StyleSheet.hairlineWidth,
              borderTopWidth: StyleSheet.hairlineWidth,
              borderColor: 'white',
              opacity: opacity,
            }}>
            {showGradient && (
              <LinearGradient
                style={{position: 'absolute', width: '100%', height: '100%'}}
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                colors={[gradientColor, frontColor]}
              />
            )}
            {barBackgroundPattern && (
              <Svg>
                <Defs>{barBackgroundPattern()}</Defs>
                <Rect
                  stroke="transparent"
                  x="1"
                  y="1"
                  width={width || 30}
                  height={height}
                  fill={`url(#${patternId})`}
                />
              </Svg>
            )}
          </View>

          {/*******************          Top Label            *****************/}

          {topLabelComponent && (
            <View
              style={[
                {
                  position: 'absolute',
                  top: width * -2,
                  height: (width * 3) / 2,
                  width: (width * 3) / 2,
                  justifyContent: 'flex-end',
                  alignItems: 'center',
                  opacity: opacity,
                },
                props.horizontal &&
                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                props.side === 'right' && {transform: [{rotateY: '180deg'}]},
                topLabelContainerStyle,
              ]}>
              {topLabelComponent()}
            </View>
          )}

          {/*******************************************************************/}
        </View>
      )}
    </View>
  );
}
Example #25
Source File: index.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
ThreeDBar = (props: PropTypes) => {
  const {width, sideWidth, height, value, barBackgroundPattern, patternId} =
    props;

  const showGradient = props.showGradient || false;
  const gradientColor = props.gradientColor || 'white';

  const frontColor = props.frontColor || '#fe2233';
  const sideColor = props.sideColor || '#cc2233';
  const topColor = props.topColor || '#ff4433';

  const topLabelComponent = props.topLabelComponent || null;
  const topLabelContainerStyle = props.topLabelContainerStyle || {};

  const opacity = props.opacity || 1;
  return (
    <View style={styles.container}>
      {props.height ? (
        <View
          style={[
            styles.row,
            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
          ]}>
          {/*******************          Top View             *****************/}

          <View style={{position: 'absolute', top: sideWidth / -2}}>
            <TriangleCorner
              color={topColor}
              width={sideWidth}
              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
            />
          </View>
          <View style={{position: 'absolute', top: sideWidth / -2}}>
            <View
              style={{
                width: width,
                height: (3 * width) / 4,
                // left: width / -8,
                backgroundColor: topColor,
                opacity: opacity,
              }}
            />
          </View>
          <View
            style={{position: 'absolute', top: sideWidth / -2, left: width}}>
            <TriangleCorner
              color={topColor}
              width={sideWidth}
              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
            />
          </View>

          {/*******************************************************************/}

          <View style={{marginTop: sideWidth / -2}}>
            <TriangleCorner
              color={sideColor}
              width={sideWidth}
              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
            />
            <View
              style={{
                width: sideWidth / 2,
                height: height - sideWidth / 2,
                backgroundColor: sideColor,
                opacity: opacity,
              }}
            />
            <TriangleCorner
              color={sideColor}
              width={sideWidth}
              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
            />
          </View>

          <View
            style={{
              width: width,
              height: height,
              backgroundColor: frontColor,
              borderLeftWidth: StyleSheet.hairlineWidth,
              borderTopWidth: StyleSheet.hairlineWidth,
              borderColor: 'white',
              opacity: opacity,
            }}>
            {showGradient && (
              <LinearGradient
                style={{position: 'absolute', width: '100%', height: '100%'}}
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                colors={[gradientColor, frontColor]}
              />
            )}
            {barBackgroundPattern && (
              <Svg>
                <Defs>{barBackgroundPattern()}</Defs>
                <Rect
                  stroke="transparent"
                  x="1"
                  y="1"
                  width={width || 30}
                  height={height}
                  fill={`url(#${patternId})`}
                />
              </Svg>
            )}
          </View>
        </View>
      ) : null}

      {/*******************          Top Label            *****************/}

      {topLabelComponent && (
        <View
          style={[
            {
              position: 'absolute',
              top: value < 0 ? width * -1 : width * -2,
              height: (width * 3) / 2,
              width: width,
              justifyContent: 'flex-end',
              alignItems: 'center',
            },
            value < 0 && {transform: [{rotate: '180deg'}]},
            props.horizontal &&
              !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
            props.side === 'right'
              ? {right: (-1 * width) / 4}
              : {left: (-1 * width) / 4},
            topLabelContainerStyle,
          ]}>
          {topLabelComponent()}
        </View>
      )}

      {/*******************************************************************/}
    </View>
  );
}
Example #26
Source File: Success.tsx    From react-native-crypto-wallet-app with MIT License 4 votes vote down vote up
function SvgSuccess(props: SvgProps) {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 228" {...props}>
      <Path
        fill="#E0E9F8"
        d="M159.319 30.282c-17.58-.611-34.322-6.29-50.31-12.504-15.987-6.214-31.822-13.1-48.98-16.391C48.993-.731 36.37-1.03 27.48 4.89c-8.559 5.708-11.324 15.535-12.81 24.663-1.119 6.866-1.776 14.094 1.288 20.52 2.13 4.464 5.905 8.215 8.518 12.49 9.09 14.875 2.664 33.218-7.185 47.742-4.617 6.815-9.982 13.32-13.548 20.567-3.566 7.247-5.215 15.562-2.094 22.961 3.09 7.339 10.46 12.841 18.443 16.715 16.213 7.869 35.31 10.12 53.946 11.395 41.239 2.824 82.696 1.601 124.045.378 15.303-.454 30.671-.914 45.724-3.281 8.36-1.316 16.99-3.401 23.06-8.441 7.703-6.396 9.613-17.225 4.449-25.247-8.659-13.453-32.594-16.794-38.654-31.23-3.33-7.949.09-16.8 4.933-24.172 10.387-15.81 27.795-29.68 28.71-47.752.63-12.411-7.738-24.842-20.678-30.716-13.562-6.155-32.372-5.383-42.373 4.808-10.307 10.493-28.413 14.53-43.936 13.991zM131.568 223.25c45.578 0 82.527-4.962 82.527-11.083 0-6.122-36.949-11.084-82.527-11.084s-82.527 4.962-82.527 11.084c0 6.121 36.949 11.083 82.527 11.083z"
      />
      <Rect width={2.637} height={19.528} x={174.545} y={79.167} fill="#99B9EE" rx={1.318} />
      <Rect width={1.055} height={6.333} x={94.919} y={63.333} fill="#3A3768" rx={0.527} />
      <Rect width={1.055} height={11.083} x={94.919} y={74.944} fill="#3A3768" rx={0.527} />
      <Rect width={1.055} height={11.611} x={94.919} y={90.25} fill="#3A3768" rx={0.527} />
      <Rect width={80.681} height={163.083} x={94.919} y={41.694} fill="#99B9EE" rx={12} />
      <Path
        fill="#F7F7F7"
        d="M164.452 45.917h-9.247v1.111a5.272 5.272 0 01-5.273 5.266h-29.408a5.272 5.272 0 01-5.273-5.266v-1.111h-8.657a6.399 6.399 0 00-6.402 6.396v142.374a6.398 6.398 0 006.402 6.396h57.858a6.398 6.398 0 006.402-6.396V52.324a6.392 6.392 0 00-1.871-4.53 6.405 6.405 0 00-4.531-1.877z"
      />
      <Rect width={11.074} height={2.639} x={127.613} y={46.444} fill="#E6E8EC" rx={1.319} />
      <Path fill="#E6E8EC" d="M141.587 49.083a1.32 1.32 0 10-.001-2.639 1.32 1.32 0 00.001 2.64z" />
      <Path
        fill="#99B9EE"
        d="M203.65 34.336s-22.583-1.395-19.922 14.806c0 0-.537 2.865 2.006 4.164 0 0 .04-1.2 2.317-.791a10.35 10.35 0 002.454.12 5.052 5.052 0 002.999-1.254s6.348-2.686 8.815-13.308c0 0 1.827-2.318 1.754-2.913l-3.811 1.666s1.304 2.815.268 5.155c0 0-.123-5.053-.855-4.943-.148.022-1.979.975-1.979.975s2.239 4.901.549 8.466c0 0 .641-6.042-1.249-8.112l-2.682 1.604s2.617 5.063.842 9.196c0 0 .456-6.338-1.408-8.806l-2.43 1.941s2.459 4.99.96 8.417c0 0-.196-7.376-1.486-7.934 0 0-2.127 1.923-2.451 2.708 0 0 1.684 3.625.638 5.536 0 0-.641-4.915-1.167-4.943 0 0-2.118 3.257-2.338 5.492 0 0 .091-3.32 1.826-5.8 0 0-2.049.36-3.245 1.72 0 0 .33-2.302 3.768-2.505 0 0 1.751-2.471 2.218-2.62 0 0-3.417-.293-5.49.649 0 0 1.824-2.173 6.118-1.184l2.4-2.007s-4.5-.63-6.41.066c0 0 2.197-1.923 7.056-.522l2.613-1.599s-3.838-.845-6.123-.549c0 0 2.414-1.332 6.89.113l1.877-.86s-2.811-.565-3.634-.656c-.823-.09-.866-.321-.866-.321a9.54 9.54 0 015.281.601s3.964-1.513 3.897-1.768zM180.148 26.93s-10.412-.619-9.195 6.581c0 0-.244 1.272.926 1.85 0 0 .019-.54 1.071-.354.374.062.754.08 1.132.054a2.36 2.36 0 001.383-.561s2.932-1.194 4.072-5.915c0 0 .841-1.029.808-1.293l-1.759.74s.6 1.25.129 2.29c0 0-.058-2.244-.395-2.193-.068 0-.915.435-.915.435s1.036 2.18.255 3.762c0 0 .296-2.685-.578-3.606l-1.239.724s1.209 2.25.389 4.086c0 0 .211-2.817-.649-3.913l-1.12.864s1.134 2.217.443 3.74c0 0-.093-3.278-.687-3.526 0 0-.981.853-1.132 1.204 0 0 .778 1.62.296 2.46 0 0-.296-2.185-.548-2.195 0 0-.978 1.447-1.079 2.43a5.22 5.22 0 01.843-2.576 2.96 2.96 0 00-1.498.764s.153-1.023 1.74-1.113c0 0 .822-1.099 1.024-1.166 0 0-1.578-.13-2.534.289 0 0 .841-.964 2.822-.527l1.096-.891s-2.08-.27-2.959.03c0 0 1.014-.854 3.258-.233l1.205-.71s-1.773-.375-2.827-.24c0 0 1.115-.592 3.18.048l.864-.38s-1.299-.252-1.68-.292c-.381-.04-.4-.143-.4-.143a4.549 4.549 0 012.438.27s1.853-.68 1.82-.794z"
      />
      <Path
        fill="#E0E9F8"
        d="M234.66 211.111c4.078 0 7.383-.591 7.383-1.319 0-.729-3.305-1.32-7.383-1.32-4.077 0-7.382.591-7.382 1.32 0 .728 3.305 1.319 7.382 1.319zM24.257 221.139c4.077 0 7.383-.591 7.383-1.32 0-.728-3.306-1.319-7.383-1.319s-7.383.591-7.383 1.319c0 .729 3.306 1.32 7.383 1.32zM52.733 228c4.077 0 7.382-.591 7.382-1.319 0-.729-3.305-1.32-7.382-1.32-4.078 0-7.383.591-7.383 1.32 0 .728 3.305 1.319 7.383 1.319z"
      />
      <Path
        fill="#99B9EE"
        d="M218.05 224.833c5.97 0 10.81-.827 10.81-1.847s-4.84-1.847-10.81-1.847c-5.971 0-10.81.827-10.81 1.847s4.839 1.847 10.81 1.847z"
      />
      <Path
        fill="#99B9EE"
        d="M223.049 220.462a3.247 3.247 0 001.03-1.602c.135-.634-.129-1.384-.721-1.63-.662-.26-1.37.213-1.905.689-.536.476-1.152 1.021-1.854.919a2.95 2.95 0 00.874-2.715 1.155 1.155 0 00-.245-.554c-.366-.404-1.033-.232-1.472.089-1.399 1.01-1.789 2.967-1.797 4.724-.143-.634-.022-1.295-.027-1.937-.006-.642-.175-1.384-.711-1.724a2.09 2.09 0 00-1.076-.261c-.63-.024-1.33.042-1.76.515-.538.587-.393 1.572.07 2.214.463.642 1.17 1.054 1.822 1.5.521.319.965.755 1.299 1.276.041.072.073.149.097.229h3.932a11.003 11.003 0 002.444-1.732zM53.107 196.333s1.478 2.035-.68 5.093c-2.159 3.058-3.938 5.659-3.226 7.574 0 0 3.258-5.701 5.914-5.78 2.656-.079.908-3.458-2.008-6.887z"
      />
      <Path
        fill="#000"
        d="M53.065 196.333c.13.197.233.412.305.639 2.615 3.195 4.01 6.178 1.495 6.252-2.34.07-5.15 4.424-5.824 5.524.022.085.05.167.08.252 0 0 3.294-5.697 5.98-5.776 2.686-.08.914-3.464-2.036-6.891z"
        opacity={0.1}
      />
      <Path
        fill="#FFD037"
        d="M56.424 198.858c0 .646-.117 1.17-.264 1.17-.146 0-.263-.524-.263-1.17 0-.646.146-.342.293-.342.146 0 .234-.304.234.342z"
      />
      <Path
        fill="#FFD037"
        d="M57.104 199.506c-.619.371-1.16.595-1.204.5-.045-.095.415-.473 1.034-.844s.376-.101.42 0c.045.101.369-.027-.25.344z"
      />
      <Path
        fill="#99B9EE"
        d="M45.505 196.333s-1.478 2.035.68 5.093 3.936 5.659 3.224 7.574c0 0-3.254-5.701-5.911-5.78-2.658-.079-.914-3.458 2.007-6.887z"
      />
      <Path
        fill="#99B9EE"
        d="M45.548 196.333c-.131.197-.234.412-.307.639-2.614 3.195-4.005 6.178-1.495 6.252 2.342.07 5.149 4.424 5.823 5.524-.022.086-.05.17-.082.252 0 0-3.29-5.697-5.977-5.776-2.687-.08-.916-3.464 2.038-6.891z"
        opacity={0.1}
      />
      <Path
        fill="#FFD037"
        d="M42.713 198.858c0 .646.12 1.17.266 1.17.145 0 .262-.524.262-1.17 0-.646-.146-.342-.29-.342-.146 0-.238-.304-.238.342z"
      />
      <Path
        fill="#FFD037"
        d="M42.035 199.506c.618.371 1.155.595 1.203.5.047-.095-.418-.473-1.035-.844-.618-.371-.373-.101-.42 0-.048.101-.365-.027.252.344z"
      />
      <Path
        fill="#99B9EE"
        d="M43.24 208.099s4.11-.131 5.351-1.029c1.241-.897 6.322-1.975 6.627-.532.304 1.443 6.177 7.172 1.538 7.211-4.639.038-10.781-.737-12.017-1.504-1.236-.766-1.498-4.146-1.498-4.146z"
      />
      <Path
        fill="#000"
        d="M56.839 213.239c-4.64.039-10.783-.757-12.02-1.545-.939-.602-1.316-2.757-1.442-3.75h-.136s.267 3.47 1.495 4.26c1.229.791 7.38 1.584 12.02 1.545 1.337 0 1.8-.51 1.776-1.25-.187.454-.698.731-1.693.74z"
        opacity={0.2}
      />
      <Path
        fill="url(#success_svg__paint0_linear)"
        d="M76.462 120.529a.418.418 0 00.528.074 1.717 1.717 0 01-.528-.074z"
      />
      <Path
        fill="url(#success_svg__paint1_linear)"
        fillRule="evenodd"
        d="M108.918 66.858a54.818 54.818 0 01-2.378-.787 12.702 12.702 0 002.204-4.487l-.084.033.042-.15.042-.149c-1.888.776-3.98-.543-5.311-2.228-.577-.733-1.075-1.542-1.573-2.352-.648-1.054-1.295-2.108-2.119-2.988a17.054 17.054 0 00-1.956-1.702c-.43-.337-.895-.687-1.42-.703-.5-.014-.936.27-1.378.559-.309.201-.62.404-.956.508a3.169 3.169 0 01-1.633-.06c-.808-.188-1.606-.436-2.402-.684-1.286-.4-2.57-.8-3.896-.944a7.292 7.292 0 00-3.417.388c-.703.27-1.156.71-1.623 1.165-.257.25-.517.503-.826.735-.76.573-2.128.673-3.213.754-.262.019-.507.037-.724.06a28.246 28.246 0 01-4.064.171 9.237 9.237 0 00-2.34.087c-1.616.358-2.914 1.656-4.125 2.904-.332.286-.57.664-.683 1.086-.014.12-.014.24 0 .359-.012.324.044.648.164.95A12.59 12.59 0 0067.122 63c.404.557.809 1.117 1.038 1.783a4.4 4.4 0 01.21 1.29 9.873 9.873 0 01-.145 1.387 17.614 17.614 0 01-1.14 3.917c-.23.554-.46 1.112-.52 1.718a3.506 3.506 0 000 .413c-.045 1.175.585 2.17 1.225 3.18.518.819 1.043 1.648 1.224 2.593.032.175.052.352.06.53-.046 1.319-.789 2.608-1.883 3.119.067.026.135.05.204.074l.087.031c-.094.06-.19.114-.29.163.198.076.402.142.609.201a14.29 14.29 0 00-3.105 3.85c-3.661 6.93-28.62 20.523-28.62 20.523s.14.079.37.215c-.093.057-.191.122-.3.195-2.16 1.455-7.232 5.701-2.647 11.054 0 0 3.577-5.714 6.083-8.144.114-.108.223-.209.33-.304a.74.74 0 01.097.586l16.414-9.329s5.833-4.132 7.46-5.065l.171-.1c.648-.376 1.971-1.146 3.526-1.505l-.19.084a7.404 7.404 0 011.883-.27c2.905.045 6.05 2.198 7.09 10.724 1.39 11.417.745 13.475.299 13.757a.755.755 0 01-.163-.03.328.328 0 00.043.033.783.783 0 01-.18-.033c.064.06.155.083.24.06.061.018.127.01.182-.022h.22c0 .069-.007.14-.014.211l-.01.107c-.022 0-.13.062 0 .07-.032.643-.03 1.357 0 2.077a664.87 664.87 0 00-4.151.247l.114-.606.052-.271c1.107-.09 2.16-.418 2.282-1.33.272-1.998-2.448-3.065-4.747-3.198-2.3-.133-16.142.801-16.142.801s-2.076 2.714 4.505 3.559c.196.103.4.217.607.336 2.577 1.488 6.075 4.224 7.749 5.573l.233.187-.75.606c3.521.805 6.925 12.627 9.185 20.476.36 1.248.69 2.395.987 3.381 2.169 7.196 6.919 6.93 10.853 5.866 3.686-1.002 4.157-11.83 4.2-13.19v-.138l6.555 8.173.498.622c.193.1.38.195.565.285 4.966 2.391 10.45-2.191 8.889-7.402-1.575-5.267-4.024-13.049-5.656-16.339-1.361-2.755-3.132-7.329-4.204-10.201.139-.057.274-.122.406-.195l-.069-.364.069-.035s-1.579-8.293-1.666-14.181v-.502a27.19 27.19 0 011.938-.38l.021-.255-.138.03.658-7.639s2.421-5.209.569-7.38a4.608 4.608 0 01-1.089-2.256c-.31-1.998 0-5.323 4.318-8.089 6.647-4.264 9.226-7.73 9.226-7.73s.141-2.547-3.929-3.747zm-13.2 5.299v-3.529c.58-.028 1.168-.011 1.755.006.66.02 1.32.039 1.975-.006a9.434 9.434 0 001.801-.304l.299.21a32.864 32.864 0 01-5.83 3.623zm-17.386 56.377a74.379 74.379 0 00-1.458-1.054 24.524 24.524 0 012.04 4.107 76.763 76.763 0 01-.582-3.053z"
        clipRule="evenodd"
      />
      <Path
        fill="#FFBDC6"
        d="M87.536 125.083l-.289 1.612-.222 1.232-.405 2.254L82.7 133s-.354-.311-.938-.8c-1.607-1.359-4.985-4.125-7.465-5.61a8.245 8.245 0 00-2.052-.97l15.292-.537z"
      />
      <Path
        fill="#000"
        d="M87.536 125.083l-.289 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.492 28.492 0 01-1.213-.099 8.377 8.377 0 00-2.052-.943l15.292-.521z"
        opacity={0.1}
      />
      <Path
        fill="#474463"
        d="M84.758 125.992s4.6.74 4.868-1.102c.27-1.842-2.368-2.837-4.601-2.961-2.233-.124-15.645.74-15.645.74s-2.365 2.959 6.178 3.454l9.2-.131z"
      />
      <Path
        fill="#000"
        d="M87.536 125.083l-.289 1.612-.222 1.232-.405 2.254L82.7 133s-.354-.311-.938-.8c-1.607-1.359-4.985-4.125-7.465-5.61a8.245 8.245 0 00-2.052-.97l15.292-.537z"
        opacity={0.1}
      />
      <Path
        fill="#000"
        d="M87.536 125.083l-.289 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.492 28.492 0 01-1.213-.099 8.377 8.377 0 00-2.052-.943l15.292-.521z"
        opacity={0.1}
      />
      <Path
        fill="#000"
        d="M84.761 125.994s4.602.737 4.866-1.11c.264-1.848-2.368-2.832-4.602-2.955-2.233-.124-15.645.739-15.645.739s-2.365 2.955 6.178 3.447l9.203-.121z"
        opacity={0.1}
      />
      <Path fill="#474463" d="M70.662 61.222h24.257v28.5H70.662z" />
      <Path fill="#000" d="M70.662 61.222h24.257v28.5H70.662z" opacity={0.1} />
      <Path
        fill="#FFBDC6"
        d="M42.186 110.073c-.387.101-.883.489-1.434 1.052-2.372 2.436-5.77 8.153-5.77 8.153-4.343-5.367.465-9.607 2.513-11.065.498-.352.832-.546.832-.546l3.86 2.406z"
      />
      <Path
        fill="#B97A59"
        d="M87.594 69.667s1.179 8.24 5.243 10.203c4.064 1.962-5.243 5.63-5.243 5.63L74.88 80.787s7.21-2.357 5.767-9.29l6.947-1.83zM73.826 120.333l-.287 1.607-.233 1.238-.404 2.255-3.919 2.817s-.353-.308-.937-.798c-1.606-1.359-4.981-4.126-7.462-5.611a8.195 8.195 0 00-2.05-.971l15.292-.537z"
      />
      <Path
        fill="#000"
        d="M73.826 120.333l-.287 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.647 28.647 0 01-1.216-.099 8.269 8.269 0 00-2.052-.946l15.293-.518z"
        opacity={0.1}
      />
      <Path
        fill="#0B4870"
        d="M71.053 121.771s4.603.737 4.864-1.107c.261-1.845-2.366-2.834-4.602-2.957-2.237-.124-15.644.739-15.644.739s-2.369 2.954 6.178 3.449l9.205-.124z"
      />
      <Path
        fill="#000"
        d="M73.298 123.068l-.445 2.304-4.322 2.878s-.39-.315-1.033-.815l5.715-4.463.085.096z"
        opacity={0.1}
      />
      <Path
        fill="#0B4870"
        d="M99.66 153.533c-.183-.09-.365-.182-.545-.272l-.49-.617-6.428-8.142v.141c-.044 1.36-.506 12.134-4.117 13.129-3.852 1.061-8.5 1.327-10.617-5.838-2.119-7.166-5.99-22.824-9.965-23.754l5.913-4.843s3.915 4.574 5.51 8.952c-.06-.272-2.763-12.89-.544-15.122h19.399s2.994 8.519 5.047 12.74c1.598 3.277 3.997 11.024 5.541 16.267 1.53 5.178-3.842 9.749-8.704 7.359z"
      />
      <Path
        fill="#000"
        d="M98.61 119.192c-2.993 1.753-16.13 1.039-20.405.754l-1.164-.083c-.125 0 .019-.07.019-.07l.12-1.193 3.185-8.009 17.059-9.785c-.346 1.03-.46 2.607-.433 4.413.08 5.803 1.62 13.973 1.62 13.973z"
        opacity={0.1}
      />
      <Path
        fill="#B97A59"
        d="M98.61 119.192c-2.973 1.753-16.025 1.039-20.272.754l-1.156-.081-.192-.016.21-.054 1.044-.269 2.24-8.934 16.948-9.786c-.344 1.031-.457 2.609-.43 4.415.078 5.8 1.608 13.971 1.608 13.971z"
      />
      <Path
        fill="#000"
        d="M97.646 105.305c-3.5.808-11.202 3.178-14.161 8.9-1.974 3.81-3.635 5.444-4.793 6.128l-1.175-.082a.719.719 0 00.02-.071l1.059-.275 2.275-9.114 17.212-9.985c-.346 1.046-.464 2.656-.437 4.499zM38.283 107.667l3.903 2.201c-.392.093-.893.449-1.45.965-.326-.892-2.368-2.138-3.296-2.67.504-.318.843-.496.843-.496zM76.99 119.553a.46.46 0 01-.528-.074c.172.05.35.075.528.074z"
        opacity={0.1}
      />
      <Path
        fill="#FDB32A"
        d="M85.614 79.888s-3.574.396-6.088-2.252c0 0-10.575 3.047-14.157 9.93-3.582 6.883-27.929 20.39-27.929 20.39s4.236 2.382 3.837 3.573l16.012-9.268s5.694-4.103 7.275-5.03c1.58-.928 10.323-6.62 12.175 8.869 1.852 15.49 0 13.636 0 13.636s2.646.928 6.483-6.487c3.837-7.415 15.744-9.135 15.744-9.135l.661-7.809s2.362-5.177.543-7.326a4.611 4.611 0 01-1.06-2.24c-.302-1.984 0-5.289 4.213-8.034 6.483-4.238 8.997-7.679 8.997-7.679s.133-2.518-3.837-3.709c-3.969-1.19-20.112-7.678-20.112-7.678l-.542 2.252 12.736 8.994s-6.35 5.155-11.388 5.03c0 0 .935 3.84-3.563 3.973z"
      />
      <Path
        fill="#000"
        d="M88.064 73.244c-.313-1-.558-2.02-.733-3.05l-7.017 1.748a6.855 6.855 0 01-.16 3.817c2.933.738 6.05-.253 7.91-2.515z"
        opacity={0.1}
      />
      <Path
        fill="#B97A59"
        d="M82.263 76a7.386 7.386 0 007.382-7.389 7.386 7.386 0 00-7.382-7.389 7.386 7.386 0 00-7.383 7.39A7.386 7.386 0 0082.263 76z"
      />
      <Path
        fill="#000"
        d="M85.97 51.257c2.098.238 4.091 1.145 6.158 1.64a3.042 3.042 0 001.593.062c.802-.251 1.455-1.093 2.287-1.068.511 0 .965.366 1.387.702.676.52 1.313 1.09 1.903 1.705 1.425 1.555 2.308 3.648 3.608 5.34 1.3 1.691 3.35 3.006 5.196 2.23-1.256 4.918-5.37 8.665-9.82 8.971-1.776.12-3.596-.251-5.314.273-.428.175-.88.286-1.34.328-.99 0-1.787-.913-2.404-1.8-1.447-2.088-2.591-4.46-4.22-6.365-.544-.628-1.172-1.227-1.933-1.342-.761-.114-1.46.249-2.137.601-1.118.583-2.26 1.186-3.127 2.187-.868 1-1.414 2.486-1.055 3.825.193.727.633 1.383.642 2.143.016 1.21-1.05 2.098-1.26 3.279-.046.496-.064.994-.051 1.492-.092 1.618-1.145 2.943-2.243 3.96-.43.396-.903.82-1.028 1.431-.084.416 0 .859-.054 1.28-.16 1.049-1.202 1.582-2.124 1.72a6.153 6.153 0 01-3.187-.379c1.29-.615 2.083-2.355 1.784-3.919-.41-2.164-2.575-3.716-2.39-5.921a6.912 6.912 0 01.598-1.949c.472-1.189.815-2.426 1.023-3.689.163-.978.242-2.014-.063-2.943-.272-.85-.84-1.522-1.321-2.238a12.725 12.725 0 01-1.531-3.153 2.196 2.196 0 01-.147-1.041c.106-.425.338-.806.666-1.093 1.183-1.25 2.447-2.55 4.032-2.905a8.908 8.908 0 012.29-.09 26.514 26.514 0 003.978-.17c1.087-.128 2.925-.11 3.847-.82.86-.664 1.343-1.492 2.401-1.913a6.988 6.988 0 013.355-.371zM90.173 129.306s4.895 8.477 3.411 11.083l-3.411-11.083zM98.708 152.528l-6.373-8.22v.143s-.368-2.661.846-1.768c2.659 1.958 6.913 5.166 7.005 5.718.092.553-.862 2.76-1.478 4.127z"
        opacity={0.1}
      />
      <G fill="#000" opacity={0.1}>
        <Path d="M89.354 75.965s.542 2.223-1.205 3.335c2.686-.456 2.806-2.537 2.713-3.44a8.564 8.564 0 01-1.508.105zM39.033 107.297s24.365-13.428 27.953-20.273c2.565-4.913 8.747-7.86 12.03-9.133-2.393.81-10.459 3.861-13.487 9.66-3.574 6.844-27.953 20.275-27.953 20.275l1.457-.529zM94.097 74.918c4.147-1.282 8.11-4.482 8.11-4.482L89.484 61.48l.29-1.225-1.218-.486-.53 2.24 12.715 8.952a30.755 30.755 0 01-6.644 3.958zM94.17 105.258a31.75 31.75 0 014.983-1.252l.022-.254a33.94 33.94 0 00-5.004 1.506zM78.761 119.05h-.116a.24.24 0 01-.272-.038c.088.026.18.039.272.038.434-.251 1.085-2.218-.272-13.598-1.46-12.141-7.205-11.194-10.348-9.797 3.214-.88 7.634-.118 8.891 10.323 1.37 11.38.716 13.347.271 13.598a2.94 2.94 0 001.574-.526zM77.187 119.579a.959.959 0 01-.271-.038.24.24 0 00.271.038z" />
      </G>
      <Path
        fill="#0B4870"
        d="M92.128 52.364a3.042 3.042 0 001.593.06c.802-.248 1.455-1.093 2.287-1.068.511.016.965.366 1.387.702.675.52 1.312 1.09 1.903 1.706 1.425 1.555 2.308 3.648 3.608 5.34 1.3 1.692 3.35 3.007 5.196 2.23-1.256 4.92-5.37 8.667-9.821 8.973-1.776.123-3.595-.248-5.313.274-.428.176-.88.287-1.34.328-.99 0-1.787-.913-2.404-1.802-1.447-2.088-2.591-4.457-4.22-6.362-.544-.632-1.172-1.23-1.933-1.345-.762-.115-1.46.251-2.138.604-1.117.582-2.259 1.183-3.126 2.187-.868 1.003-1.414 2.484-1.055 3.826.193.727.633 1.383.641 2.143.017 1.213-1.05 2.099-1.259 3.28a12.37 12.37 0 00-.051 1.492c-.093 1.618-1.145 2.94-2.243 3.96-.43.394-.903.82-1.028 1.43-.085.418 0 .858-.055 1.281-.16 1.05-1.202 1.583-2.123 1.72a6.096 6.096 0 01-3.187-.38c1.289-.613 2.083-2.356 1.784-3.917-.41-2.165-2.575-3.72-2.39-5.923a6.894 6.894 0 01.598-1.948c.472-1.19.814-2.429 1.022-3.693.163-.976.242-2.011-.062-2.944-.272-.847-.84-1.522-1.322-2.238a12.752 12.752 0 01-1.53-3.151 2.227 2.227 0 01-.147-1.044c.109-.42.34-.796.666-1.08 1.183-1.249 2.447-2.547 4.032-2.905a9.031 9.031 0 012.29-.088 26.89 26.89 0 003.977-.17c1.088-.128 2.926-.111 3.848-.82.86-.66 1.343-1.491 2.4-1.912a7.035 7.035 0 013.356-.386c2.1.24 4.092 1.146 6.159 1.64z"
      />
      <Path
        fill="#fff"
        d="M136.05 140.917c8.446 0 15.293-6.853 15.293-15.306s-6.847-15.305-15.293-15.305c-8.446 0-15.292 6.852-15.292 15.305s6.846 15.306 15.292 15.306z"
      />
      <Path
        fill="#3ACC6C"
        fillRule="evenodd"
        d="M143.556 142.008a20.32 20.32 0 0012.533-18.772c0-11.222-9.09-20.319-20.302-20.319a20.3 20.3 0 00-18.756 12.543 20.332 20.332 0 004.4 22.144 20.29 20.29 0 0022.125 4.404zm4.945-23.089l-15.06 15.073v.011a1.311 1.311 0 01-1.853 0l-8.515-8.519a1.318 1.318 0 010-1.855l1.853-1.865a1.312 1.312 0 011.853 0l5.735 5.753 12.283-12.293a1.303 1.303 0 011.851 0l1.853 1.841a1.308 1.308 0 010 1.854z"
        clipRule="evenodd"
      />
      <Defs>
        <LinearGradient
          id="success_svg__paint0_linear"
          x1={76.797}
          x2={76.797}
          y1={120.666}
          y2={120.529}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="gray" stopOpacity={0.25} />
          <Stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
          <Stop offset={1} stopColor="gray" stopOpacity={0.1} />
        </LinearGradient>
        <LinearGradient
          id="success_svg__paint1_linear"
          x1={112.846}
          x2={112.846}
          y1={158.319}
          y2={50.666}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="gray" stopOpacity={0.25} />
          <Stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
          <Stop offset={1} stopColor="gray" stopOpacity={0.1} />
        </LinearGradient>
      </Defs>
    </Svg>
  );
}
Example #27
Source File: Mobile.tsx    From react-native-crypto-wallet-app with MIT License 4 votes vote down vote up
function SvgMobile(props: SvgProps) {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 286 241" {...props}>
      <Path
        fill="#E0E9F8"
        d="M143 240.4c78.977 0 143-5.149 143-11.5s-64.023-11.5-143-11.5S0 222.549 0 228.9s64.023 11.5 143 11.5z"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M181 223.82c.414.356.867.669 1.363.927 1.314.703 2.821.885 4.344.885.666 0 1.335-.035 1.991-.077 5.256-.403 10.647-1.279 15.229-3.908 4.582-2.628 8.289-7.21 8.693-12.466.135-1.82-.067-3.639.472-5.324 2.426-7.614 16.172-5.391 19.07-12.803 1.617-4.043-1.078-8.827.606-12.803 1.078-2.493 3.706-4.043 5.458-6.132 2.224-2.762 2.965-6.806 1.348-9.906-1.207-2.313-3.839-3.876-6.414-3.876-.876 0-1.745.181-2.548.575-4.043 1.887-5.189 7.546-9.232 9.299-1.237.541-2.602.629-3.991.629-.332 0-.666-.006-1-.01-.334-.005-.667-.01-1-.01-.871 0-1.731.039-2.555.2-.715.364-1.473.681-2.27.926-2.432 1.686-3.129 4.993-4.505 7.741 2.539-.599 5.795-.603 9.795.833 0 0-7.908 6.913-15.619 3.774-2.952 5.588-6.583 10.794-10.998 15.364a78.04 78.04 0 01-3.302 3.19v12.174c.004.455-.018.903-.058 1.348l-.01.148a14.112 14.112 0 01-.221 1.445c-.083.4-.182.793-.298 1.179l-.062.2c-.122.387-.258.768-.413 1.141-.022.052-.046.103-.068.156-.165.384-.342.761-.54 1.127l-.035.062a13.77 13.77 0 01-.646 1.068l-.052.082c-.23.34-.476.666-.734.985-.038.046-.074.094-.113.14a14.168 14.168 0 01-.943 1.028c-.241.237-.486.469-.742.689zM198.566 182.428c-1.44.15-2.928.212-4.342.473-3.303.607-6.874 3.773-5.324 6.738a35.082 35.082 0 00-2.964.786v8.3c5.198-4.67 9.355-10.206 12.63-16.297z"
        clipRule="evenodd"
      />
      <Path
        fill="#99B9EE"
        fillRule="evenodd"
        d="M189.237 197.658c4.415-4.57 8.046-9.777 10.997-15.364 7.713 3.139 15.62-3.773 15.62-3.773-4-1.437-7.256-1.432-9.795-.834a13.24 13.24 0 00-4.509 1.997 84.617 84.617 0 003.816-9.355c1.854.305 3.602.108 5.198-.383a14.306 14.306 0 002.271-.926c4.192-2.137 6.884-5.863 6.928-5.863-7.031-.839-11.172 1.755-13.38 4.008a96.917 96.917 0 001.52-5.626c.363-1.548.688-3.102.981-4.66 8.567-.394 12.696-10.366 12.631-10.366-7.064.842-10.469 4.362-12.07 7.071.554-3.531.944-7.084 1.19-10.647 8.475-.283 12.497-10.172 12.497-10.172-7.74.895-11.022 5.085-12.355 7.802.245-4.735.252-9.484.083-14.227 3.452-7.192-2.35-15.276-2.35-15.34-3.869 8.15-.869 13.571.751 15.668.068 1.856.106 3.735.107 5.634-2.345-5.968-9.294-8.89-9.349-8.836 1.041 9.483 7.074 12.322 9.291 13.052a140.41 140.41 0 01-.597 9.801c-2.095-6.363-9.514-9.442-9.57-9.442 1.023 9.313 6.859 12.216 9.166 13.008a116.912 116.912 0 01-1.55 9.327c-1.486-6.738-8.897-10.466-8.897-10.408.323 9.368 5.934 12.668 8.178 13.617a92.645 92.645 0 01-3.097 10.239c-.986-7.255-9.056-11.322-9.056-11.322.322 9.357 5.921 12.661 8.17 13.614a74.71 74.71 0 01-3.49 7.476c-3.277 6.091-7.433 11.627-12.631 16.296v2.124a78.613 78.613 0 003.301-3.19z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M105 223.82a7.147 7.147 0 01-1.363.927c-1.314.703-2.821.885-4.344.885-.666 0-1.335-.035-1.991-.077-5.256-.403-10.647-1.279-15.229-3.908-4.582-2.628-8.289-7.21-8.693-12.466-.135-1.82.067-3.639-.472-5.324-2.425-7.614-16.172-5.391-19.07-12.803-1.617-4.043 1.078-8.827-.606-12.803-1.078-2.493-3.706-4.043-5.458-6.132-2.224-2.762-2.965-6.806-1.348-9.906 1.207-2.313 3.839-3.876 6.414-3.876.876 0 1.745.181 2.548.575 4.043 1.887 5.189 7.546 9.232 9.299 1.237.541 2.602.629 3.99.629.333 0 .667-.006 1-.01.335-.005.668-.01 1-.01.873 0 1.732.039 2.556.2.715.364 1.474.681 2.27.926 2.432 1.686 3.13 4.993 4.505 7.741-2.54-.599-5.795-.603-9.795.833 0 0 7.908 6.913 15.62 3.774 2.951 5.588 6.582 10.794 10.997 15.364a77.926 77.926 0 003.302 3.19v12.174c-.004.455.018.903.058 1.348l.01.148a14.112 14.112 0 00.221 1.445 13.922 13.922 0 00.36 1.379c.122.387.258.768.413 1.141.022.052.046.103.068.156.165.384.342.761.54 1.127l.035.062c.199.366.415.722.646 1.068l.052.082c.23.34.476.666.734.985.038.046.074.094.113.14a14.168 14.168 0 00.943 1.028c.241.237.486.469.742.689zM87.434 182.428c1.44.15 2.928.212 4.342.473 3.303.607 6.874 3.773 5.324 6.738 1.05.232 2.04.495 2.964.786v8.3c-5.198-4.67-9.355-10.206-12.63-16.297z"
        clipRule="evenodd"
      />
      <Path
        fill="#99B9EE"
        fillRule="evenodd"
        d="M96.763 197.658c-4.415-4.57-8.046-9.777-10.997-15.364-7.713 3.139-15.62-3.773-15.62-3.773 4-1.437 7.256-1.432 9.795-.834a13.247 13.247 0 014.51 1.997 84.559 84.559 0 01-3.817-9.355c-1.854.305-3.602.108-5.198-.383a14.27 14.27 0 01-2.27-.926c-4.193-2.137-6.885-5.863-6.929-5.863 7.031-.839 11.172 1.755 13.38 4.008a97.477 97.477 0 01-1.52-5.626 106.12 106.12 0 01-.98-4.66c-8.568-.394-12.697-10.366-12.632-10.366 7.064.842 10.47 4.362 12.07 7.071a123.373 123.373 0 01-1.19-10.647c-8.475-.283-12.497-10.172-12.497-10.172 7.74.895 11.022 5.085 12.355 7.802-.245-4.735-.252-9.484-.083-14.227-3.452-7.192 2.35-15.276 2.35-15.34 3.87 8.15.87 13.571-.751 15.668a156.803 156.803 0 00-.107 5.634c2.345-5.968 9.294-8.89 9.35-8.836-1.043 9.483-7.076 12.322-9.292 13.052.088 3.241.277 6.517.597 9.801 2.095-6.363 9.514-9.442 9.57-9.442-1.023 9.313-6.859 12.216-9.166 13.008.393 3.124.905 6.242 1.55 9.327 1.486-6.738 8.897-10.466 8.897-10.408-.323 9.368-5.934 12.668-8.178 13.617a92.838 92.838 0 003.097 10.239c.986-7.255 9.056-11.322 9.056-11.322-.322 9.357-5.921 12.661-8.17 13.614a74.515 74.515 0 003.49 7.476c3.277 6.091 7.433 11.627 12.631 16.296v2.124a78.613 78.613 0 01-3.301-3.19z"
        clipRule="evenodd"
      />
      <Path
        fill="#BCD1F3"
        d="M186.428 213.083V62.785c-.001-6.993-5.669-12.661-12.662-12.663h-62.512c-6.993.002-12.661 5.67-12.662 12.663v152.392c-.002 6.991 5.665 12.661 12.658 12.662h62.516c6.993 0 12.662-5.668 12.665-12.66l-.003-2.096z"
      />
      <Path
        fill="#B4C9EB"
        d="M131.048 57.505a1.208 1.208 0 11-1.21-1.206h.004c.666 0 1.206.54 1.206 1.206zM134.336 56.009h22.538c.155 0 .281.126.281.281v2.43a.281.281 0 01-.281.28h-22.538a.281.281 0 01-.281-.28v-2.43c0-.155.126-.281.281-.281zM142.269 225.19a4.819 4.819 0 100-9.638 4.819 4.819 0 000 9.638z"
      />
      <Path fill="#fff" d="M100.871 64.885h83.275v148.188h-83.275z" />
      <Rect width={54.614} height={54.614} x={115.811} y={125.42} fill="#E0E9F8" rx={6.4} />
      <Rect width={54.614} height={54.614} x={111.824} y={122.143} fill="#ECF0F7" rx={6.4} />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M140.87 147.394a3.808 3.808 0 01-1.739.418 3.808 3.808 0 01-1.739-.418l-1.62 10.941h6.718l-1.62-10.941zm-4.213-.491a3.823 3.823 0 114.949 0l1.744 11.773.068.459h-8.574l.068-.459 1.745-11.773z"
        clipRule="evenodd"
      />
      <Path
        fill="#BCD1F3"
        fillRule="evenodd"
        d="M161.469 128.478a1.638 1.638 0 100-3.276 1.638 1.638 0 000 3.276z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M161.141 128.15a1.638 1.638 0 100-3.275 1.638 1.638 0 000 3.275z"
        clipRule="evenodd"
      />
      <Path stroke="#0B4870" strokeWidth={0.5} d="M162.124 125.201l-1.966 2.458" opacity={0.1} />
      <Path
        fill="#BCD1F3"
        fillRule="evenodd"
        d="M161.469 173.262a1.639 1.639 0 10-.002-3.278 1.639 1.639 0 00.002 3.278z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M161.141 172.934a1.638 1.638 0 100-3.275 1.638 1.638 0 000 3.275z"
        clipRule="evenodd"
      />
      <Path stroke="#0B4870" strokeWidth={0.5} d="M162.779 171.296h-3.277" opacity={0.1} />
      <Path
        fill="#BCD1F3"
        fillRule="evenodd"
        d="M117.231 173.262a1.638 1.638 0 100-3.276 1.638 1.638 0 000 3.276z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M116.903 172.934a1.638 1.638 0 10.001-3.277 1.638 1.638 0 00-.001 3.277z"
        clipRule="evenodd"
      />
      <Path stroke="#0B4870" strokeWidth={0.5} d="M116.903 169.657v3.277" opacity={0.1} />
      <Path
        fill="#BCD1F3"
        fillRule="evenodd"
        d="M116.138 128.478a1.638 1.638 0 10.001-3.277 1.638 1.638 0 00-.001 3.277z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M115.811 128.15a1.638 1.638 0 100-3.275 1.638 1.638 0 000 3.275z"
        clipRule="evenodd"
      />
      <Path stroke="#0B4870" strokeWidth={0.5} d="M114.5 125.201l2.458 2.458" opacity={0.1} />
      <Path
        fill="#99B9EE"
        d="M121.616 97.027h-4.042l1.249 3.791-2.399.695-1.348-3.823-3.384 2.496-1.545-1.864 3.451-2.464-3.352-2.307 1.511-1.99 3.319 2.306 1.282-3.823 2.465.79-1.249 3.855h4.042v2.338zM139.457 97.027h-4.042l1.249 3.791-2.399.695-1.348-3.823-3.385 2.496-1.544-1.864 3.45-2.464-3.352-2.307 1.512-1.99 3.319 2.306 1.282-3.823 2.465.79-1.249 3.855h4.042v2.338zM157.297 97.027h-4.042l1.249 3.791-2.399.695-1.347-3.823-3.385 2.496-1.545-1.864 3.451-2.464-3.352-2.307 1.512-1.99 3.319 2.306 1.281-3.823 2.465.79-1.249 3.855h4.042v2.338z"
      />
      <Path
        fill="#C5D6F1"
        d="M175.138 97.027h-4.042l1.249 3.791-2.399.695-1.347-3.823-3.385 2.496-1.545-1.864 3.451-2.464-3.352-2.307 1.511-1.99 3.32 2.306 1.281-3.823 2.465.79-1.249 3.855h4.042v2.338z"
        opacity={0.4}
      />
      <Path
        fill="#FCD2B1"
        d="M73.937 223.819l-.472 2.924a2.405 2.405 0 001.62 2.667l5.023 1.659H68.383l1.419-7.25h4.135z"
      />
      <Path
        fill="#0B4870"
        d="M68.706 229.414l5.797-.299s7.292 1.135 7.338 2.717H67.38l1.325-2.418z"
      />
      <Path
        fill="#FCD2B1"
        d="M105.064 223.819l1.203 3.67a2.66 2.66 0 001.695 1.7l5.693 1.88H101.93l-1.653-7.25h4.787z"
      />
      <Path
        fill="#0B4870"
        d="M101.705 229.414l6.345-.299s7.292 1.135 7.338 2.717h-14.46l.777-2.418z"
      />
      <Path
        fill="#FCD2B1"
        d="M75.907 161.711c-2.123-.115-1.961 1.301-4.664-.88-2.703-2.182.144 3.128.144 3.128s4.69.629 5.03-1.446c.338-2.075 1.232-.709-.51-.802z"
      />
      <Path
        fill="#0B4870"
        d="M75.517 156.149s-2.854 1.899-3.686 9.184c-.832 7.284.325 12.555-.333 16.808v.002c-.658 4.253-1.939 42.914-1.939 42.914h6.23l10.384-68.858-10.656-.05z"
      />
      <Path
        fill="#0B4870"
        d="M89.061 155.372H78.05s-1.361 8.215 1.033 13.004c2.395 4.79 3.677 6.08 4.364 8.863v.001c.687 2.783 17.098 47.817 17.098 47.817h5.311l-16.794-69.685z"
      />
      <Path
        fill="#FFE3CA"
        d="M73.17 132.237s-11.077 15.782-9.805 20.048c.647 2.167 5.613 10.782 8.022 11.674l.124-2.032-.21-.856-2.647-10.807 6.611-11.301-2.095-6.726z"
      />
      <Path
        fill="#FDB32A"
        d="M87.439 132.012l-14.27.225 2.774 21.17c.264 1.377-5.623 8.2-1.963 8.2l16.82.906c.622 0-.462-6.818-.462-7.441v-7.709c1.678-7.443-2.899-15.351-2.899-15.351z"
      />
      <Path fill="#FDB32A" d="M68.754 139.042l4.274 3.746 2.43-4.182-2.288-6.369-4.416 6.805z" />
      <Path
        fill="#FCD2B1"
        d="M84.92 120.365l1.397 3.305s.829 2.456.35 3.892c-.553 1.657-3.044 1.647-3.044 1.647l.748 4.041H78.05v-12.773l6.871-.112z"
      />
      <Path
        fill="#0B4870"
        d="M84.559 121.725a2.304 2.304 0 00.476-3.394c-1.238-1.475-3.376-3.236-6.421-3.019-2.999.213-5.887 2.054-5.95 6.345-.043 2.871-1.518 4.523-2.778 8.456-2.368 7.398 15.448 10.319 15.66.39.1-4.712-3.056-5.549-2.717-7.874a8.202 8.202 0 001.73-.904z"
      />
      <Path
        fill="#FFE3CA"
        d="M118.602 118.655c1.105-3.022.076-4.077-.321-4.555-.081-.098-2.499 4.201-2.731 3.931-.468-.546-.825-1.177-.963-1.002-.628.799-.334 2.1.027 2.93.206.472-.617 1.645-.939 2.046l-12.951 10.007H87.622c-2.7.534-1.369 6.157 1.864 6.028 2.835-.113 10.19-.424 13.409-2.445 3.218-2.021 13.729-14.282 13.729-14.282 1.419-1.077 1.888-2.413 1.978-2.658z"
      />
      <Path
        fill="#FDB32A"
        d="M94.407 132.012l.232 5.687-7.297.688s-3.498-5.185-.274-6.375c1.424-.525 7.339 0 7.339 0z"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M55.13 37.463c6.811 0 12.333-5.522 12.333-12.334 0-6.811-5.522-12.333-12.333-12.333-6.812 0-12.334 5.522-12.334 12.333 0 6.812 5.522 12.334 12.334 12.334z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M66.411 25.223c0 6.169-5.019 11.188-11.188 11.188-6.17 0-11.188-5.019-11.188-11.188 0-6.17 5.019-11.188 11.188-11.188 6.169 0 11.188 5.018 11.188 11.188zM55.223 12C47.92 12 42 17.92 42 25.223c0 7.303 5.92 13.223 13.223 13.223.114 0 .226-.006.339-.009a13.246 13.246 0 002.494-.298 13.219 13.219 0 007.523-4.699 13.161 13.161 0 002.867-8.217c0-3.106-1.074-5.96-2.867-8.217A13.195 13.195 0 0055.223 12z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M55.223 26.534l-4.068-1.908 4.068-6.543 4.068 6.543-4.068 1.908zm0 5.828l-4.068-6.542 4.068 2.663 4.068-2.663-4.068 6.542zm0-18.328c-6.17 0-11.188 5.02-11.188 11.189 0 6.169 5.019 11.188 11.188 11.188 6.169 0 11.188-5.02 11.188-11.188 0-6.17-5.02-11.189-11.188-11.189z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        d="M66.458 12.232L66 11l-.458 1.232c-.385 1.04-1.301 1.917-2.542 2.435 1.24.518 2.157 1.395 2.542 2.434L66 18.333l.458-1.232c.385-1.04 1.301-1.916 2.542-2.434-1.24-.519-2.157-1.396-2.542-2.434z"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M75.743 37.676c-2.834-2.784-6.084-7.704-16.478-4.078-.808.282-1.59.656-2.368 1.032-.916.444-3.754.455-6.661-2.18-4.619-4.19-6.425-7.351-12.754-7.45-7.363-.113-8.521 10.37-14.244 13.054C19.596 39.762 9.988 41.46 8 42.216l71.883.378s-2.567-3.373-4.14-4.918zM269.743 55.676c-2.834-2.784-6.084-7.704-16.478-4.078-.808.282-1.59.656-2.368 1.032-.916.444-3.754.455-6.661-2.18-4.619-4.19-6.425-7.351-12.754-7.45-7.363-.114-8.521 10.37-14.244 13.054-3.642 1.708-13.251 3.405-15.238 4.162l71.883.378s-2.567-3.373-4.14-4.918z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M240.294 5.766c7.713 1.36 12.882 8.741 11.522 16.454-1.36 7.713-8.742 12.882-16.455 11.522-7.713-1.36-12.882-8.742-11.522-16.455 1.36-7.713 8.742-12.881 16.455-11.521zm-5.382 30.52c9.131 1.61 17.838-4.486 19.448-13.617a16.726 16.726 0 00-2.543-12.186 16.735 16.735 0 00-11.074-7.262c-9.113-1.606-17.803 4.464-19.437 13.565l-.011.053c-1.61 9.13 4.487 17.837 13.617 19.447z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M239.503 18.52c.425-.106.729-.466.83-1.037.096-.545-.071-.961-.436-1.194a1.324 1.324 0 00-.484-.18l-1.94-.342-.427 2.422 1.94.342c.186.033.36.027.517-.011zM238.617 23.546c.611-.056 1.039-.45 1.158-1.128.11-.623-.159-1.127-.715-1.385a1.94 1.94 0 00-.489-.15l-1.94-.343-.462 2.62 1.937.36c.181.031.352.04.511.026z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M237.75 11.528l-.283 1.61.911.16.283-1.609 1.985.35-.286 1.621c1.954.478 2.98 1.894 2.66 3.709-.229 1.3-1.061 2.237-2.142 2.415 1.167.536 1.708 1.899 1.425 3.503-.367 2.079-1.967 3.158-4.142 2.847l-.324 1.833-1.984-.35.323-1.83-.912-.16-.322 1.83-1.985-.35.323-1.83-1.479-.261.449-2.548 1.415.25 1.304-7.393-1.415-.25.449-2.548 1.479.26.284-1.609 1.984.35zm-13.911 5.76c-1.36 7.712 3.808 15.094 11.522 16.454 7.713 1.36 15.095-3.809 16.455-11.522 1.36-7.713-3.809-15.094-11.522-16.454-7.713-1.36-15.095 3.808-16.455 11.521z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M236.631 20.54l1.94.342c.181.032.344.083.489.15.556.259.825.762.716 1.386-.12.678-.548 1.072-1.159 1.127-.159.014-.33.006-.511-.026l-1.937-.36.462-2.619zm.841-4.773l1.941.342c.186.032.349.093.483.18.365.232.533.648.437 1.193-.101.572-.405.932-.83 1.038a1.25 1.25 0 01-.518.01l-1.94-.341.427-2.422zm-1.99-2.98l-1.479-.26-.449 2.549 1.415.25-1.304 7.392-1.415-.25-.449 2.547 1.479.261-.323 1.83 1.985.35.323-1.83.911.16-.323 1.831 1.984.35.323-1.834c2.176.311 3.777-.767 4.143-2.847.283-1.604-.258-2.966-1.425-3.503 1.081-.177 1.913-1.114 2.142-2.414.32-1.816-.706-3.231-2.66-3.709l.286-1.621-1.985-.35-.283 1.61-.911-.161.283-1.61-1.984-.35-.284 1.61z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        d="M224.458 29.233L224 28l-.458 1.233c-.385 1.038-1.301 1.915-2.542 2.434 1.241.518 2.157 1.395 2.542 2.434l.458 1.232.458-1.232c.385-1.04 1.301-1.916 2.542-2.434-1.241-.519-2.157-1.396-2.542-2.434zM257.494 2.04L256.766 0l-.726 2.04c-.613 1.718-2.069 3.17-4.04 4.027 1.971.857 3.427 2.308 4.04 4.027l.726 2.04.728-2.04c.612-1.719 2.068-3.17 4.039-4.027-1.971-.858-3.427-2.31-4.039-4.028z"
      />
    </Svg>
  );
}
Example #28
Source File: Idea.tsx    From react-native-crypto-wallet-app with MIT License 4 votes vote down vote up
function SvgIdea(props: SvgProps) {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 318 214" {...props}>
      <Path
        fill="#E3EAF8"
        fillRule="evenodd"
        d="M311.12 174.688s3.993-26.245-21.671-39.132c-25.663-12.886-30.797-24.431-13.321-54.419C293.603 51.15 292.167 1.034 195.62.8 99.073.567 115.45 94.52 72.472 74.748c-42.978-19.773-89.537 35.519-66.258 67.849 4.259 5.914 7.77 12.514 11.019 16.805 8.59 11.348 15.415 15.525 15.415 15.525l278.472-.239z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M78.49 21.868c7.098-3.31 15.566-.228 18.876 6.87 3.31 7.099.228 15.566-6.87 18.876-7.099 3.31-15.566.228-18.876-6.87-3.31-7.098-.228-15.566 6.87-18.876zm13.098 28.088c8.402-3.918 12.038-13.907 8.12-22.31a16.723 16.723 0 00-9.074-8.523 16.734 16.734 0 00-13.236.404c-8.386 3.91-12.023 13.867-8.141 22.26l.021.049c3.919 8.403 13.907 12.038 22.31 8.12z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M85.158 32.77c.287-.331.33-.8.085-1.327-.234-.501-.61-.745-1.043-.727-.16.007-.328.05-.5.13l-1.785.833 1.04 2.229 1.785-.833c.172-.08.311-.184.418-.306zM87.314 37.394c.47-.396.594-.963.302-1.588-.267-.573-.777-.832-1.38-.724-.157.027-.32.08-.487.157l-1.785.833 1.124 2.41 1.793-.816c.167-.078.311-.17.433-.272z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M79.712 28.047l.69 1.482.839-.391-.69-1.481 1.825-.852.696 1.492c1.875-.73 3.528-.158 4.307 1.512.558 1.197.413 2.442-.37 3.207 1.264-.23 2.488.576 3.176 2.052.893 1.913.2 3.715-1.76 4.708l.787 1.688-1.827.851-.785-1.684-.838.39.785 1.685-1.826.852-.785-1.685-1.362.635-1.093-2.344 1.303-.607-3.173-6.804-1.302.607-1.094-2.345 1.361-.635-.69-1.48 1.826-.852zM71.62 40.745c3.31 7.099 11.777 10.18 18.876 6.87 7.098-3.31 10.18-11.777 6.87-18.875-3.31-7.099-11.778-10.18-18.876-6.87-7.098 3.31-10.18 11.777-6.87 18.875z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M83.964 36.072l1.785-.833c.167-.078.33-.13.487-.157.604-.108 1.113.15 1.38.724.292.624.167 1.192-.302 1.588a1.954 1.954 0 01-.433.272l-1.793.816-1.124-2.41zm-2.049-4.393l1.786-.833c.17-.08.339-.123.499-.13.433-.019.809.226 1.043.727.245.526.202.996-.085 1.326a1.249 1.249 0 01-.418.306l-1.786.833-1.039-2.23zm-3.339-1.299l-1.36.635 1.093 2.345 1.302-.607 3.173 6.803-1.303.608 1.094 2.344 1.36-.635.786 1.685 1.826-.852-.785-1.684.838-.391.786 1.684 1.826-.851-.787-1.688c1.96-.993 2.653-2.795 1.76-4.708-.688-1.476-1.912-2.282-3.176-2.052.783-.765.927-2.01.37-3.207-.78-1.67-2.432-2.242-4.307-1.512l-.696-1.492-1.826.851.69 1.482-.838.39-.69-1.48-1.827.851.691 1.481z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M37.236 128.786c4.7 0 8.523 3.824 8.523 8.523s-3.824 8.522-8.523 8.522c-4.7 0-8.522-3.823-8.522-8.522s3.823-8.523 8.522-8.523zm0 18.595c5.563 0 10.073-4.509 10.073-10.072 0-2.689-1.056-5.13-2.773-6.936a10.04 10.04 0 00-7.3-3.137c-5.552 0-10.054 4.493-10.071 10.041l-.001.032c0 5.563 4.51 10.072 10.072 10.072z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M38.098 136.405c.24-.107.382-.351.382-.699 0-.332-.142-.561-.382-.66a.789.789 0 00-.305-.056h-1.182v1.476h1.182a.753.753 0 00.305-.061zM38.098 139.467c.355-.097.567-.374.567-.787 0-.38-.212-.649-.567-.744a1.163 1.163 0 00-.305-.038h-1.182v1.596l1.182.011c.11 0 .212-.013.305-.038z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M36.334 132.457v.98h.555v-.98h1.209v.987c1.204.079 1.958.809 1.958 1.914 0 .793-.394 1.433-1.014 1.651.745.195 1.207.944 1.207 1.921 0 1.267-.834 2.071-2.151 2.114v1.117h-1.21v-1.115h-.554v1.115h-1.21v-1.115h-.9v-1.552h.862v-4.504h-.862v-1.553h.9v-.98h1.21zm-7.62 4.852c0 4.699 3.823 8.522 8.522 8.522 4.7 0 8.523-3.823 8.523-8.522s-3.823-8.523-8.523-8.523c-4.7 0-8.522 3.824-8.522 8.523z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M36.611 137.898h1.182c.11 0 .212.013.305.038.355.095.567.364.567.744 0 .413-.212.69-.567.787a1.165 1.165 0 01-.305.038l-1.182-.011v-1.596zm0-2.908h1.182c.114 0 .216.019.305.056.24.099.382.328.382.66 0 .348-.142.592-.382.699a.753.753 0 01-.305.06h-1.182v-1.475zm-1.486-1.553h-.901v1.553h.862v4.504h-.862v1.552h.9v1.115h1.21v-1.115h.555v1.115h1.209v-1.117c1.318-.043 2.15-.847 2.15-2.114 0-.977-.46-1.726-1.206-1.921.62-.218 1.014-.858 1.014-1.651 0-1.105-.754-1.835-1.958-1.914v-.988h-1.21v.981h-.554v-.981h-1.21v.981z"
        clipRule="evenodd"
      />
      <Path fill="#C5D6F1" d="M119.365 142.972h12.502v31.388h-12.502z" opacity={0.5} />
      <Path fill="#BCD1F3" d="M147.537 115.418h12.503v58.943h-12.503z" />
      <Path fill="#C5D6F1" d="M175.712 121.513h12.502v52.847h-12.502z" opacity={0.5} />
      <Path fill="#BCD1F3" d="M203.885 91.675h12.503v82.686h-12.503z" />
      <Path
        fill="#FA968C"
        d="M146.717 40.186c-.064-1.07-1.914-3.248-1.632-3.52.203-.197.924.477 1.312.87a.166.166 0 00.282-.102c.085-1.051.348-3.992.641-4.02.298-.028.446 1.833.488 2.457a.039.039 0 00.034.037.04.04 0 00.043-.027c.229-.66 1-2.794 1.331-2.52.315.26-.174 2.304-.376 3.09a.04.04 0 00.024.047c.018.007.039 0 .05-.018.398-.704 1.448-2.49 1.731-2.261.289.232-.524 2.167-.826 2.854a.04.04 0 00.015.05.04.04 0 00.052-.008c.455-.513 1.645-1.822 1.638-1.438-.008.476-2.099 4.43-2.784 5.092-.685.663-2.023-.583-2.023-.583z"
      />
      <Path
        fill="#FA968C"
        d="M127.943 53.421c1.418 3.14 3.457 6.708 5.924 9.156 4.798 4.75 10.957 3.509 13.107-7.598.374-1.674.635-3.34.854-5.004.447-3.323.62-6.635.773-9.938a.907.907 0 00-1.793-.222l-.004.018c-.65 3.207-1.304 6.407-2.143 9.52-.431 1.55-.878 3.088-1.399 4.57-.451 1.405-2.265 5.767-3.675 6.194-.047-.007-.093.053-.12.027-.026-.024-.039-.026-.055-.012-.026-.035-.044-.05-.067-.045-.078-.063-.169-.074-.336-.21-.307-.2-.728-.599-1.127-1.095-.819-.97-1.581-2.252-2.252-3.583-1.163-2.257-1.837-3.88-1.837-3.88-1.433-3.928-7.373-2.047-5.939 1.885.027.071.058.149.089.217z"
      />
      <Path
        fill="#FFBE55"
        d="M137.463 57.648l-.016-.023a38.437 38.437 0 01-2.016-3.304c-.614-1.11-1.24-2.341-1.678-3.39l-.022-.052a3.166 3.166 0 10-5.72 2.7 39.778 39.778 0 002.348 3.888c.572.824 1.18 1.624 1.807 2.411.466-.498 4.183-1.83 5.297-2.23z"
      />
      <Path
        fill="#FAB9AF"
        d="M134.363 79.634c-2.755 3.16-18.653 4.48-18.653 4.48-1.173-1.362.542-7.552.956-13.835.447-6.793.705-14.29.823-18.342a3.088 3.088 0 013.09-2.998h10.089a2.982 2.982 0 012.977 2.736c.265 3.208.726 8.783 1.18 14.249.46 5.546 1.918 10.978-.462 13.71z"
      />
      <Path
        fill="#FA968C"
        d="M125.192 132.449l.023 6.253-.544 3.045a.874.874 0 00.832 1.031c2.56.079 9.115.252 9.29-.032.824-1.334-2.901-1.847-5.627-2.902-2.725-1.054-.845-11.403-.845-11.403l-3.129 4.008z"
      />
      <Path
        fill="#0B4870"
        d="M129.166 139.844c-.014-.005-.027-.015-.041-.021a6.253 6.253 0 01-2.204.385 6.41 6.41 0 01-1.925-.283l-.325 1.822a.874.874 0 00.832 1.031c2.56.079 9.115.252 9.29-.032.824-1.333-2.902-1.847-5.627-2.902z"
      />
      <Path
        fill="#0091C8"
        d="M134.359 81.913c.098 4.347-1.611 31.92-4.988 31.996-3.376.077-7.141-27.372-7.24-31.719-.098-4.346 2.559-7.931 5.935-8.007 3.377-.077 6.194 3.384 6.293 7.73z"
      />
      <Path
        fill="#0B4870"
        d="M124.708 108.181c-.335 2.393-.389 17.721.149 25.508h3.074c1.651-7.554 3.415-22.193 3.742-24.532l.01-.089c1.837-8.126 2.748-23.95 2.676-27.155-.099-4.346-2.916-7.807-6.292-7.73-3.377.076-6.034 3.662-5.935 8.007.061 2.73 2.735 24.858 2.576 25.991z"
      />
      <Path
        fill="#FA968C"
        d="M117.814 132.449l.023 6.253-.543 3.045a.873.873 0 00.832 1.031c2.559.079 9.114.252 9.29-.032.824-1.334-2.901-1.847-5.627-2.902-2.725-1.054-.845-11.403-.845-11.403l-3.13 4.008z"
      />
      <Path
        fill="#0B4870"
        d="M121.789 139.844c-.015-.005-.027-.015-.041-.021a6.261 6.261 0 01-2.204.385 6.406 6.406 0 01-1.925-.283l-.325 1.822a.873.873 0 00.832 1.031c2.559.079 9.114.252 9.29-.032.824-1.333-2.901-1.847-5.627-2.902z"
      />
      <Path
        fill="#0091C8"
        d="M126.982 81.913c.098 4.347-1.611 31.92-4.988 31.996-3.376.077-6.41-27.474-6.509-31.82-.099-4.346 1.828-7.83 5.204-7.906 3.377-.077 6.194 3.384 6.293 7.73z"
      />
      <Path
        fill="#0B4870"
        d="M117.331 108.181c-.336 2.393-.39 17.721.149 25.508h3.073c1.651-7.554 3.415-22.193 3.743-24.532l.01-.089c1.836-8.126 3.478-24.051 3.406-27.256-.099-4.346-3.646-7.706-7.023-7.63-3.376.078-5.303 3.561-5.204 7.907.062 2.729 2.004 24.959 1.846 26.092z"
      />
      <Path
        fill="#FFBE55"
        d="M130.763 48.94h-1.639c-.571 1.32-1.779 2.342-3.653 2.342-1.877 0-3.084-1.021-3.654-2.343h-1.496a2.82 2.82 0 00-2.825 2.739c-.114 3.983-.373 11.66-.83 18.602-.414 6.282-2.129 12.12-.956 13.834 0 0 15.898-1.32 18.652-4.48 2.381-2.731.923-8.164.462-13.71-.459-5.519-.924-11.15-1.187-14.342a2.88 2.88 0 00-2.874-2.643z"
      />
      <Path
        fill="#0B4870"
        d="M125.037 45.267a2.866 2.866 0 01-3.419-2.175l-.815-3.664 2.797-.622 1.437 6.462z"
      />
      <Path fill="#FAB9AF" d="M127.535 48.94h-5.275l1.521-5.26 3.596.445.158 4.814z" />
      <Path
        fill="#FA968C"
        d="M127.377 44.125l-3.596-.445-.708 2.45c.805.908 1.998 2.317 3.307 2.317.415 0 .793-.117 1.133-.333l-.136-3.99z"
      />
      <Path
        fill="#FAB9AF"
        d="M127.922 46.92a4.393 4.393 0 01-5.242-3.335l-1.063-4.777 7.356-1.635s.829 3.729.853 6.365c.017 1.978-.697 3.113-1.904 3.382z"
      />
      <Path fill="#41378C" d="M121.646 40.731l1.383-.307.139.627-1.382.307-.14-.627z" />
      <Path
        fill="#FAB9AF"
        d="M123.726 42.404c.207.932-.071 1.788-.622 1.91-.55.122-1.429-.965-1.636-1.897-.207-.931.336-1.356.886-1.479.55-.122 1.164.534 1.372 1.466z"
      />
      <Path
        fill="#0B4870"
        d="M129.919 39.024a4.233 4.233 0 00-.301-1.855c-.592-1.46-2.226-2.087-3.712-1.57a4.282 4.282 0 01-.483.137l-2.483.55a2.766 2.766 0 00-2.101 3.302l.129.578 1.472.854.6 1.045.097-.022a.915.915 0 00.705-1.033c-.122-.78.265-1.542 1.036-1.713l2.203-.49c1.341-.299 2.199.266 2.422 1.27l.12.863.296-1.916z"
      />
      <Path
        fill="#0B4870"
        d="M122.491 37.282c-.168 1.363 4.73 3.09 6.021 3.249 1.292.16 2.476-.816 2.644-2.179.168-1.362-.742-2.597-2.034-2.756-1.292-.16-6.462.323-6.631 1.686z"
      />
      <Path
        fill="#FAB9AF"
        d="M116.895 54.082c1.625 2.214 4.41 5.127 7.744 7.641 10.199 7.438 21.113 8.19 30.014-.23a.908.908 0 00-1.077-1.445l-.041.024c-5.804 3.35-11.002 4.725-17.545 1.976-8.578-3.696-14.664-12.59-14.024-11.741a3.16 3.16 0 00-5.071 3.775z"
      />
      <Path
        fill="#FFBE55"
        d="M126.646 55.413c-2.124-1.906-4.825-5.662-4.825-5.662s-1.28-1.513-3.915-.41c-2.104.882-1.678 3.368-1.678 3.368.051.346.754 4.447 5.592 8.074 0 0 5.182-5.05 4.826-5.37zM161.547 10.159c-11 .013-19.93 8.931-19.93 19.933 0 5.288 2.69 9.853 5.415 13.946 6.021 9.044 2.6 13.943 6.075 13.943h16.902c3.478 0 .047-4.9 6.07-13.943 2.724-4.092 5.407-8.515 5.407-13.8.002-11.005-8.938-20.066-19.939-20.08z"
      />
      <Path
        fill="#0B4870"
        fillRule="evenodd"
        d="M151.831 37.578a.622.622 0 00-.871-.1.62.62 0 00-.098.871c.109.137.234.27.369.4l6.61 20.168a.622.622 0 00.783.395.619.619 0 00.394-.782l-6.106-18.634c1.482.723 3.337 1.054 4.849.573.327-.105.624-.243.893-.412a4.762 4.762 0 002.603.773c1.135 0 2.208-.364 3.021-1.013.454.243.98.443 1.567.59 1.733.44 3.266.334 4.543-.29l-6.038 18.414a.622.622 0 001.18.387l6.62-20.202a1.54 1.54 0 01.079-.086c.032-.033.064-.066.093-.103a.62.62 0 00-.105-.87.617.617 0 00-.869.105c-1.198 1.53-2.948 2.017-5.199 1.446a6.16 6.16 0 01-1.004-.348 3.296 3.296 0 00.528-1.929c-.054-1.346-.511-2.334-1.254-2.712a1.28 1.28 0 00-1.317.075c-.652.434-.971 1.424-.872 2.712.061.782.402 1.477.986 2.048-1.014.633-2.538.701-3.628.116.414-.584.655-1.32.703-2.179.067-1.203-.305-2.177-.993-2.603a1.356 1.356 0 00-1.411-.032c-.703.396-1.091 1.348-1.071 2.61.013.816.329 1.583.852 2.215-.091.04-.185.076-.285.107-1.85.589-4.552-.453-5.552-1.71zm11.961-2.255l.004-.003c.009-.006.015-.01.024-.01.009 0 .021.004.038.013.182.092.534.557.578 1.659.02.417-.098.83-.33 1.203-.344-.328-.598-.748-.638-1.276-.074-.956.152-1.473.324-1.586zm-5.226.089a.122.122 0 00-.067.021c-.172.097-.458.525-.442 1.515.008.52.219 1.02.567 1.44.253-.386.399-.876.43-1.465.052-.938-.231-1.373-.405-1.483a.176.176 0 00-.083-.028z"
        clipRule="evenodd"
      />
      <Path
        fill="#0B4870"
        d="M168.566 57.981h-14.044c-.815 0-1.475 1.501-1.475 2.318 0 .816.661 2.317 1.475 2.317h4.707l-5.155.961c-.774.25-1.199.728-.948 1.503.201.625.781.845 1.405.845.15 0 .303-.114.455-.16l14.039-4.6c.689-.223 1.115-1.069 1.002-1.786-.116-.718-.734-1.398-1.461-1.398zM168.549 68.41h-4.693l5.149-2.327c.774-.25 1.199-1.411.948-2.188-.252-.773-1.083-1.365-1.86-1.113l-14.027 4.47c-.692.226-1.116 1.218-1.003 1.935.112.718.733 1.541 1.459 1.541h1.276l2.231 3.477h6.96l2.267-3.477h1.293c.816 0 1.475-.344 1.475-1.159 0-.815-.659-1.158-1.475-1.158z"
      />
      <Path
        fill="#BCD1F3"
        d="M120.457 127.171l-7.097-8.478 34.574-29.063 30.065 5.011 34.11-26.346 1.376 1.235-32.524 36.207-29.497-6.408-31.007 27.842z"
      />
      <Path fill="#BCD1F3" d="M213.972 85.785l-19.781-18.969 25.537-6.833-5.756 25.802z" />
      <Path
        fill="#FAB9AF"
        d="M152.93 60.454c.698-.813.881-3.665 1.273-3.665.282 0 .333.984.339 1.538a.165.165 0 00.274.122c.791-.697 3.023-2.63 3.254-2.445.233.186-.953 1.627-1.357 2.105a.039.039 0 00-.001.051.04.04 0 00.049.011c.624-.316 2.661-1.314 2.709-.887.045.406-1.726 1.536-2.418 1.96a.04.04 0 00-.016.05.04.04 0 00.048.023c.776-.23 2.772-.784 2.817-.423.046.368-1.884 1.194-2.577 1.478a.039.039 0 00-.024.046c.004.02.022.033.041.03.684-.053 2.45-.166 2.178.106-.337.336-4.588 1.726-5.54 1.726s-1.049-1.826-1.049-1.826z"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M57.6 101.309c6.848 0 12.4-5.552 12.4-12.4 0-6.848-5.552-12.4-12.4-12.4-6.848 0-12.4 5.552-12.4 12.4 0 6.848 5.552 12.4 12.4 12.4z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M46.145 88.845c0-6.28 5.11-11.391 11.391-11.391s11.392 5.11 11.392 11.391-5.11 11.392-11.392 11.392c-6.281 0-11.391-5.11-11.391-11.392zm11.425 13.463a13.405 13.405 0 006.184-1.522 13.518 13.518 0 006.824-8.585c.275-1.073.422-2.197.422-3.356 0-.917-.093-1.812-.268-2.678-1.241-6.152-6.677-10.785-13.196-10.785-7.436 0-13.463 6.028-13.463 13.463 0 4.464 2.174 8.418 5.518 10.868a13.402 13.402 0 007.945 2.596l.034-.001z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M52.352 83.952a2.295 2.295 0 013.127.063c.716.705.864 1.764.449 2.618l.619.619a2.806 2.806 0 002.317.801l.87-.104a2.276 2.276 0 011.97-1.782 2.295 2.295 0 012.497 1.884 2.277 2.277 0 01-4.29 1.372l-.122.015a2.804 2.804 0 00-2.41 2.205 2.275 2.275 0 01-1.747 4.152 2.295 2.295 0 01-1.654-2.655 2.275 2.275 0 011.949-1.805l.14-.662a2.804 2.804 0 00-.76-2.562l-.43-.428a2.276 2.276 0 01-2.525-3.73zm16.576 4.893c0-6.28-5.11-11.391-11.392-11.391-6.28 0-11.391 5.11-11.391 11.391s5.11 11.392 11.391 11.392c6.282 0 11.392-5.11 11.392-11.392z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M229.451 45.481c5.899-2.147 8.941-8.67 6.794-14.569-2.147-5.899-8.67-8.94-14.569-6.793-5.899 2.147-8.941 8.67-6.793 14.569 2.147 5.899 8.669 8.94 14.568 6.793z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M215.676 38.337c-1.969-5.411.831-11.415 6.241-13.385 5.411-1.969 11.415.831 13.384 6.242 1.969 5.41-.83 11.414-6.241 13.384-5.411 1.969-11.415-.831-13.384-6.242zm14.062 8.014a12.278 12.278 0 004.85-3.25 12.386 12.386 0 003.187-9.534 12.409 12.409 0 00-1.759-5.246c-2.999-4.91-9.134-7.197-14.748-5.153-6.406 2.331-9.708 9.413-7.377 15.818a12.325 12.325 0 008.161 7.631c2.43.707 5.098.677 7.658-.255l.028-.011z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M219.489 32.176a2.104 2.104 0 012.713-.927 2.087 2.087 0 011.208 2.115l.727.339c.715.333 1.543.32 2.247-.036l.716-.363a2.088 2.088 0 011.139-2.153 2.104 2.104 0 012.742.84 2.087 2.087 0 01-3.266 2.528l-.1.05a2.572 2.572 0 00-1.385 2.655 2.084 2.084 0 01-.203 4.124 2.104 2.104 0 01-2.257-1.768 2.085 2.085 0 011.113-2.166l-.087-.614a2.57 2.57 0 00-1.459-1.968l-.503-.235a2.086 2.086 0 01-3.345-2.421zm15.812-.982c-1.969-5.41-7.973-8.21-13.384-6.241-5.41 1.969-8.21 7.973-6.241 13.384 1.969 5.41 7.973 8.21 13.384 6.24 5.411-1.969 8.21-7.973 6.241-13.383z"
        clipRule="evenodd"
      />
      <Path
        fill="#BCD1F3"
        fillRule="evenodd"
        d="M318 174.751H8.108a.105.105 0 00-.108.102c0 .056.048.102.107.102H317.976l.024-.204z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M91.869 150.141c6.58-1.763 10.484-8.526 8.721-15.105-1.763-6.58-8.526-10.485-15.106-8.722S75 134.84 76.763 141.42s8.526 10.484 15.106 8.721z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M99.598 135.398c1.597 5.959-1.953 12.106-7.911 13.703-5.96 1.596-12.107-1.952-13.703-7.912-1.597-5.958 1.952-12.106 7.911-13.702 5.959-1.597 12.106 1.952 13.703 7.911zm-14.23-9.877c-7.053 1.891-11.24 9.141-9.35 16.195 1.89 7.054 9.141 11.241 16.195 9.35.11-.029.217-.063.325-.096.82-.242 1.6-.555 2.333-.934a13.22 13.22 0 006.05-6.485 13.162 13.162 0 00.642-8.679 13.162 13.162 0 00-4.896-7.196 13.199 13.199 0 00-11.298-2.155z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M89.13 139.56l-4.423-.79 2.236-7.373 5.623 5.267-3.436 2.896zm1.509 5.63l-5.623-5.266 4.619 1.518 3.24-3.624-2.236 7.372zm-4.744-17.703c-5.959 1.596-9.508 7.744-7.911 13.702 1.597 5.959 7.743 9.508 13.703 7.912 5.958-1.597 9.508-7.744 7.91-13.703-1.596-5.959-7.743-9.508-13.702-7.911z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M260.509 87.33c5.483-1.47 8.737-7.105 7.267-12.588-1.469-5.483-7.105-8.737-12.588-7.268-5.483 1.47-8.737 7.105-7.267 12.588 1.469 5.483 7.105 8.737 12.588 7.268z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M266.95 75.044c1.33 4.966-1.627 10.088-6.593 11.419-4.966 1.33-10.088-1.627-11.419-6.593-1.331-4.966 1.627-10.088 6.593-11.419 4.966-1.33 10.088 1.627 11.419 6.593zm-11.858-8.23c-5.878 1.575-9.367 7.617-7.792 13.495 1.575 5.879 7.618 9.367 13.496 7.792.092-.025.181-.053.271-.08a11.03 11.03 0 001.943-.779 11.012 11.012 0 005.042-5.404 10.967 10.967 0 00.536-7.233 10.97 10.97 0 00-4.08-5.996 10.997 10.997 0 00-9.416-1.796z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M258.227 78.512l-3.687-.658 1.864-6.144 4.686 4.389-2.863 2.413zm1.257 4.692l-4.686-4.389 3.849 1.266 2.7-3.02-1.863 6.143zm-3.953-14.753c-4.966 1.33-7.923 6.453-6.593 11.419 1.331 4.966 6.453 7.923 11.419 6.593s7.923-6.453 6.593-11.42c-1.331-4.965-6.454-7.923-11.419-6.592z"
        clipRule="evenodd"
      />
      <Rect
        width={29.309}
        height={21.982}
        x={229.147}
        y={142.838}
        fill="#D4DFF4"
        rx={4}
        transform="rotate(-20 229.147 142.838)"
      />
      <Path
        stroke="#D4DFF4"
        strokeWidth={4}
        d="M237.886 141.959l-.002-.007-.013-.035-.013-.035-.013-.035-.013-.036-.006-.018-.007-.018-.013-.036-.013-.036-.007-.018-.006-.018-.013-.037-.014-.036-.027-.074-.027-.074-.027-.074-.027-.075-.027-.076-.056-.152-.056-.153-.056-.155-.056-.155-.057-.155-.057-.156-.007-.02-.007-.019-.007-.02-.007-.019-.007-.02-.007-.019-.007-.02-.007-.019-.007-.02-.008-.019-.007-.02-.007-.019-.007-.019-.007-.02-.007-.019-.007-.02-.007-.019-.007-.02-.007-.019-.007-.019-.007-.02-.007-.019-.007-.019-.007-.02-.007-.019-.007-.019-.007-.02-.007-.019-.008-.019-.007-.019-.006-.02-.007-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.02-.007-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.018-.006-.019-.007-.019-.007-.019-.007-.019-.007-.019-.007-.018-.006-.019-.007-.019-.007-.018-.007-.019-.007-.019-.006-.018-.007-.019-.007-.018-.007-.019-.006-.018-.007-.018-.007-.019-.006-.018-.007-.018-.007-.019-.006-.018-.007-.018-.006-.018-.007-.018-.007-.018-.006-.019-.007-.018-.006-.017-.007-.018-.006-.018-.007-.018-.006-.018-.007-.018-.006-.017-.007-.018-.006-.018-.006-.017-.007-.018-.006-.017-.007-.018-.006-.017-.006-.017-.006-.018-.007-.017-.006-.017-.006-.017-.006-.017-.007-.017-.006-.017-.006-.017-.006-.017-.006-.017-.006-.017-.006-.016-.007-.017-.006-.017-.006-.016-.006-.017-.006-.016-.006-.017-.005-.016-.006-.016-.006-.016-.006-.017-.006-.016-.006-.016-.006-.016-.005-.016-.006-.015-.006-.016-.006-.016-.005-.016-.006-.015-.006-.016-.005-.015-.006-.016-.006-.015-.005-.015-.006-.015-.005-.016-.006-.015-.005-.015-.006-.014-.005-.015-.005-.015-.006-.015-.005-.014-.005-.015-.006-.015-.005-.014-.005-.014-.005-.015-.005-.014-.006-.014-.005-.014-.005-.014-.005-.014-.005-.014-.005-.013-.005-.014-.005-.014-.005-.013-.005-.014-.004-.013-.005-.013-.005-.013-.005-.013-.005-.013-.004-.013-.005-.013-.005-.013-.004-.013-.005-.012-.004-.013-.005-.012-.004-.013-.005-.012-.004-.012-.005-.012-.004-.012-.004-.012-.005-.012-.004-.011-.004-.012-.004-.011-.004-.012-.005-.011-.004-.012-.004-.011-.004-.011-.004-.011-.004-.011-.004-.01-.003-.011-.004-.011-.004-.01-.004-.01-.004-.011-.003-.01-.004-.01-.004-.01-.003-.01-.004-.01-.003-.009-.004-.01-.003-.009-.004-.01-.003-.009-.003-.009-.004-.009-.003-.009-.003-.009-.003-.009-.003-.008-.004-.009-.003-.008-.003-.009-.003-.008-.003-.008-.002-.008-.003-.008-.003-.007-.003-.008-.003-.008-.002-.007-.003-.007-.003-.008-.002-.007-.003-.007-.002-.006-.003-.007-.002-.007-.002-.006-.003-.007-.002-.006-.002-.006-.002-.006-.003-.006-.002-.006-.002-.005-.002-.006-.002-.005-.002-.006-.002-.005-.001-.005-.002-.005-.002-.004-.002-.005-.001-.005-.002-.004-.001-.004-.002-.004-.001-.004a6.14 6.14 0 1111.542-4.201l.002.005.002.006.002.005.002.006.002.006.002.006.002.006.003.006.002.007.002.006.003.007.002.007.003.006.002.007.003.007.002.007.003.008.003.007.002.008.003.007.003.008.003.008.003.008.003.008.003.008.003.008.003.008.003.009.003.008.003.009.003.009.003.008.004.009.003.009.003.01.004.009.003.009.003.01.004.009.003.01.004.009.003.01.004.01.004.01.003.01.004.011.004.01.004.01.004.011.003.01.004.011.004.011.004.011.004.011.004.011.004.011.004.011.004.011.005.012.004.011.004.012.004.012.004.011.005.012.004.012.005.012.004.012.004.012.005.013.004.012.005.012.004.013.005.013.005.012.004.013.005.013.005.013.004.013.005.013.005.013.005.013.005.013.004.014.005.013.005.014.005.013.005.014.005.014.005.014.005.014.005.014.005.014.006.014.005.014.005.014.005.014.005.015.006.014.005.015.005.014.006.015.005.015.005.015.006.015.005.014.006.015.005.016.006.015.005.015.006.015.005.015.006.016.006.015.005.016.006.015.005.016.006.016.006.015.006.016.005.016.006.016.006.016.006.016.006.016.006.016.006.016.005.017.006.016.006.016.006.017.006.016.006.017.006.016.006.017.006.016.007.017.006.017.006.017.006.017.006.017.006.017.006.017.007.017.006.017.006.017.006.017.007.017.006.018.006.017.007.017.006.018.006.017.007.018.006.017.006.018.007.017.006.018.007.018.006.017.007.018.006.018.007.018.006.018.007.018.006.017.007.018.006.018.007.019.006.018.007.018.007.018.006.018.007.018.006.019.007.018.007.018.006.018.007.019.007.018.006.019.007.018.007.019.007.018.006.019.007.018.007.019.007.018.006.019.007.019.007.018.007.019.007.019.006.018.007.019.007.019.007.019.007.019.007.018.007.019.006.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.006.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.006.019.007.02.007.019.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.019.007.02.007.019.007.019.007.019.007.019.006.019.007.019.007.019.007.019.007.019.007.018.007.019.007.019.007.019.006.019.007.019.007.019.007.018.007.019.007.019.006.019.007.018.007.019.007.019.007.018.006.019.007.019.007.018.007.019.007.018.006.019.007.018.007.019.006.018.007.019.007.018.006.018.007.019.007.018.006.018.007.018.007.018.006.019.007.018.006.018.007.018.007.018.006.018.007.018.006.018.007.018.006.017.007.018.006.018.007.018.006.017.006.018.007.018.006.017.007.018.006.017.006.018.007.017.006.017.006.018.007.017.006.017.005.015-11.542 4.201z"
      />
      <Path
        fill="#E3EAF8"
        fillRule="evenodd"
        d="M247.373 150.067a4.072 4.072 0 10-2.786-7.652 4.072 4.072 0 002.786 7.652z"
        clipRule="evenodd"
      />
      <Rect
        width={3.257}
        height={6.513}
        x={245.286}
        y={149.094}
        fill="#E3EAF8"
        rx={1}
        transform="rotate(-20 245.286 149.094)"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M253.966 124.539l.534 1.523.534-1.523c.45-1.284 1.518-2.368 2.966-3.008-1.448-.641-2.516-1.724-2.966-3.008L254.5 117l-.534 1.523c-.45 1.284-1.518 2.368-2.966 3.008 1.448.64 2.516 1.724 2.966 3.008z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M203.427 188.637c7.197 0 13.053 4.038 13.053 9.001 0 4.963-5.856 9.002-13.053 9.002-7.198 0-13.053-4.039-13.053-9.002 0-4.963 5.856-9.001 13.053-9.001zm0-1.637c-8.52 0-15.427 4.763-15.427 10.638v4.4c0 5.875 6.907 10.638 15.427 10.638s15.426-4.763 15.426-10.638v-4.387l.001-.013c0-5.875-6.907-10.638-15.427-10.638z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M190.374 197.638c0 4.963 5.855 9.002 13.053 9.002 7.197 0 13.053-4.039 13.053-9.002 0-4.964-5.856-9.001-13.053-9.001-7.197 0-13.053 4.037-13.053 9.001z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M201.856 197.55l1.113 1.349c.105.126.183.253.237.378.207.484.044.948-.467 1.262-.556.341-1.128.329-1.593.002a1.722 1.722 0 01-.338-.316l-1.098-1.358 2.146-1.317zm3.913-2.402l1.113 1.349c.107.13.178.262.212.394.092.356-.081.707-.528.981-.468.288-.931.327-1.301.141a1.147 1.147 0 01-.368-.297l-1.114-1.349 1.986-1.219zm.675-2.97l-.835-1.036-2.089 1.282.804.988-6.044 3.71-.819-.979-2.088 1.281.861 1.02-1.496.919 1.16 1.367 1.492-.916.53.629-1.489.914 1.16 1.366 1.487-.912c1.317 1.458 3.177 1.749 4.853.72 1.293-.794 1.849-1.928 1.406-2.939.872.532 2.09.461 3.139-.182 1.464-.899 1.73-2.358.717-3.807l1.315-.807-1.118-1.393-1.309.803-.515-.638 1.312-.805-1.118-1.393-1.316.808z"
        clipRule="evenodd"
      />
      <Path
        fill="#C5D6F1"
        fillRule="evenodd"
        d="M139.624 192.223l-46.541-7.334a.725.725 0 00-.227 1.433l46.542 7.334a.726.726 0 00.226-1.433zM123.775 195.507h-41.88a.644.644 0 100 1.289h41.88a.644.644 0 100-1.289zM244.953 184.056c4.643 0 8.421 2.605 8.421 5.807 0 3.202-3.778 5.808-8.421 5.808-4.644 0-8.421-2.606-8.421-5.808s3.778-5.807 8.421-5.807zm0-1.056c-5.497 0-9.953 3.073-9.953 6.863v2.839c0 3.79 4.456 6.863 9.953 6.863 5.496 0 9.952-3.073 9.952-6.863v-2.83l.001-.009c0-3.79-4.456-6.863-9.953-6.863z"
        clipRule="evenodd"
      />
      <Path
        fill="#E0E9F8"
        fillRule="evenodd"
        d="M248.421 190.804c-.732.06-1.409-.213-1.714-.646l-.09.007c-.88.073-1.597.525-1.781 1.124.599.248.934.737.781 1.234-.197.645-1.136 1.051-2.072.883-.854-.153-1.398-.757-1.223-1.353.148-.502.744-.86 1.441-.92l.103-.338c.145-.473-.066-.964-.562-1.306l-.317-.218c-.627.21-1.404.137-1.925-.222-.677-.466-.657-1.231.058-1.68.652-.41 1.683-.395 2.312.032.529.359.639.899.331 1.334l.458.316c.45.311 1.081.461 1.713.409l.643-.054c.149-.472.718-.851 1.457-.908.877-.067 1.7.36 1.846.96.16.658-.509 1.267-1.459 1.346zm-11.889-.941c0 3.202 3.777 5.808 8.421 5.808 4.643 0 8.421-2.606 8.421-5.808s-3.778-5.807-8.421-5.807c-4.644 0-8.421 2.605-8.421 5.807z"
        clipRule="evenodd"
      />
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M249.88 189.458c-.146-.6-.969-1.027-1.846-.96-.738.057-1.308.436-1.457.908l-.643.054c-.632.052-1.263-.099-1.713-.409l-.458-.316c.308-.435.198-.975-.331-1.334-.629-.427-1.66-.442-2.312-.032-.715.449-.735 1.214-.058 1.68.521.359 1.298.432 1.925.222l.317.218c.496.342.707.833.562 1.306l-.103.338c-.697.06-1.293.418-1.441.92-.175.596.369 1.2 1.223 1.353.936.168 1.875-.238 2.072-.883.153-.497-.182-.986-.781-1.234.184-.599.9-1.051 1.782-1.124l.089-.007c.305.433.982.706 1.714.646.949-.079 1.619-.688 1.459-1.346z"
        clipRule="evenodd"
      />
    </Svg>
  );
}
Example #29
Source File: UnitedStates.tsx    From react-native-crypto-wallet-app with MIT License 4 votes vote down vote up
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function SvgUnitedstates(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#united_states_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="united_states_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#united_states_svg__a)">
        <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        <Mask
          id="united_states_svg__b"
          width={56}
          height={40}
          x={-8}
          y={0}
          maskUnits="userSpaceOnUse"
        >
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#united_states_svg__b)">
          <Path
            fill="#D02F44"
            fillRule="evenodd"
            d="M48 0H-8v2.667h56V0zm0 5.333H-8V8h56V5.333zm-56 5.334h56v2.666H-8v-2.666zM48 16H-8v2.667h56V16zm-56 5.333h56V24H-8v-2.667zm56 5.334H-8v2.666h56v-2.666zM-8 32h56v2.667H-8V32zm56 5.333H-8V40h56v-2.667z"
            clipRule="evenodd"
          />
          <Path fill="#46467F" d="M-8 0h24v19H-8z" />
          <G filter="url(#united_states_svg__filter0_d)">
            <Path
              fill="url(#united_states_svg__paint0_linear)"
              fillRule="evenodd"
              d="M-2.286 4.3c0 .718-.607 1.3-1.357 1.3S-5 5.018-5 4.3c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3zm5.429 0c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zm4.071 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.608 1.3 1.357 1.3zM14 4.3c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3S14 3.582 14 4.3zM-.929 8.2C-.179 8.2.43 7.618.43 6.9c0-.718-.608-1.3-1.358-1.3-.75 0-1.357.582-1.357 1.3 0 .718.608 1.3 1.357 1.3zm6.786-1.3c0 .718-.607 1.3-1.357 1.3s-1.357-.582-1.357-1.3c0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zM9.93 8.2c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.358.582-1.358 1.3 0 .718.608 1.3 1.358 1.3zM14 9.5c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3S14 8.782 14 9.5zm-6.786 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.608 1.3 1.357 1.3zM3.143 9.5c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zm-6.786 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3S-5 8.782-5 9.5c0 .718.608 1.3 1.357 1.3zM.43 12.1c0 .718-.608 1.3-1.358 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.608-1.3 1.357-1.3.75 0 1.358.582 1.358 1.3zM4.5 13.4c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.607 1.3 1.357 1.3zm6.786-1.3c0 .718-.608 1.3-1.357 1.3-.75 0-1.358-.582-1.358-1.3 0-.718.608-1.3 1.358-1.3.75 0 1.357.582 1.357 1.3zm1.357 3.9c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.357.582-1.357 1.3 0 .718.607 1.3 1.357 1.3zM8.57 14.7c0 .718-.607 1.3-1.357 1.3s-1.357-.582-1.357-1.3c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3zM1.786 16c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.357.582-1.357 1.3 0 .718.607 1.3 1.357 1.3zm-4.072-1.3c0 .718-.607 1.3-1.357 1.3S-5 15.418-5 14.7c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3z"
              clipRule="evenodd"
            />
          </G>
        </G>
      </G>
      <Defs>
        <LinearGradient
          id="united_states_svg__paint0_linear"
          x1={-5}
          x2={-5}
          y1={3}
          y2={16}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#fff" />
          <Stop offset={1} stopColor="#F0F0F0" />
        </LinearGradient>
        <Pattern
          id="united_states_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#united_states_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}