react-svg-credit-card-payment-icons
Version:
React components library with 6 styles, 108 icons, TypeScript support, and a variety of types and formats for easy integration into React applications.
1,214 lines (1,211 loc) • 59.9 kB
TypeScript
import { SVGProps, JSX } from 'react';
import { F as FlatComponents } from './index-DkLv_pZ3.js';
import { F as FlatRoundedComponents } from './index-BPtJfGGi.js';
import { L as LogoComponents } from './index-bteCaN2Q.js';
import { L as LogoBorderComponents } from './index-BFhbBU_-.js';
import { M as MonoComponents } from './index-DlbA5SKJ.js';
import { M as MonoOutlineComponents } from './index-BGtKY_f-.js';
import './Alipay-Fciy41cp.js';
import './AmericanExpress-BPyT-KW-.js';
import './DinersClub-CCidJzjk.js';
import './Discover-CRDqswZc.js';
import './Elo-O-KoZROz.js';
import './Generic-B-lCTXSh.js';
import './Hipercard-DV1AkwpF.js';
import './JCB-BVE6fAtF.js';
import './Maestro-CK68kYa2.js';
import './Mastercard-BAbqwp5C.js';
import './Mir-37zRPQsi.js';
import './PayPal-Bc7GMZot.js';
import './Swish-DiwlHXcn.js';
import './UnionPay-BKtojwLB.js';
import './Visa-ka9Sv-HM.js';
import './Alipay-BJip3pLO.js';
import './AmericanExpress-CWe5nD5D.js';
import './DinersClub-LHd6apm5.js';
import './Discover-I2HLQ1yG.js';
import './Elo-BWQsVqSz.js';
import './Generic-DfZ_oYfU.js';
import './Hipercard-B9cXokP7.js';
import './JCB-B0uppMG4.js';
import './Maestro-D_GkEmS9.js';
import './Mastercard-B_CVe6zP.js';
import './Mir-Bc5e3Jt3.js';
import './PayPal-Bah2fuBQ.js';
import './Swish-D56i9qPh.js';
import './UnionPay-Beks5wNA.js';
import './Visa-BT0mKNdz.js';
import './Alipay-DYfARbH-.js';
import './AmericanExpress-DlANfikA.js';
import './DinersClub-C-8V6FGd.js';
import './Discover-mzFpNWA8.js';
import './Elo-DGfGDqzM.js';
import './Generic-DEiQi3jr.js';
import './Hipercard-w0SWWsu1.js';
import './JCB--wmAM598.js';
import './Maestro-BhTmGRXb.js';
import './Mastercard-C4_GTREy.js';
import './Mir-DU8GZb1Z.js';
import './PayPal-B3ZkXTJy.js';
import './Swish-Da_aIved.js';
import './UnionPay-C8Lrfwvx.js';
import './Visa-i8VVLgVl.js';
import './Alipay-BHGOFoLj.js';
import './AmericanExpress-bx0F_Qgu.js';
import './DinersClub-DSjLYGYw.js';
import './Discover-Cdoh8pht.js';
import './Elo--troFn19.js';
import './Generic-DBR-99nV.js';
import './Hipercard-C56aR6yJ.js';
import './JCB-Doq86yN3.js';
import './Maestro-Bv2wnzYl.js';
import './Mastercard-BKPkbDE5.js';
import './Mir-CXI0KZdL.js';
import './PayPal-BSiDNqY0.js';
import './Swish-DPQxnrrt.js';
import './UnionPay-DAKdW8_L.js';
import './Visa-DYeUwEfb.js';
import './Alipay-CwB7CyXh.js';
import './AmericanExpress-BqUDWbaK.js';
import './DinersClub-D_ExmUvQ.js';
import './Discover-DqdLYNSX.js';
import './Elo-BKWuH6LF.js';
import './Generic-DeMwgS0c.js';
import './Hipercard-dwrukHez.js';
import './JCB-CoyjVGvC.js';
import './Maestro-CTYjtPgK.js';
import './Mastercard-Cpd43jAR.js';
import './Mir-uAVksAUl.js';
import './PayPal-jnBwITz9.js';
import './Swish-BYcW_-84.js';
import './UnionPay-CePwiyFM.js';
import './Visa-Ddre649H.js';
import './Alipay-CKSxoDKz.js';
import './AmericanExpress-DyjlAAKl.js';
import './DinersClub-BsYwNb3V.js';
import './Discover-Dk23-QRE.js';
import './Elo-6zNlKMs8.js';
import './Generic-DQlmfjw-.js';
import './Hipercard-DOaEVH1Q.js';
import './JCB-BXEC4zM2.js';
import './Maestro-CsrSJAx6.js';
import './Mastercard-DaRBh_u7.js';
import './Mir-BMLJMGLg.js';
import './PayPal-D4_-FTbh.js';
import './Swish-CewpqtsU.js';
import './UnionPay-CuRxz_Hh.js';
import './Visa-CjdIhFbp.js';
/**
* Canonical card type names (excludes aliases).
* These are the actual type values returned by detectCardType().
*/
type CanonicalCardType = "Alipay" | "AmericanExpress" | "DinersClub" | "Discover" | "Elo" | "Generic" | "Hipercard" | "JCB" | "Maestro" | "Mastercard" | "Mir" | "PayPal" | "Swish" | "UnionPay" | "Visa";
/**
* Removes all non-digit characters from a card number (spaces, dashes, etc.).
*
* @param cardNumber - Card number string, formatted or unformatted
* @returns String containing only numeric digits
* @example
* sanitizeCardNumber('4242 4242 4242 4242') // '4242424242424242'
* sanitizeCardNumber('4242-4242-4242-4242') // '4242424242424242'
*/
declare function sanitizeCardNumber(cardNumber: string): string;
/**
* Detects card type by testing against regex patterns for each card type.
*
* For partial card numbers (< 13 digits), tests prefix compatibility.
* For complete card numbers, validates against full patterns.
*
* Returns 'Generic' for unknown or invalid cards.
*
* This is the recommended function for card type detection, returning canonical type names
* (AmericanExpress, DinersClub, UnionPay, PayPal, JCB).
*
* @param cardNumber - Card number (formatted or unformatted)
* @returns Detected card type name with canonical casing
* @example
* getCardType('4242424242424242') // 'Visa'
* getCardType('5555 5555 5555 4444') // 'Mastercard'
* getCardType('3782 822463 10005') // 'AmericanExpress'
* getCardType('30569309025904') // 'DinersClub'
* getCardType('6200000000000005') // 'UnionPay'
* getCardType('3566002020360505') // 'JCB'
*/
declare function getCardType(cardNumber: string): PaymentType;
/**
* Detects card type by testing against regex patterns for each card type.
*
* @deprecated Use `getCardType()` instead. This function is maintained for backward compatibility and returns legacy v4.x type names.
* @param cardNumber - Card number (formatted or unformatted)
* @returns Detected card type name (legacy v4.x format: 'Americanexpress', 'Diners', etc.)
* @example
* detectCardType('4242424242424242') // 'Visa'
* detectCardType('5555 5555 5555 4444') // 'Mastercard'
* detectCardType('3782 822463 10005') // 'Americanexpress' (legacy)
* detectCardType('30569309025904') // 'Diners' (legacy)
*/
declare function detectCardType(cardNumber: string): PaymentType;
/**
* Validates card number using Luhn algorithm (mod-10 checksum) and length check (13-19 digits).
*
* Note: Only validates mathematical correctness, not whether the card is active or funded.
*
* @param cardNumber - Card number (formatted or unformatted)
* @returns true if valid, false otherwise
* @example
* validateCardNumber('4242424242424242') // true
* validateCardNumber('4242424242424243') // false (invalid checksum)
* validateCardNumber('123') // false (too short)
* @see https://en.wikipedia.org/wiki/Luhn_algorithm
*/
declare function validateCardNumber(cardNumber: string): boolean;
/**
* Formats a card number with appropriate spacing for the detected card type.
*
* This function automatically detects the card type and applies the industry-standard
* spacing format for that card brand. Formatting patterns are defined in the card's YAML configuration:
* - American Express: 4-6-5 format (e.g., "3782 822463 10005")
* - Diners Club: 4-6-4 for 14-digit, 4-4-4-4 for 16-digit (e.g., "3056 930902 5904" or "3056 9300 0902 0004")
* - Most others (Visa, Mastercard, etc.): 4-4-4-4 format (e.g., "4242 4242 4242 4242")
*
* @param cardNumber - The card number to format (can be formatted or unformatted)
* @returns The card number formatted with appropriate spacing
*
* @example
* ```ts
* formatCardNumber('4242424242424242') // Returns: '4242 4242 4242 4242' (Visa)
* formatCardNumber('378282246310005') // Returns: '3782 822463 10005' (Amex)
* formatCardNumber('30569309025904') // Returns: '3056 930902 5904' (Diners 14-digit)
* formatCardNumber('3056930009020004') // Returns: '3056 9300 0902 0004' (Diners 16-digit)
* formatCardNumber('5555555555554444') // Returns: '5555 5555 5555 4444' (Mastercard)
* formatCardNumber('4242 4242 4242 4242') // Returns: '4242 4242 4242 4242' (already formatted)
* ```
*
* @remarks
* - Input is automatically sanitized, so pre-formatted numbers are handled correctly
* - The format is determined by the detected card type's YAML configuration
* - Partial card numbers will be formatted as much as possible
* - For variable-length cards (e.g., Diners Club), format varies by actual card length
*/
declare function formatCardNumber(cardNumber: string): string;
/**
* Validates that a card number matches a specific card type and passes Luhn validation.
*
* This function performs two checks:
* 1. Verifies the card number matches the expected patterns for the specified card type
* 2. Validates the card number passes Luhn algorithm checksum verification
*
* This is useful when you need to validate a card number against a specific expected type,
* such as when a user explicitly selects a card brand or when enforcing payment method restrictions.
*
* @param cardNumber - The card number to validate (can be formatted or unformatted)
* @param cardType - The specific payment type to validate against
* @returns `true` if the card number matches the type and passes validation, `false` otherwise
*
* @example
* ```ts
* validateCardForType('4242424242424242', 'Visa') // Returns: true
* validateCardForType('4242424242424242', 'Mastercard') // Returns: false (wrong type)
* validateCardForType('4242424242424243', 'Visa') // Returns: false (invalid Luhn)
* validateCardForType('5555555555554444', 'Mastercard') // Returns: true
* validateCardForType('378282246310005', 'Americanexpress') // Returns: true
* validateCardForType('', 'Paypal') // Returns: false (Paypal has no card numbers)
* ```
*
* @remarks
* - Returns `false` for non-card payment methods like PayPal, Alipay, etc.
* - Both pattern matching AND Luhn validation must pass for `true` result
* - Input is automatically sanitized before validation
*/
declare function validateCardForType(cardNumber: string, cardType: PaymentType): boolean;
/**
* Gets the expected length range (in digits) for a specific card type.
*
* Different card issuers use different card number lengths. This function returns the
* valid minimum and maximum length for a given card type, which is useful for:
* - Input validation and masking
* - Determining when a user has finished entering a card number
* - Setting maxLength attributes on input fields
* - Progressive validation during card entry
*
* @param cardType - The payment type to get length information for
* @returns An object with `min` and `max` properties, or `null` for non-card payment methods
*
* @example
* ```ts
* getCardLengthRange('Visa') // Returns: { min: 13, max: 19 }
* getCardLengthRange('Mastercard') // Returns: { min: 16, max: 16 }
* getCardLengthRange('Americanexpress') // Returns: { min: 15, max: 15 }
* getCardLengthRange('Maestro') // Returns: { min: 12, max: 19 }
* getCardLengthRange('Paypal') // Returns: null (not a card)
* getCardLengthRange('Generic') // Returns: null (unknown type)
* ```
*
* @remarks
* - Returns `null` for non-card payment methods (PayPal, Alipay, Swish, etc.)
* - Most modern cards use 16 digits, but historical cards and some issuers vary
* - Visa can range from 13-19 digits depending on the product
* - Maestro has the widest range at 12-19 digits
*/
declare function getCardLengthRange(cardType: PaymentType): {
min: number;
max: number;
} | null;
/**
* Checks if a card number is potentially valid based on length requirements.
*
* This function performs a quick, non-destructive check to determine if a card number
* COULD be valid based solely on its length for the detected card type. It's useful for:
* - Real-time validation feedback as users type
* - Enabling/disabling submit buttons progressively
* - Showing validation indicators during card entry
* - Pre-validation before making expensive API calls
*
* Unlike `validateCardNumber()`, this does NOT perform Luhn algorithm validation,
* making it faster and suitable for real-time input validation.
*
* @param cardNumber - The card number to check (can be formatted or unformatted)
* @returns `true` if the card number length is valid for its detected type, `false` otherwise
*
* @example
* ```ts
* isCardNumberPotentiallyValid('4242') // Returns: false (too short for Visa)
* isCardNumberPotentiallyValid('424242424242') // Returns: true (valid length for Visa)
* isCardNumberPotentiallyValid('4242424242424242') // Returns: true (valid length)
* isCardNumberPotentiallyValid('42424242424242424242') // Returns: false (too long)
* isCardNumberPotentiallyValid('3782 822463 10005') // Returns: true (valid Amex length)
* ```
*
* @remarks
* - This is a length-only check and does NOT validate Luhn algorithm
* - Useful for progressive validation during user input
* - Returns `false` for non-card payment types (PayPal, Alipay, etc.)
* - Consider using `validateCardNumber()` for final validation before submission
*/
declare function isCardNumberPotentiallyValid(cardNumber: string): boolean;
/**
* Creates a masked version of a card number, showing only the last 4 digits.
*
* This function obscures all but the last 4 digits of a card number for security purposes.
* The masked output maintains the appropriate spacing format for the detected card type,
* making it suitable for display in receipts, payment forms, and transaction history.
*
* This follows PCI DSS (Payment Card Industry Data Security Standard) guidelines which
* allow displaying up to the first 6 and last 4 digits of a card number.
*
* @param cardNumber - The card number to mask (can be formatted or unformatted)
* @param maskChar - The character to use for masking (default: '*')
* @returns The masked card number with appropriate formatting
*
* @example
* ```ts
* maskCardNumber('4242424242424242') // Returns: '**** **** **** 4242'
* maskCardNumber('4242424242424242', '•') // Returns: '•••• •••• •••• 4242'
* maskCardNumber('378282246310005') // Returns: '**** ****** *0005' (Amex format)
* maskCardNumber('5555 5555 5555 4444') // Returns: '**** **** **** 4444'
* maskCardNumber('4242424242424242', 'X') // Returns: 'XXXX XXXX XXXX 4242'
* maskCardNumber('123') // Returns: '123' (too short to mask)
* ```
*
* @remarks
* - Only the last 4 digits are visible, all others are masked
* - Formatting matches the card type (Amex uses 4-6-5, others use 4-4-4-4, etc.)
* - If the card number has fewer than 4 digits, it's returned as-is without masking
* - Input is automatically sanitized before masking
*
* @see {@link https://www.pcisecuritystandards.org | PCI Security Standards}
*/
declare function maskCardNumber(cardNumber: string, maskChar?: string): string;
/**
* Gets a list of card types issued in a specific country/region.
*
* This function filters payment cards by their issuing country using ISO 3166-1 alpha-2
* country codes. It's useful for displaying region-specific payment options or validating
* cards based on geographic restrictions.
*
* @param countryCode - ISO 3166-1 alpha-2 country code (e.g., 'US', 'BR', 'CN', 'JP'), or 'GLOBAL' to get all globally available cards
* @param options - Optional configuration
* @param options.includeGlobal - Include globally issued cards (Visa, Mastercard, PayPal, etc.) in results (default: true)
* @returns Array of canonical card type names issued in the specified country
*
* @example
* ```ts
* getCardsByCountry('BR') // Returns: ['Elo', 'Hipercard', 'Visa', 'Mastercard', ...] (includes global)
* getCardsByCountry('BR', { includeGlobal: false }) // Returns: ['Elo', 'Hipercard']
* getCardsByCountry('US') // Returns: ['AmericanExpress', 'Discover', 'DinersClub', 'Visa', ...]
* getCardsByCountry('CN') // Returns: ['Unionpay', 'Alipay', 'Visa', 'Mastercard', ...]
* getCardsByCountry('JP') // Returns: ['Jcb', 'Visa', 'Mastercard', ...]
* getCardsByCountry('RU') // Returns: ['Mir', 'Visa', 'Mastercard', ...]
* getCardsByCountry('SE') // Returns: ['Swish', 'Visa', 'Mastercard', ...]
* getCardsByCountry('GLOBAL') // Returns: ['Alipay', 'Maestro', 'Mastercard', 'Paypal', 'Visa']
* ```
*
* @remarks
* - Country codes must be two-letter uppercase ISO 3166-1 alpha-2 format or 'GLOBAL'
* - 'GLOBAL' in metadata indicates cards available worldwide (Visa, Mastercard, PayPal, etc.)
* - `null` in metadata indicates placeholder/generic types (excluded from all results)
* - By default, globally issued cards are included in all country queries
* - Set `includeGlobal: false` to only get region-specific cards
*
* @see {@link https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 | ISO 3166-1 alpha-2 country codes}
*/
declare function getCardsByCountry(countryCode: string, options?: {
includeGlobal?: boolean;
}): CanonicalCardType[];
declare const AVAILABLE_FORMATS: readonly ["flat", "flatRounded", "logo", "logoBorder", "mono", "monoOutline"];
/**
* Alipay payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Alipay icon in the specified format
*
* @example
* ```tsx
* import { AlipayIcon } from 'react-svg-credit-card-payment-icons';
*
* <AlipayIcon format="flat" />
* <AlipayIcon format="flatRounded" width={100} />
* ```
*/
declare function AlipayIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay Flat icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function AlipayFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay FlatRounded icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function AlipayFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay Logo icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function AlipayLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay LogoBorder icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function AlipayLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay Mono icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function AlipayMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Alipay MonoOutline icon.
* @alias Alipay from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function AlipayMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the AmericanExpress icon in the specified format
*
* @example
* ```tsx
* import { AmericanExpressIcon } from 'react-svg-credit-card-payment-icons';
*
* <AmericanExpressIcon format="flat" />
* <AmericanExpressIcon format="flatRounded" width={100} />
* ```
*/
declare function AmericanExpressIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress Flat icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function AmericanExpressFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress FlatRounded icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function AmericanExpressFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress Logo icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function AmericanExpressLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress LogoBorder icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function AmericanExpressLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress Mono icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function AmericanExpressMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* AmericanExpress MonoOutline icon.
* @alias AmericanExpress from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function AmericanExpressMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/** @alias AmericanExpressIcon */
declare function AmericanexpressIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/** @alias AmericanExpressIcon */
declare function AmexIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the DinersClub icon in the specified format
*
* @example
* ```tsx
* import { DinersClubIcon } from 'react-svg-credit-card-payment-icons';
*
* <DinersClubIcon format="flat" />
* <DinersClubIcon format="flatRounded" width={100} />
* ```
*/
declare function DinersClubIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub Flat icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function DinersClubFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub FlatRounded icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function DinersClubFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub Logo icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function DinersClubLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub LogoBorder icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function DinersClubLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub Mono icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function DinersClubMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* DinersClub MonoOutline icon.
* @alias DinersClub from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function DinersClubMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/** @alias DinersClubIcon */
declare function DinersIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Discover icon in the specified format
*
* @example
* ```tsx
* import { DiscoverIcon } from 'react-svg-credit-card-payment-icons';
*
* <DiscoverIcon format="flat" />
* <DiscoverIcon format="flatRounded" width={100} />
* ```
*/
declare function DiscoverIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover Flat icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function DiscoverFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover FlatRounded icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function DiscoverFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover Logo icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function DiscoverLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover LogoBorder icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function DiscoverLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover Mono icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function DiscoverMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Discover MonoOutline icon.
* @alias Discover from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function DiscoverMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Elo icon in the specified format
*
* @example
* ```tsx
* import { EloIcon } from 'react-svg-credit-card-payment-icons';
*
* <EloIcon format="flat" />
* <EloIcon format="flatRounded" width={100} />
* ```
*/
declare function EloIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo Flat icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function EloFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo FlatRounded icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function EloFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo Logo icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function EloLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo LogoBorder icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function EloLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo Mono icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function EloMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Elo MonoOutline icon.
* @alias Elo from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function EloMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Generic icon in the specified format
*
* @example
* ```tsx
* import { GenericIcon } from 'react-svg-credit-card-payment-icons';
*
* <GenericIcon format="flat" />
* <GenericIcon format="flatRounded" width={100} />
* ```
*/
declare function GenericIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic Flat icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function GenericFlatIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic FlatRounded icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function GenericFlatRoundedIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic Logo icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function GenericLogoIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic LogoBorder icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function GenericLogoBorderIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic Mono icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function GenericMonoIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Generic MonoOutline icon with optional variant selection.
* @param variant - Optional variant: Code, CodeFront
* @alias Generic from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function GenericMonoOutlineIcon({ variant, ...props }: {
variant?: 'Code' | 'CodeFront';
} & SVGProps<SVGSVGElement>): JSX.Element;
/** @alias GenericIcon */
declare function GenericCardIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/** @alias GenericIcon */
declare function GenericCardFrontIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code payment icon with dynamic format selection (variant).
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
*/
declare function CodeIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code Flat icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function CodeFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code FlatRounded icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function CodeFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code Logo icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function CodeLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code LogoBorder icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function CodeLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code Mono icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function CodeMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Code MonoOutline icon (variant).
* @alias Code from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function CodeMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront payment icon with dynamic format selection (variant).
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
*/
declare function CodeFrontIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront Flat icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function CodeFrontFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront FlatRounded icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function CodeFrontFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront Logo icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function CodeFrontLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront LogoBorder icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function CodeFrontLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront Mono icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function CodeFrontMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* CodeFront MonoOutline icon (variant).
* @alias CodeFront from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function CodeFrontMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Hipercard icon in the specified format
*
* @example
* ```tsx
* import { HipercardIcon } from 'react-svg-credit-card-payment-icons';
*
* <HipercardIcon format="flat" />
* <HipercardIcon format="flatRounded" width={100} />
* ```
*/
declare function HipercardIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard Flat icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function HipercardFlatIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard FlatRounded icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function HipercardFlatRoundedIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard Logo icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function HipercardLogoIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard LogoBorder icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function HipercardLogoBorderIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard Mono icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function HipercardMonoIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hipercard MonoOutline icon with optional variant selection.
* @param variant - Optional variant: Hiper
* @alias Hipercard from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function HipercardMonoOutlineIcon({ variant, ...props }: {
variant?: 'Hiper';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper payment icon with dynamic format selection (variant).
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
*/
declare function HiperIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper Flat icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function HiperFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper FlatRounded icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function HiperFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper Logo icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function HiperLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper LogoBorder icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function HiperLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper Mono icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function HiperMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Hiper MonoOutline icon (variant).
* @alias Hiper from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function HiperMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the JCB icon in the specified format
*
* @example
* ```tsx
* import { JCBIcon } from 'react-svg-credit-card-payment-icons';
*
* <JCBIcon format="flat" />
* <JCBIcon format="flatRounded" width={100} />
* ```
*/
declare function JCBIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB Flat icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function JCBFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB FlatRounded icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function JCBFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB Logo icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function JCBLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB LogoBorder icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function JCBLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB Mono icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function JCBMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* JCB MonoOutline icon.
* @alias JCB from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function JCBMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/** @alias JCBIcon */
declare function JcbIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Maestro icon in the specified format
*
* @example
* ```tsx
* import { MaestroIcon } from 'react-svg-credit-card-payment-icons';
*
* <MaestroIcon format="flat" />
* <MaestroIcon format="flatRounded" width={100} />
* ```
*/
declare function MaestroIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro Flat icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function MaestroFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro FlatRounded icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function MaestroFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro Logo icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function MaestroLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro LogoBorder icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function MaestroLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro Mono icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function MaestroMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Maestro MonoOutline icon.
* @alias Maestro from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function MaestroMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Mastercard icon in the specified format
*
* @example
* ```tsx
* import { MastercardIcon } from 'react-svg-credit-card-payment-icons';
*
* <MastercardIcon format="flat" />
* <MastercardIcon format="flatRounded" width={100} />
* ```
*/
declare function MastercardIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard Flat icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function MastercardFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard FlatRounded icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function MastercardFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard Logo icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function MastercardLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard LogoBorder icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function MastercardLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard Mono icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function MastercardMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mastercard MonoOutline icon.
* @alias Mastercard from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function MastercardMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Mir icon in the specified format
*
* @example
* ```tsx
* import { MirIcon } from 'react-svg-credit-card-payment-icons';
*
* <MirIcon format="flat" />
* <MirIcon format="flatRounded" width={100} />
* ```
*/
declare function MirIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir Flat icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function MirFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir FlatRounded icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function MirFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir Logo icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function MirLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir LogoBorder icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function MirLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir Mono icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function MirMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Mir MonoOutline icon.
* @alias Mir from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function MirMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the PayPal icon in the specified format
*
* @example
* ```tsx
* import { PayPalIcon } from 'react-svg-credit-card-payment-icons';
*
* <PayPalIcon format="flat" />
* <PayPalIcon format="flatRounded" width={100} />
* ```
*/
declare function PayPalIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal Flat icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function PayPalFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal FlatRounded icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function PayPalFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal Logo icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function PayPalLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal LogoBorder icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function PayPalLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal Mono icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function PayPalMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* PayPal MonoOutline icon.
* @alias PayPal from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function PayPalMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/** @alias PayPalIcon */
declare function PaypalIcon(props: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the Swish icon in the specified format
*
* @example
* ```tsx
* import { SwishIcon } from 'react-svg-credit-card-payment-icons';
*
* <SwishIcon format="flat" />
* <SwishIcon format="flatRounded" width={100} />
* ```
*/
declare function SwishIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish Flat icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function SwishFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish FlatRounded icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function SwishFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish Logo icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function SwishLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish LogoBorder icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function SwishLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish Mono icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function SwishMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* Swish MonoOutline icon.
* @alias Swish from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function SwishMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay payment icon with dynamic format selection.
*
* @param format - Icon style format: 'flat', 'flatRounded', 'logo', 'logoBorder', 'mono', 'monoOutline'
* @param props - Standard SVG element props
* @returns React component rendering the UnionPay icon in the specified format
*
* @example
* ```tsx
* import { UnionPayIcon } from 'react-svg-credit-card-payment-icons';
*
* <UnionPayIcon format="flat" />
* <UnionPayIcon format="flatRounded" width={100} />
* ```
*/
declare function UnionPayIcon({ format, ...props }: {
format?: 'flat' | 'flatRounded' | 'logo' | 'logoBorder' | 'mono' | 'monoOutline';
} & SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay Flat icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/flat'
*/
declare function UnionPayFlatIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay FlatRounded icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/flat-rounded'
*/
declare function UnionPayFlatRoundedIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay Logo icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/logo'
*/
declare function UnionPayLogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay LogoBorder icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/logo-border'
*/
declare function UnionPayLogoBorderIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay Mono icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/mono'
*/
declare function UnionPayMonoIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/**
* UnionPay MonoOutline icon.
* @alias UnionPay from 'react-svg-credit-card-payment-icons/icons/mono-outline'
*/
declare function UnionPayMonoOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element;
/** @alias UnionPayIcon */
declare function UnionpayIcon(props: {
format?: 'flat' | 'flatRou