UI·loomora/Flag
Flag
Loads a static country SVG from /flags/{CODE}.svg and shows a country-code fallback if loading fails.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Flag } from 'loomora'
<Flag country="OM" size={32} ratio="3x2" />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| country | CountryType | required | Country code used to construct the SVG path. |
| size | number | 20 | Image wrapper width in pixels. |
| ratio | '3x2' | '1x1' | '3x2' | Width-to-height ratio. |
| fallback | ReactNode | uppercase country code | Fallback content shown after image failure. |
| setIsExist | (exists: boolean) => void | — | Notified on image load or error. |