marcovoliveira
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
1) 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 |
 |
code |
 |
codefront |
 |
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.