react-card-icons

A simple React component to display credit card icons based on card type.

Installation

npm i @harshchauhan2410/react-card-icons

Usage

import React from "react";
import CardIcon from "react-card-icons";

export default function App() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
      <CardIcon type="visa" size={48} />
      <CardIcon type="mastercard" size={48} />
      <CardIcon type="amex" size={48} />
      <CardIcon type="discover" size={48} />
      <CardIcon type="unknown" size={48} />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |---------------|----------------|--------------|--------------| | type | CardType | — | Card type to display (visa, mastercard, amex, discover, jcb, dinersclub, unionpay, maestro, cirrus, stripe, googlepay, applepay, amazonpay, unknown) | | size | number | 32 | Width & height of the icon in pixels | | className| string | — | CSS class for the wrapper <span> | | alt | string | — | ARIA label for accessibility |