react-currency-flags

React currency flags

What is this?

Using the images from transferwise/currency-flags, this library uses styled-components to create React components for use in your app. Please be aware that the images are in base64 format, so if you are concerned with the bundle size, I suggest that you clone the aforementioned TransferWise's repo and store it in a CDN solution of your own (the distributed format that repo is also base64 when built, so simply installing that module won't work).

Installation

Yarn

$ yarn add react-currency-flags

NPM

$ npm install react-currency-flags

Usage

import CurrencyFlag from 'react-currency-flags';

const CurrencyFlagComponent1 = () => <CurrencyFlag currency="USD" size="sm" />;

const CurrencyFlagComponent2 = () => <CurrencyFlag currency="EUR" width={38} />;

• currency (required, string): 3-letter ISO 4217 currency code (https://en.wikipedia.org/wiki/ISO_4217)
• size (optional, string): The predefined size to use; possible values are sm, md, lg, xl
• width (optional, number): The width of the flag, height will be calculated to keep aspect ratio if no height value is provided
• height (optional, number): The height of the flag, width will be calculated to keep aspect ratio if no width value is provided

You should provide either the size, or width or height; size will take precedence if all values are provided.

See examples in the examples folder.

Why not SVG?

While SVG provides the advantage of scaling, but some flags, such as Mexico's, are very complicated graphically, and would therefore create incredibly large file sizes.