All files / src/components/ui/icons VisaIcon.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
46
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * VisaIcon - Visa payment card icon
 * Note: Uses Visa's brand colors and should not be themed
 *
 * @example
 * ```tsx
 * <VisaIcon /> // Default 66x22
 * <VisaIcon width={80} height={27} />
 * ```
 */
export default function VisaIcon({
  width = 66,
  height = 22,
  className = '',
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      className={className}
      width={width}
      height={height}
      viewBox="0 0 66 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Visa payment card"
    >
      <g clipPath="url(#clip0_317_544)">
        <path
          d="M18.9469 0.378937L14.0208 15.5261L13.0888 11.2657C11.6745 7.57849 9.17467 4.40728 5.91968 2.1712L10.641 21.6301H16.325L24.2827 0.409661H18.9469V0.378937ZM61.3776 0.378937H55.6935L46.978 21.5891H52.2831L53.4199 18.5167H60.2408L60.9986 21.5891H65.5458L61.3776 0.378937ZM54.5567 14.7683L57.6291 6.82086L59.1449 14.7683H54.5567ZM39.3992 6.43169C39.3992 5.30512 40.1571 4.15806 42.8097 4.15806C44.1921 4.28894 45.5077 4.81516 46.599 5.67381L47.7358 1.13681C46.17 0.481579 44.5042 0.0971718 42.8097 0C37.1256 0 34.4731 3.07246 34.4731 6.44192C34.4731 13.2525 42.0518 12.126 42.0518 15.5261C42.0518 16.284 41.6728 17.4208 38.6414 17.4208C36.8128 17.4187 35.0052 17.0314 33.3362 16.284L32.5783 20.8313C34.3492 21.6766 36.3027 22.0673 38.2624 21.9681C41.6728 22.347 46.978 19.3156 46.978 14.799C46.978 9.46315 39.3992 9.09451 39.3992 6.43169Z"
          fill="#1565C0"
        />
        <path d="M23.4939 21.9681H28.799L32.2095 0.757812H26.5254L23.4939 21.9681Z" fill="#1565C0" />
        <path
          d="M13.314 12.116L11.3681 2.65278C11.0988 2.07003 10.6637 1.57955 10.1173 1.24258C9.57088 0.905612 8.93728 0.737107 8.29561 0.758095H0C0 0.758095 10.9891 4.16853 13.314 12.116Z"
          fill="#FF9800"
        />
      </g>
      <defs>
        <clipPath id="clip0_317_544">
          <rect width="66" height="22" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}