Flag

NbFlag renders country flag SVGs. Flags are loaded as async Vue components so they are code-split and only fetched when needed.

The name prop takes a two-letter ISO 3166-1 alpha-2 country code in lowercase (e.g. pt, gb-sct, es). The full list of available flags is below.

Overview ​

Props ​

How a code is resolved ​

The 255 flags follow the same three tiers as NbIcon: a literal code is linked as one module by the bundler plugin, an imported module can be passed directly, and a code known only at runtime needs either registerFlags for a bounded set or @nubisco/ui/flags/all for an open one.

A country selector is the case the full catalogue exists for, since it must render whatever the user picks:

import '@nubisco/ui/flags/all'

A built app therefore contains only the flags its templates named; see What ships in your bundle for how to check, and how to ship all 255 on purpose.

Where the codes are bounded, register them instead and the page links only those flags:

import { registerFlags } from '@nubisco/ui'
import * as pt from '@nubisco/ui/flags/pt'
import * as es from '@nubisco/ui/flags/es'

registerFlags({ pt, es })

Sizes ​

You can also pass any number: :size="48" sets width and height to 48px.

Events ​

Mapping locale codes to flag names ​

Locale codes like pt_PT or en_US are not the same as flag names. To convert, extract the country segment and lowercase it:

// "pt_PT" -> "pt", "en_US" -> "us", "zh_Hans_CN" -> "cn"
function localeToFlagName(code: string): string {
  const parts = code.split(/[-_]/)
  const country = [...parts].reverse().find((p) => /^[A-Z]{2}$/.test(p))
  return country ? country.toLowerCase() : parts[0].toLowerCase()
}

For bare language codes without a country (en, fr), the language code itself is used as the flag name. Not all language codes have a corresponding flag, so the component will silently render nothing if the name does not match a known flag.