The flags map

Besides the individual components, the package exports a flags const typed as Record<CountryAlpha2, Component>, useful when the country code is only known at runtime. Pick a country to render its flag dynamically.

import { flags } from '@mediayard/agoratopia-ui/assets/vectors/flags'; import type { CountryAlpha2 } from '@oglofus/localization'; let country = $state<CountryAlpha2>('CY'); const Flag = $derived(flags[country]); <Flag width={48} height={48} />

Flag gallery