credit-card-logos

SVG Credit Card Logos

Flexible SVG credit card logo assets and CSS.

Install

npm install -S credit-card-logos

LESS Usage

@import "node_modules/credit-card-logos/index.less";
 
#credit-card-logos > .init(
  // Initialize with path to logos on your webserver 
  // Default: `/img` 
  @path: '/path/to/logos'
 
  // Specify the base width of the element 
  // Default: 160px; 
  // (optional) 
, @width: 160px
 
  // Specify the base height of the element 
  // Default: 100px; 
  // (optional) 
, @height: 100px
);

In a build step, copy the files from the /img directory of this module to your own public directory (preferably one that is ignored from vcs).

HTML Usage

<div class="card-logo card-logo-visa"></div>
<div class="card-logo card-logo-mastercard"></div>
<div class="card-logo card-logo-amex"></div>
 
<!-- Small Variant -->
<div class="card-logo small card-logo-visa"></div>
 
<!-- Large Variant -->
<div class="card-logo large card-logo-visa"></div>

Building

After cloning, run

npm install
gulp build

Licensing

The SVG assets were found on https://www.iconfinder.com/ and had Creative Commons license.