currency-flags

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

<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. 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
2. Add correctly sized svg files to wise-atoms
3. Consume the new wise-atoms in this repo (has to be done by commit tag)
4. Add a new line to src/styles.css for the new currency, referencing the new flag name.
5. Bump version number in package.json according to semver and add an item that a release will be based on to CHANGELOG.md. yarn install to ensure the correct version in the lockfile.
6. Submit your pull request from a feature branch and get code reviewed.
7. If the pull request is approved and the Github Actions build passes, you will be able to squash and merge.
8. Code will automatically be released to GitHub and published to npm according to the version specified in the changelog and package.json.