CountryFlag

import { CountryFlag } from "@fanvue/ui/flags";

<CountryFlag country="NL" size={24} label="Netherlands" />;

import { CountryFlag } from "@fanvue/ui/flags";

<CountryFlag country="US" label="United States" />

import { CountryFlag } from "@fanvue/ui/flags";

<div className="flex items-center gap-4">
  <CountryFlag country="NL" label="Netherlands" />
  <CountryFlag country="zz" label="Unknown" />
  <span className="typography-body-small-14px-regular text-content-secondary">
    A real flag beside a code we hold no artwork for. The placeholder keeps the row aligned
    instead of leaving a gap.
  </span>
</div>

import { CountryFlag } from "@fanvue/ui/flags";
import type { CountryFlagSize } from "@fanvue/ui/flags";

const SIZES: CountryFlagSize[] = [16, 20, 24, 32];

<div className="flex items-end gap-4">
  {SIZES.map((size) => (
    <span key={size} className="flex flex-col items-center gap-2">
      <CountryFlag country="US" size={size} />
      <span className="typography-description-12px-regular text-content-secondary">{size}</span>
    </span>
  ))}
</div>