Attention! This is a fork of react-world-flags and provides two alternative methods of usage which can greatly reduce bundle size when using ESM-friendly bundlers: Cherry-Picking and Raster Flags

react-world-flags

Easy to use SVG flags of the world for react

Demo

Installation

npm install --save @weston/react-world-flags

Usage

import Flag from '@weston/react-world-flags'

<Flag code={ code } />

Where code is the two letter, three letter or three digit country code.

You can also pass an optional fallback which renders if the given code doesn't correspond to a flag:

import Flag from '@weston/react-world-flags'

<Flag code="foo" fallback={ <span>Unknown</span> } />

All props but code and fallback are passed through to the rendered img

<Flag code="nor" height="16" />

// <img src="data:image/svg+xml..." height="16">

SVG's are inlined using Data_URIs.

Alternative Usage

By default, bundlers will include all flags provided by this library which will add about 1.2 MB gzipped to your application.

This fork (@weston/react-world-flags) provides two alternative methods of usage which can greatly reduce bundle size when using ESM-friendly bundlers: Cherry-Picking and Raster Flags

Option 1: Cherry-Picking

Import just the flags needed for your application. This is useful for scenarios in which you only need a small subset of available flags and don't need to look them up by country code. Unused flags should automatically be omitted by your bundler via static analysis (tree-shaking).

// Only import flags for USA and Canada
import { FlagUS, FlagCA } from '@weston/react-world-flags'

<FlagUS />
<FlagCA />

Option 2: Raster Flags

Substitute default SVG flags with raster versions for flags having large amounts of detail (highly detailed images are generally more compact when represented as bitmaps). This approach automatically replaces these flags with WebP versions which can significantly reduce bundle size. Use this for scenarios where your application still needs the entire catalog of flags but having flags of fixed size is acceptable (e.g. icons).

The following example will produce either an SVG or WebP (of height 128px) depending on which is more compact given a particular country's flag:

import { Flag128 as Flag } from '@weston/react-world-flags'

// Mexico's flag is detailed and always smaller as WebP
<Flag code="mx" />
// result: <img src="data:image/webp..." height="128">

// Japan's flag is simple and always smaller as SVG
<Flag code="jp" />
// result: <img src="data:image/svg+xml..." height="128">

// Still able to customize image height
<Flag code="mx" height="100" />
// result: <img src="data:image/webp..." height="100">

Rasters are available in 32px, 64px, 128px, 256px, and 512px versions (i.e. Flag32, Flag64, Flag128, Flag256, or Flag512).

Bundle Footprint

| Import | Image Type | Bundle Size (gzip) | |:------:|:----------:|:--------------------:| | Flag | Default, SVG | 1.18 MB | | { Flag512 } | SVG or WebP (512px) | 0.80 MB (68%) | | { Flag256 } | SVG or WebP (256px) | 0.52 MB (44%) | | { Flag128 } | SVG or WebP (128px) | 0.30 MB (26%) | | { Flag64 } | SVG or WebP (64px) | 0.19 MB (16%) | | { Flag32 } | SVG or WebP (32px) | 0.13 MB (11%) |