Tiny Flag React

Display country flags in less than 1KB with the magic of unicode (with graceful fallbacks).

Displays emoji by default, when not supported, falls back to an image tag.

DEMO

Install

npm i --save tiny-flag-react
yarn add tiny-flag-react

Usage

import TinyFlag from "tiny-flag";

<TinyFlag
  country="US" // ISO 3166-1 alpha-2 code
  alt="United States Flag" // Used as the image alt tag
  fallbackImageURL="https://cdn.jsdelivr.net/npm/[email protected]/img/SVG/US.svg" // Used when emoji flags are not supported.
/>;

DEMO

Recommended Fallback Images

Goes well with FlagKit and Webpack's file-loader for fallback images:

npm i --save https://github.com/madebybowtie/FlagKit.git
yarn add https://github.com/madebybowtie/FlagKit.git

let country = "US";
let countryName = "United States";

<TinyFlag
  country={country}
  countryName={countryName}
  fallbackImageURL={require("FlagKit/Assets/SVG/" + country + ".svg").default}
>