All files / src/components/ui/icons GooglePayIcon.tsx

17.54% Statements 10/57
100% Branches 0/0
0% Functions 0/1
17.54% Lines 10/57

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 571x 1x 1x 1x 1x 1x 1x 1x 1x 1x                                                                                              
/**
 * GooglePayIcon - Google Pay payment icon
 * Note: Uses Google's brand colors and should not be themed
 *
 * @example
 * ```tsx
 * <GooglePayIcon /> // Default 56x22
 * <GooglePayIcon width={65} height={25} />
 * ```
 */
export default function GooglePayIcon({
  width = 56,
  height = 22,
  className = '',
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      className={className}
      width={width}
      height={height}
      viewBox="0 0 57 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Google Pay payment"
    >
      <g clipPath="url(#clip0_317_527)">
        <path
          d="M26.7852 10.6968V17.1198H24.7495V1.2646H30.1484C31.4507 1.23931 32.7024 1.73241 33.6507 2.64276C34.599 3.48989 35.13 4.71632 35.1047 5.98069C35.13 7.25768 34.599 8.48411 33.6507 9.3439C32.7024 10.2416 31.5392 10.6968 30.161 10.6968H26.7852ZM26.7852 3.21173V8.74962H30.199C30.9576 8.77492 31.6909 8.47153 32.2093 7.92779C33.284 6.89104 33.2967 5.18414 32.2599 4.10943L32.2093 4.05885C31.6909 3.50253 30.9576 3.19909 30.199 3.22437L26.7852 3.21173ZM39.7955 5.91747C41.3001 5.91747 42.4886 6.32207 43.361 7.1186C44.2335 7.92779 44.6634 9.02779 44.6634 10.4312V17.1071H42.7162V15.6026H42.6277C41.7806 16.8416 40.668 17.4611 39.2645 17.4611C38.0759 17.4611 37.0645 17.1071 36.268 16.3991C35.484 15.7416 35.0415 14.7681 35.0668 13.7439C35.0668 12.6186 35.4967 11.7336 36.3438 11.0635C37.1909 10.3934 38.3289 10.0646 39.7449 10.0646C40.9588 10.0646 41.9449 10.2922 42.7289 10.7221V10.2543C42.7289 9.55888 42.4254 8.90136 41.8944 8.45888C41.3507 7.97839 40.6553 7.71287 39.9346 7.71287C38.7967 7.71287 37.899 8.19337 37.2289 9.15429L35.4335 8.02899C36.407 6.62552 37.861 5.91747 39.7955 5.91747ZM37.1656 13.7945C37.1656 14.3255 37.4185 14.8186 37.8357 15.1221C38.2909 15.4761 38.8473 15.6657 39.4162 15.6531C40.276 15.6531 41.0979 15.3117 41.7047 14.7048C42.3748 14.0727 42.7162 13.3267 42.7162 12.4669C42.084 11.9611 41.199 11.7083 40.061 11.7083C39.2392 11.7083 38.5438 11.9106 37.9875 12.3026C37.4438 12.7071 37.1656 13.2002 37.1656 13.7945ZM55.8403 6.2715L49.0381 21.8991H46.9392L49.468 16.437L44.9921 6.28414H47.2047L50.4289 14.0727H50.4794L53.6277 6.28414L55.8403 6.2715Z"
          fill="#5F6368"
        />
        <path
          d="M18.5541 9.3059C18.5541 8.68639 18.5035 8.06682 18.4024 7.45996H9.81738V10.9622H14.7358C14.5334 12.0875 13.876 13.099 12.9151 13.7312V16.007H15.8484C17.5679 14.4266 18.5541 12.0875 18.5541 9.3059Z"
          fill="#4285F4"
        />
        <path
          d="M9.81736 18.2067C12.2702 18.2067 14.3438 17.3975 15.8484 16.0067L12.9151 13.7309C12.0933 14.2872 11.0438 14.6033 9.81736 14.6033C7.4404 14.6033 5.43002 12.9975 4.70934 10.8481H1.6875V13.1999C3.23002 16.2597 6.3783 18.2067 9.81736 18.2067Z"
          fill="#34A853"
        />
        <path
          d="M4.70925 10.8483C4.32993 9.72296 4.32993 8.49653 4.70925 7.35858V5.01953H1.68741C1.04532 6.28512 0.710693 7.68432 0.710693 9.10345C0.710693 10.5226 1.04532 11.9217 1.68741 13.1873L4.70925 10.8483Z"
          fill="#FBBC04"
        />
        <path
          d="M9.81736 3.60351C11.1197 3.57822 12.3714 4.07132 13.307 4.96903L15.899 2.37708C14.2553 0.821903 12.0806 -0.0252254 9.81736 6.19453e-05C6.3783 6.19453e-05 3.23002 1.94719 1.6875 5.01961L4.70934 7.37134C5.43002 5.20926 7.4404 3.60351 9.81736 3.60351Z"
          fill="#EA4335"
        />
      </g>
      <defs>
        <clipPath id="clip0_317_527">
          <rect width="56.375" height="22" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}