# NgxEfFlags

Instalation:

    npm install ngx-ef-flags --save    
Importing styles:

  on your global styles file

    @import '~ngx-ef-flags/flags.css'

    
Module:

    import { `NgxEfFlagsModule` } from 'ngx-ef-flags';

    imports:[
      NgxEfFlagsModule
      ...
    ] 

HTML:  

    <flags flagName="mastercard" type="flat"></flags>

    or dinamyc name

    <flags [flagName]="variable" type="flat"></flags>

## List with flags and types
<!-- | Name | single                      | flat                    | flat-rounded                            | mono                    | mono-outline                            |
| ---- | --------------------------- | ----------------------- | --------------------------------------- | ----------------------- | --------------------------------------- |
| visa | ![visa](./single/single-visa.svg) | ![](flat/flat-visa.svg) | ![](flat-rounded/flat-rounded-visa.svg) | ![](mono/mono-visa.svg) | ![](mono-outline/mono-outline-visa.svg) |
| mastercard | ![](single/single-mastercard.svg) | ![](flat/flat-mastercard.svg) | ![](flat-rounded/flat-rounded-mastercard.svg) | ![](mono/mono-mastercard.svg) | ![](mono-outline/mono-outline-mastercard.svg) |
| elo | ![](single/single-elo.svg) | ![](flat/flat-elo.svg) | ![](flat-rounded/flat-rounded-elo.svg) | ![](mono/mono-elo.svg) | ![](mono-outline/mono-outline-elo.svg) |
| maestro | ![](single/single-maestro.svg) | ![](flat/flat-maestro.svg) | ![](flat-rounded/flat-rounded-maestro.svg) | ![](mono/mono-maestro.svg) | ![](mono-outline/mono-outline-maestro.svg) |
| visa-electron | ![](single/single-visa-electron.svg) | ![](flat/flat-visa-electron.svg) | ![](flat-rounded/flat-rounded-visa-electron.svg) | ![](mono/mono-visa-electron.svg) | ![](mono-outline/mono-outline-visa-electron.svg) |
| american-express | ![](single/single-amex.svg) | ![](flat/flat-amex.svg) | ![](flat-rounded/flat-rounded-amex.svg) | ![](mono/mono-amex.svg) | ![](mono-outline/mono-outline-amex.svg) |
| paypal | ![](single/single-paypal.svg) | ![](flat/flat-paypal.svg) | ![](flat-rounded/flat-rounded-paypal.svg) | ![](mono/mono-paypal.svg) | ![](mono-outline/mono-outline-paypal.svg) |
| alipay | ![](single/single-alipay.svg) | ![](flat/flat-alipay.svg) | ![](flat-rounded/flat-rounded-alipay.svg) | ![](mono/mono-alipay.svg) | ![](mono-outline/mono-outline-alipay.svg) |
| diners | ![](single/single-diners.svg) | ![](flat/flat-diners.svg) | ![](flat-rounded/flat-rounded-diners.svg) | ![](mono/mono-diners.svg) | ![](mono-outline/mono-outline-diners.svg) |
| discover | ![](single/single-discover.svg) | ![](flat/flat-discover.svg) | ![](flat-rounded/flat-rounded-discover.svg) | ![](mono/mono-discover.svg) | ![](mono-outline/mono-outline-discover.svg) |
| hiper | ![](single/single-hiper.svg) | ![](flat/flat-hiper.svg) | ![](flat-rounded/flat-rounded-hiper.svg) | ![](mono/mono-hiper.svg) | ![](mono-outline/mono-outline-hiper.svg) |
| jcb | ![](single/single-jcb.svg) | ![](flat/flat-jcb.svg) | ![](flat-rounded/flat-rounded-jcb.svg) | ![](mono/mono-jcb.svg) | ![](mono-outline/mono-outline-jcb.svg) |
| hipercard | ![](single/single-hipercard.svg) | ![](flat/flat-hipercard.svg) | ![](flat-rounded/flat-rounded-hipercard.svg) | ![](mono/mono-hipercard.svg) | ![](mono-outline/mono-outline-hipercard.svg) |
| unionpay | ![](single/single-unionpay.svg) | ![](flat/flat-unionpay.svg) | ![](flat-rounded/flat-rounded-unionpay.svg) | ![](mono/mono-unionpay.svg) | ![](mono-outline/mono-outline-unionpay.svg) |
| default | ![](single/single-default.svg) | ![](flat/flat-default.svg) | ![](flat-rounded/flat-rounded-default.svg) | ![](mono/mono-default.svg) | ![](mono-outline/mono-outline-default.svg) | -->

<table>

  <tr>
    <td>name</td>
    <td>single</td>
    <td>flat</td>
    <td>flat-rounded</td>
    <td>mono</td>
    <td>mono-outline</td>
  </tr>
  
  <tr>
    <td>visa</td>
    <td align="center">
        <img src="single/single-visa.svg" width="100px;" alt="visa"/>
    </td>
    <td align="center">
        <img src="flat/flat-visa.svg" width="100px;" alt="visa"/>
    </td>
    <td align="center">
        <img src="flat/flat-visa.svg" width="100px;" alt="visa"/>
    </td>
    <td align="center">
        <img src="flat-rounded/flat-rounded-visa.svg" width="100px;" alt="visa"/>
    </td>
    <td align="center">
        <img src="mono/mono-visa.svg" width="100px;" alt="visa"/>
    </td>
    <td align="center">
        <img src="mono-outline/mono-outline-visa.svg" width="100px;" alt="visa"/>
    </td>
  </tr>
</table>

## List with acquirers


| Type             | getnet                               | cielo                            | mercado-pago                     | pag-seguro                           | rede                            | stone                           | default                           |
| ---------------- | ------------------------------------ | -------------------------------- | -------------------------------- | ------------------------------------- | ------------------------------- | ------------------------------- | --------------------------------- |
| adquirente          | ![](acquirer/acquirer-getnet.svg)    | ![](acquirer/acquirer-cielo.svg) | ![](acquirer/acquirer-mp.svg)    | ![](acquirer/acquirer-pagseguro.svg)  | ![](acquirer/acquirer-rede.svg) | ![](acquirer/acquirer-stone.svg)| ![](acquirer/acquirer-default.svg)