# react-br-bank-icons

> Iconpack with all brands of Brazilian banks enrolled in FEBRABAN

Latest version **0.1.0** (published 2020-05-26) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install react-br-bank-icons
pnpm add react-br-bank-icons
yarn add react-br-bank-icons
bun add react-br-bank-icons
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-05-26 |
| First published | 2020-05-26 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 552 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Jonathas Souza |
| Maintainers | jonathasbsouza |

## Links

- npm: https://www.npmjs.com/package/react-br-bank-icons
- Repository: https://github.com/jonathasbsouza/react-br-bank-icons
- Homepage: https://github.com/jonathasbsouza/react-br-bank-icons#readme
- Issues: https://github.com/jonathasbsouza/react-br-bank-icons/issues
- npm.io page: https://npm.io/package/react-br-bank-icons

## Recent versions

- 0.1.0 (latest) — 2020-05-26
- 0.0.5 — 2020-05-26
- 0.0.4 — 2020-05-26

## README

# react-br-bank-icons
[![Coverage Status](https://coveralls.io/repos/github/jonathasbsouza/react-br-bank-icons/badge.svg?branch=master)](https://coveralls.io/github/jonathasbsouza/react-br-bank-icons?branch=master)
[![Build Status](https://travis-ci.org/jonathasbsouza/react-br-bank-icons.svg?branch=master)](https://travis-ci.org/jonathasbsouza/react-br-bank-icons)

> Iconpack with brands of brazilian banks enrolled in FEBRABAN.

![Imagem com todos os ícones disponíveis](docs/react-br-bank-icons-example.jpg)

We currently have about 150 banking institutions registered with FEBRABAN. The purpose of this library is to allow people working on banking platforms to be able to easily display the brand of these institutions when necessary.

## Demo

### **Check it out [here](https://codesandbox.io/s/react-br-bank-icons-mwl81?file=/src/App.js)**


<br />
<br />
<hr />
<br />
<br />

## Installation

With NPM

```sh
npm install react-br-bank-icons --save
```


## Usage example

### Props

You can see the `name` and `bankId` of available icons in [ICONLIST.md](docs/ICONLIST.md). To see all banks enrolled in FEBRABAN, go to [BANKLIST.md](docs/BANKLIST.md).

You can define your icon size with the `size` prop. However, some logos don't behave well in small sizes, and we don't have any perspective in making smallsize-proof icons. Proceed with caution.

You can also define the **border radius** of the icon, with the `borderRadius` prop. The default value is `2`, and means a border-radius of `2px` in a icon with a size of `24px`.

### By bank name

```js
<BankIcon name="itau" size="24" />
```

### By bank ID

```js
<BankIcon bankId={341} size="24" />
```

### Colors

#### Brand colors

```js
<BankIcon name="itau" size="24" />
```

#### Mono

You can define a specific color for the icon, and the library will use a mono version of it. You can use:
-  **HEX colors**: `color="#F4F6F8"`
-  **Color names**: `color='red'`
-  **RGBa**: `color="rgba(244,22,234,3)"`

```js
<BankIcon color="##FF0000" name="itau" size="24" />
```

### Fallback

If no valid `bankName` or `bankId` is given, the component will render a generic bank icon. If you inform a `color`, the `fallBack` icon will be rendered with the informed color.


## Known Issues
If you have any issues with this library, please open an issue.

- BANRISUL logo is a mess.

## Release History

* 0.0.5
    * Extended docs with **Codesandbox** example
* 0.0.4
    * Add basic icons
    * Original and mono colors
    * `borderRadius` prop
    * `size` Prop
    * Basic docs
    * Fallback Icon
    * Tests
    * CI

## Contributing

1. Fork it (<https://github.com/jonathasbsouza/react-br-bank-icons/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

## Meta

Distributed under the GPL-3.0 license. See ``LICENSE`` for more information.

All brands' copyrights goes to their respective legal owners.

---
_Source: https://npm.io/package/react-br-bank-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._