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

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
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * ApplePayIcon - Apple Pay payment icon
 * Note: Uses Apple's brand colors (black)
 *
 * @example
 * ```tsx
 * <ApplePayIcon /> // Default 52.94x22
 * <ApplePayIcon width={60} height={25} />
 * ```
 */
export default function ApplePayIcon({
  width = 52.94,
  height = 22,
  className = '',
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      className={className}
      width={width}
      height={height}
      viewBox="0 0 53 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Apple Pay payment"
    >
      <g clipPath="url(#clip0_317_534)">
        <path
          d="M7.08082 4.07879C8.07082 4.16239 9.06082 3.57719 9.68122 2.83139V2.82919C10.2906 2.068 10.6932 1.0384 10.5942 0C9.71202 0.0417999 8.63182 0.585199 8.01362 1.3486C7.44162 1.99979 6.95542 3.07339 7.08082 4.07879ZM4.63004 17.7011C5.72564 17.6593 6.15684 16.9818 7.47682 16.9818C8.80562 16.9818 9.19282 17.7011 10.3478 17.6857C11.5446 17.6615 12.2948 16.599 13.0274 15.5078C13.859 14.2692 14.2066 13.0702 14.2242 13.0042C14.2 12.98 11.9142 12.0912 11.8878 9.4116C11.8636 7.1676 13.6962 6.10279 13.7754 6.03679C12.7436 4.47919 11.1354 4.31199 10.5744 4.27019L10.5788 4.27239C9.14222 4.18659 7.91462 5.09959 7.23702 5.09959C6.54404 5.09959 5.50564 4.31199 4.36604 4.33619C2.89204 4.36259 1.52145 5.20959 0.77125 6.55599C-0.77975 9.2598 0.366451 13.255 1.86685 15.4572C2.60164 16.544 3.47504 17.7429 4.63004 17.7011ZM31.382 9.2114H33.6348C33.824 8.206 34.7392 7.5438 35.9954 7.5438C37.5222 7.5438 38.3802 8.2632 38.3802 9.5942V10.4984L35.2628 10.692C32.3676 10.868 30.799 12.0736 30.799 14.1658C30.8078 16.2756 32.4226 17.6814 34.7414 17.6835C36.31 17.6835 37.762 16.8806 38.4198 15.6002H38.4682V17.5604H40.7782V9.438C40.7782 7.0862 38.9214 5.56159 36.068 5.56159C33.4192 5.56159 31.459 7.0994 31.382 9.2114ZM38.389 13.1406C38.389 14.6652 37.1086 15.752 35.419 15.752C34.0902 15.752 33.241 15.0986 33.241 14.1108C33.241 13.079 34.0572 12.4872 35.617 12.3948L38.389 12.2188V13.1406ZM18.8596 1.2386V17.5582H21.3588V11.9812H24.815C27.9742 11.9812 30.1852 9.779 30.1852 6.59779C30.1852 3.41659 28.0094 1.2386 24.8964 1.2386H18.8596ZM27.6464 6.60659C27.6464 8.6658 26.41 9.856 24.2298 9.856H21.3588V3.37479H24.2386C26.4078 3.37479 27.6464 4.54519 27.6464 6.60659Z"
          fill="black"
        />
        <path
          d="M47.3089 15.3562L44.3719 5.72021H41.7649L45.9889 17.6024L45.7579 18.3218C45.3773 19.5428 44.7591 20.0224 43.6547 20.0224C43.4567 20.0224 43.0783 19.9982 42.9199 19.9806V21.9408C43.0695 21.976 43.6899 22.0002 43.8791 22.0002L43.8769 21.9958C46.3101 21.9958 47.4563 21.0498 48.4573 18.1942L52.8375 5.72021H50.2965L47.3595 15.3562H47.3089Z"
          fill="black"
        />
      </g>
      <defs>
        <clipPath id="clip0_317_534">
          <rect width="52.9375" height="22" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}