Card Icons

1import { CreditCard } from "lucide-react";
2 
3export type CardBrand =
4  | "visa"
5  | "mastercard"
6  | "amex"
7  | "discover"
8  | "diners"
9  | "jcb"
10  | "unionpay"
11  | "unknown";
12 
13export const brandLabels: Record<CardBrand, string> = {
14  visa: "Visa",
15  mastercard: "Mastercard",
16  amex: "American Express",
17  discover: "Discover",
18  diners: "Diners Club",
19  jcb: "JCB",
20  unionpay: "UnionPay",
21  unknown: "Card",
22};
23 
24export const CardBrandIcons: Record<
25  CardBrand,
26  React.FC<{ className?: string }>
27> = {
28  visa: ({ className }) => (
29    <svg
30      width="780"
31      height="500"
32      viewBox="0 0 780 500"
33      fill="none"
34      xmlns="http://www.w3.org/2000/svg"
35      className={className}
36      aria-label="Visa"
37    >
38      <path
39        d="M654.223 279.812L637.598 202.107L609.685 279.812H654.223Z"
40        fill="currentColor"
41      />
42      <path
43        fillRule="evenodd"
44        clipRule="evenodd"
45        d="M41.458 0H736.038C758.935 0 777.497 18.99 777.497 42.426V457.076C777.497 480.508 758.926 499.502 736.038 499.502H41.458C18.562 499.502 0 480.513 0 457.076V42.426C0 18.994 18.571 0 41.458 0ZM399.884 212.007C399.884 167.144 441.738 142.862 488.573 142.862C518.568 142.862 539.837 152.04 539.837 152.04L530.378 195.765C530.378 195.765 510.831 185.865 486.872 185.865C465.637 185.865 455.402 195.206 455.402 203.732C455.402 213.307 467.277 219.61 481.547 227.184C503.029 238.586 529.94 252.869 529.94 285.535C529.94 331.166 489.648 356.64 438.442 356.64C403.895 356.64 377.873 345.141 377.873 345.141L387.539 299.87C387.539 299.87 410.127 313.482 440.35 313.482C461.645 313.482 474.114 303.74 474.114 292.857C474.114 282.136 461.343 275.251 446.395 267.192C425.306 255.822 399.884 242.116 399.884 212.007ZM58.9453 152.762L60.0794 146.162H149.49C162.401 146.162 172.949 153.954 175.032 167.612L197.739 286.953L253.385 146.162H309.469L222.868 353.237H166.655L124.721 191.537C120.872 176.619 119.245 171.815 96.395 163.565C78.6488 156.369 58.9453 152.762 58.9453 152.762ZM288.025 353.237L332.021 146.162H385.348L341.506 353.237H288.025ZM605.561 165.137C610.575 153.069 617.408 146.162 630.304 146.162H675.383L718.555 353.237H669.068L662.47 321.887H594.143L583.292 353.237H527.208L605.561 165.137Z"
46        fill="currentColor"
47      />
48    </svg>
49  ),
50  mastercard: ({ className }) => (
51    <svg
52      width="780"
53      height="500"
54      viewBox="0 0 780 500"
55      fill="none"
56      xmlns="http://www.w3.org/2000/svg"
57      className={className}
58      aria-label="Mastercard"
59    >
60// … truncated