# currency-flags

This package outputs two CSS files (minified and unminified) with classes for currency codes.
It also outputs a folder with the new SVG circular flags.

> **Major version bump:** Note that v4 uses SVG flags from wise-atoms that are circular for some of the flags and the rest of the flags are the old rectangular ones that have been turned in to circles using CSS

## How to use

**1. Install**

`yarn add currency-flags`

**2. Add CSS to page**

**3. Use**

```html
<div class="currency-flag currency-flag-usd"></div>
```

The `currency-flag` selector has a default `display` of `inline-block`, size of `24x24` and a `background-size` of `cover`.
`currency-flag-sm`, `currency-flag-lg` and `currency-flag-xl` modifiers are available.

### Flag source images

The source for some of the flags is [wise-atoms](https://github.com/transferwise/wise-atoms/tree/main/flags).
The source images for the rest of the (rectangular) flags are available in `src/old-flags/${currency_code}.png`. The rectangular flags are also available as static-assets from https://wise.com/public-resources/assets/flags/rectangle/{currency-code}.png

## Contributing

1.  Clone repo
1.  Add correctly sized `svg` files to [wise-atoms](https://github.com/transferwise/wise-atoms/tree/main/flags)
1.  Consume the new wise-atoms in this repo (has to be done by commit tag)
1.  Add a new line to `src/styles.css` for the new currency, referencing the new flag name.
1.  **Bump version number in `package.json` according to [semver](http://semver.org/) and add an item that a release will be based on to `CHANGELOG.md`**. `yarn install` to ensure the correct version in the lockfile.
1.  Submit your pull request from a feature branch and get code reviewed.
1.  If the pull request is approved and the [Github Actions build](https://github.com/transferwise/currency-flags/actions) passes, you will be able to squash and merge.
1.  Code will automatically be released to [GitHub](https://github.com/transferwise/currency-flags/releases) and published to [npm](https://www.npmjs.com/package/currency-flags) according to the version specified in the changelog and `package.json`.