React SVG Card Payment Icons
SVG Credit Card & Payment Icons: 6 Styles, 80 Icons for React ⚛️
A collection of SVG based credit card logo icons. React componnent with Typescript support.
Live Demo
💿 Installation
- Install this package:
npm install react-svg-credit-card-payment-icons
# or
yarn add react-svg-credit-card-payment-icons📦 Usage
import { PaymentIcon } from 'react-svg-credit-card-payment-icons';....
const App = () => {
return (
<PaymentIcon type="visa" format="flatRounded" width={100} />
);
};Types and Formats
Available types and their images:
If the type does not exist, the default setting is generic.
| Type | Image |
|---|---|
alipay |
 |
amex |
 |
diners |
 |
discover |
 |
elo |
 |
hiper |
 |
hipercard |
 |
jcb |
 |
maestro |
 |
mastercard |
 |
mir |
 |
paypal |
 |
unionpay |
 |
visa |
 |
generic |
 |
cvv |
 |
Images from aaronfagan/svg-credit-card-payment-icons
Available formats:
If the format is not specified, the default setting is flat.
| Format | Image |
|---|---|
flat |
 |
flatRounded |
|
logo |
 |
logoBorder |
 |
mono |
 |
monoOutline |
 |
-
Specify either width or height; there's no requirement to define both. The aspect ratio is preset at 780:500 for SVGs. If neither width nor height is defined, width will default to 40.
-
The component also allows all the properties (props) of the Svg component, including attributes like style.
-
If an invalid type is provided, the default setting is generic.