national-flag-icons v1.0.1

National flag icons for React

This component will return a flag icon, depending on the iso-2 country code given as a property.

Usage

Plain React:

import React from 'react';
import Flag from 'national-flag-icons';

const App = ()=> {
  return (
    <Flag flagCode="us" height={25} />
  )
}
export default App;

React with Typescript:

import React from 'react';
import Flag from 'national-flag-icons';
import type { flagCodeType } from 'national-flag-icons';

type myProps = {
  language : string,
  flag : string
}

const LanguageSelected = (props: myProps)=> {
  let flagCode = props.flag  as flagCodeType;
  let sizeY : number = 30;
  return (
    <>
      <span>{props.language}</span>
      <Flag flagCode={flagCode} height={sizeY}/>
    </>
  )
}
export default LanguageSelected;

The above example shows, how to use the component, if the 'flagCode' parameter is coming as a string variable.

Component properties

Usable flag codes:

ad, at, bh, by, cm, dj, et, ge, gs, id, jm, kw, lu, ml, mw, nl, ph, re, sh, sy, tn, uy, ye, ae, au, bi, bz, cn, dk, eu, gf, gt, ie, jo, ky, lv, mm, mx, no, pk, ro, si, sz, to, uz, yt, af, aw, bj, ca, co, dm, fi, gg, gu, il, jp, kz, ly, mn, my, np, pl, rs, sj, tc, tr, va, za, ag, ax, bm, cc, cr, do, fj, gh, gw, im, ke, la, ma, mo, mz, nr, pm, ru, sk, td, tt, vc, zm, ai, az, bn, cd, cs, dz, fk, gi, gy, in, kg, lb, mc, mp, na, nu, pn, rw, sl, tf, tv, ve, zw, al, ba, bo, cf, cu, ec, fm, gl, hk, io, kh, lc, md, mq, nc, nz, pr, sa, sm, tg, tw, vg, am, bb, br, cg, cv, ee, fo, gm, hm, iq, ki, li, me, mr, nc2, om, ps, sb, sn, th, tz, vi, an, bd, bs, ch, cx, eg, fr, gn, hn, ir, km, lk, mf, ms, ne, pa, pt, sc, so, tj, ua, vn, ao, be, bt, ci, cy, eh, ga, gp, hr, is, kn, lr, mg, mt, nf, pe, pw, sd, sr, tk, ug, vu, ar, bf, bv, ck, cz, er, gb, gq, ht, it, kp, ls, mh, mu, ng, pf, py, se, st, tl, um, wf, as, bg, bw, cl, de, es, gd, gr, hu, je, kr, lt, mk, mv, ni, pg, qa, sg, sv, tm, us, ws

<Flag flagCode="us" height={25}  className="myFlag" style={{ boxShadow: "2px 2px 1px #9E9E9E" }} />  

Other exported items

Alternate usage

There is a second component which can be used alternatively. The original component gives back an image encapsulated into a div element.
The alternate component (Flag2) is returning a single div element, where the background image is used as the flag image. In certain situations it gives you a cleaner and simpler html code, but you can't resize the icon, it is keeping the original dimensions of 22 by 14 pixels. If you try to set the size, the image will fall apart. This is because the component is using the sprite image technology, where a big, matrixed file is holding together the individual flag images, and only the necessary proportion of that image is being showed.

import React from 'react';
import {Flag2} from 'national-flag-icons';

const App = ()=> {
  return (
    <Flag2 flagCode="us" />
  )
}

Written by: Attila Kiss, e-LET Kft, Hungary ( GitHub: kissato70 )

Licence: MIT

Report issues here.

Support the project >>> Donation

Please support the further releases, if you like this component! Thank you!