https://github.com/ftzi/react-native-payment-icons
Add Credit Card and other Payment Methods icons to your React Native app!
https://github.com/ftzi/react-native-payment-icons
card credit credit-card creditcard icon icons logo logos mastercard paypal react-native visa
Last synced: 3 months ago
JSON representation
Add Credit Card and other Payment Methods icons to your React Native app!
- Host: GitHub
- URL: https://github.com/ftzi/react-native-payment-icons
- Owner: ftzi
- License: mit
- Created: 2021-12-13T02:58:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-03T23:33:32.000Z (6 months ago)
- Last Synced: 2025-04-04T00:26:19.214Z (6 months ago)
- Topics: card, credit, credit-card, creditcard, icon, icons, logo, logos, mastercard, paypal, react-native, visa
- Language: TypeScript
- Homepage:
- Size: 439 KB
- Stars: 18
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-native-payment-icons)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/react-native-payment-icons)
[](http://makeapullrequest.com)
[](https://github.com/SrBrahma/react-native-payment-icons)
# react-native-payment-icons
There wasn't a package for displaying credit cards and other payment methods icons in React Native. **Wasn't!**
We use SVGs that were transormed into React Native JSX, so there isn't a loading time to show them up in Expo Go / Expo Dev Client, as images are transferred on demand.
The SVGs are compressed / optimized by ~60%. It uses the Flat Rounded images from [`aaronfagan/svg-credit-card-payment-icons`](https://github.com/aaronfagan/svg-credit-card-payment-icons), and I intend to support other icon packs in the future, in a tree-shakable way.
If you need to discover the card type (`visa`, `mastercard` etc), you can use the [credit-card-type](https://www.npmjs.com/package/credit-card-type) package.
> My App using this package!
## 💿 Installation
1) Install [react-native-svg](https://github.com/react-native-svg/react-native-svg)
2) Install this package:
```bash
npm install react-native-payment-icons
# or
yarn add react-native-payment-icons
```
## 📖 Usage
```jsx
import { PaymentIcon } from 'react-native-payment-icons'
```
* You must set the `type` property to the desired credit card / payment method.
### Available `types` and their images:
> When there is more than one type for the same image, it's an alias!
|Type |Image
|--- |---
|`alipay` |
|`american-express`
`amex` |
|`diners-club`
`diners` |
|`discover` |
|`elo` |
|`hiper` |
|`hipercard` |
|`jcb` |
|`maestro` |
|`mastercard`
`master` |
|`mir` |
|`paypal` |
|`unionpay` |
|`visa` |
|`generic` |
|`cvv`
`code` |
> Images from [`aaronfagan/svg-credit-card-payment-icons`](https://github.com/aaronfagan/svg-credit-card-payment-icons)
* You shall define either `width` or `height`. No need to define both, as it's set `aspectRatio: 780 / 500`, the width / height of the SVGs. If neither is defined, `width` defaults to `40`.
* It also accepts all the props of the `Svg` component, like `style`.
* On invalid `type`, it defaults to `generic`.
## 📰 [Changelog](CHANGELOG.md)
## 🤖 Dev
> How to setup your own images! If you just want to use the package, you may ignore this!
* To transform the SVGs, [download the .svgs](https://stackoverflow.com/a/18194523/10247962) from [svg-credit-card-payment-icons](https://github.com/aaronfagan/svg-credit-card-payment-icons). I used the `Flat Rounded` styled images. Store them in `./svgsSrc/`.
* If you want to add your own images, be sure that their width are 780 and height 500, to have the same ratio as the others.
#### You may run `npm run svg` that executes the two steps below!
* Run [svgo](https://github.com/svg/svgo) to compress the SVGs. The best here is `-p 0` which sets the precision to 0, decreasing the total size from 96KB to 38KB. The quality loss isn't noticeable unless comparing, except in mastercard and diners that have some artifacts, so we set `precision 1` for them. There are other **svgo** plugins set in `svgo.config.js` file that are automatically applied when running **svgo** at the same **cwd**.
`npx svgo -f ./svgsSrc -o ./svgsCompressed -p 0`
`npx svgo -p 1 ./svgsSrc/mastercard.svg ./svgsSrc/diners.svg -o ./svgsCompressed/mastercard.svg ./svgsCompressed/diners.svg`
* Then, transform them into React Native format using [svgr](https://github.com/gregberge/svgr). `--native` for generating code for React Native, `--typescript` for .tsx. We store them under `src/components`:
`npx @svgr/cli ./svgsCompressed --out-dir src/components --native --typescript`
> There may happen some errors in the RN convertion you may need to deal manually. If happens, `npm run build` will throw them up.
* An `index.tsx` will be automatically created re-exporting all the components.
* If adding or removing images, you will need to change src/index.tsx to add / remove the components in the dictionary.
* If you want to compile the TS files into JS, `npm run build`.