There are different sets:
- Payment Logos (default): logos used in the payment methods
- Payment Logos (extended version): bigger version of logos used in the payment methods
- Payment Logos:
LogoPayment…
- Payment Logos:
LogoPaymentExt…
- Payment Card Logos:
LogoPaymentCard…
First of all, follow the instructions stated in the main README (Vector graphics
section).
If you want to add a new logo in the Payment Logos set, open the LogoPayment.tsx
file and import the React component:
[…]
import LogoPaymentMaestro from "./svg/LogoPaymentMaestro";
[…]
Add the desired key to the IOPaymentLogos
object with the corresponding component reference:
export const IOPaymentLogos = {
maestro: LogoPaymentMaestro,
…
} as const;
You can add the recently added icon with the following declaration:
// Default size: 24×24px
<LogoPayment name="maestro">
There are two ways:
- In the app, go to the
Profile → Design System → Icons
(you must enableDebug Mode
) - In the repository, go to the
svg/originals
subfolder