Intlayer

import { type Locale, Locales } from '@intlayer/types'; import { type FC, type ImgHTMLAttributes, type JSX, lazy, Suspense, } from 'react'; type FlagProps = ImgHTMLAttributes<HTMLImageElement> & { locale: Locale; }; // This ensures React.lazy always receives a valid component, // regardless of how your bundler loads SVGs. const dynamicFlag = (importFn: () => Promise<any>) => lazy(async () => { const module = await importFn(); const asset = module.default; // Case A: Bundler returns a URL string (e.g. file-loader) // We wrap it in a simple img component if (typeof asset === 'string') { return { default: (props: any) => <img src={asset} alt="flag" {...props} />, }; } // Case B: Bundler returns a React Component (SVGR) // We return it as-is return { default: asset }; }); const flagRecord: Partial<Record<Locale, ReturnType<typeof dynamicFlag>>> = { [Locales.ENGLISH]: dynamicFlag(() => import('./us.svg')), [Locales.FRENCH]: dynamicFlag(() => import('./fr.svg')), [Locales.SPANISH]: dynamicFlag(() => import('./es.svg')), [Locales.PORTUGUESE]: dynamicFlag(() => import('./pt.svg')), [Locales.GERMAN]: dynamicFlag(() => import('./de.svg')), [Locales.AFRIKAANS]: dynamicFlag(() => import('./za.svg')), [Locales.ARABIC]: dynamicFlag(() => import('./sa.svg')), [Locales.AZERI_LATIN]: dynamicFlag(() => import('./az.svg')), [Locales.BELARUSIAN]: dynamicFlag(() => import('./by.svg')), [Locales.BULGARIAN]: dynamicFlag(() => import('./bg.svg')), [Locales.BOSNIAN]: dynamicFlag(() => import('./ba.svg')), [Locales.CATALAN]: dynamicFlag(() => import('./es-ct.svg')), [Locales.CZECH]: dynamicFlag(() => import('./cz.svg')), [Locales.WELSH]: dynamicFlag(() => import('./gb-wls.svg')), [Locales.DANISH]: dynamicFlag(() => import('./dk.svg')), [Locales.DIVEHI]: dynamicFlag(() => import('./mv.svg')), [Locales.GREEK]: dynamicFlag(() => import('./gr.svg')), [Locales.ESPERANTO]: dynamicFlag(() => import('./xx.svg')), // No specific flag [Locales.ESTONIAN]: dynamicFlag(() => import('./ee.svg')), [Locales.BASQUE]: dynamicFlag(() => import('./es-pv.svg')), [Locales.FARSI]: dynamicFlag(() => import('./ir.svg')), [Locales.FINNISH]: dynamicFlag(() => import('./fi.svg')), [Locales.FAROESE]: dynamicFlag(() => import('./fo.svg')), [Locales.GALICIAN]: dynamicFlag(() => import('./es-ga.svg')), [Locales.GUJARATI]: dynamicFlag(() => import('./in.svg')), [Locales.HEBREW]: dynamicFlag(() => import('./il.svg')), [Locales.HINDI]: dynamicFlag(() => import('./in.svg')), [Locales.CROATIAN]: dynamicFlag(() => import('./hr.svg')), [Locales.HUNGARIAN]: dynamicFlag(() => import('./hu.svg')), [Locales.ARMENIAN]: dynamicFlag(() => import('./am.svg')), [Locales.INDONESIAN]: dynamicFlag(() => import('./id.svg')), [Locales.ICELANDIC]: dynamicFlag(() => import('./is.svg')), [Locales.ITALIAN]: dynamicFlag(() => import('./it.svg')), [Locales.JAPANESE]: dynamicFlag(() => import('./jp.svg')), [Locales.GEORGIAN]: dynamicFlag(() => import('./ge.svg')), [Locales.KAZAKH]: dynamicFlag(() => import('./kz.svg')), [Locales.KANNADA]: dynamicFlag(() => import('./in.svg')), [Locales.KOREAN]: dynamicFlag(() => import('./kr.svg')), [Locales.KONKANI]: dynamicFlag(() => import('./in.svg')), [Locales.KYRGYZ]: dynamicFlag(() => import('./kg.svg')), [Locales.LITHUANIAN]: dynamicFlag(() => import('./lt.svg')), [Locales.LATVIAN]: dynamicFlag(() => import('./lv.svg')), [Locales.MAORI]: dynamicFlag(() => import('./nz.svg')), [Locales.FYRO_MACEDONIAN]: dynamicFlag(() => import('./mk.svg')), [Locales.MONGOLIAN]: dynamicFlag(() => import('./mn.svg')), [Locales.MARATHI]: dynamicFlag(() => import('./in.svg')), [Locales.MALAY]: dynamicFlag(() => import('./my.svg')), [Locales.MALTESE]: dynamicFlag(() => import('./mt.svg')), [Locales.NORWEGIAN_BOKMAL]: dynamicFlag(() => import('./no.svg')), [Locales.DUTCH]: dynamicFlag(() => import('./nl.svg')), [Locales.NORTHERN_SOTHO]: dynamicFlag(() => import('./za.svg')), [Locales.PUNJABI]: dynamicFlag(() => import('./in.svg')), [Locales.POLISH]: dynamicFlag(() => import('./pl.svg')), [Locales.PASHTO]: dynamicFlag(() => import('./af.svg')), [Locales.QUECHUA]: dynamicFlag(() => import('./pe.svg')), [Locales.ROMANIAN]: dynamicFlag(() => import('./ro.svg')), [Locales.RUSSIAN]: dynamicFlag(() => import('./ru.svg')), [Locales.SANSKRIT]: dynamicFlag(() => import('./in.svg')), [Locales.SAMI_NORTHERN]: dynamicFlag(() => import('./no.svg')), // No specific flag, assuming Norway [Locales.SLOVAK]: dynamicFlag(() => import('./sk.svg')), [Locales.SLOVENIAN]: dynamicFlag(() => import('./si.svg')), [Locales.ALBANIAN]: dynamicFlag(() => import('./al.svg')), [Locales.SERBIAN_LATIN]: dynamicFlag(() => import('./rs.svg')), [Locales.SWEDISH]: dynamicFlag(() => import('./se.svg')), [Locales.SWEDISH_FINLAND]: dynamicFlag(() => import('./fi.svg')), [Locales.SWEDISH_SWEDEN]: dynamicFlag(() => import('./se.svg')), [Locales.SWAHILI]: dynamicFlag(() => import('./ke.svg')), [Locales.SYRIAC]: dynamicFlag(() => import('./sy.svg')), [Locales.TAMIL]: dynamicFlag(() => import('./in.svg')), [Locales.TELUGU]: dynamicFlag(() => import('./in.svg')), [Locales.THAI]: dynamicFlag(() => import('./th.svg')), [Locales.TAGALOG]: dynamicFlag(() => import('./ph.svg')), [Locales.TSWANA]: dynamicFlag(() => import('./za.svg')), [Locales.TURKISH]: dynamicFlag(() => import('./tr.svg')), [Locales.TATAR]: dynamicFlag(() => import('./ru.svg')), // Assuming Russian Federation [Locales.UKRAINIAN]: dynamicFlag(() => import('./ua.svg')), [Locales.URDU]: dynamicFlag(() => import('./pk.svg')), [Locales.UZBEK_LATIN]: dynamicFlag(() => import('./uz.svg')), [Locales.VIETNAMESE]: dynamicFlag(() => import('./vn.svg')), [Locales.XHOSA]: dynamicFlag(() => import('./za.svg')), [Locales.CHINESE_SIMPLIFIED]: dynamicFlag(() => import('./cn.svg')), [Locales.CHINESE_TRADITIONAL]: dynamicFlag(() => import('./tw.svg')), [Locales.ZULU]: dynamicFlag(() => import('./za.svg')), [Locales.AFRIKAANS_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.ARABIC_UNITED_ARAB_EMIRATES]: dynamicFlag(() => import('./ae.svg')), [Locales.ARABIC_BAHRAIN]: dynamicFlag(() => import('./bh.svg')), [Locales.ARABIC_ALGERIA]: dynamicFlag(() => import('./dz.svg')), [Locales.ARABIC_EGYPT]: dynamicFlag(() => import('./eg.svg')), [Locales.ARABIC_IRAQ]: dynamicFlag(() => import('./iq.svg')), [Locales.ARABIC_JORDAN]: dynamicFlag(() => import('./jo.svg')), [Locales.ARABIC_KUWAIT]: dynamicFlag(() => import('./kw.svg')), [Locales.ARABIC_LEBANON]: dynamicFlag(() => import('./lb.svg')), [Locales.ARABIC_LIBYA]: dynamicFlag(() => import('./ly.svg')), [Locales.ARABIC_MOROCCO]: dynamicFlag(() => import('./ma.svg')), [Locales.ARABIC_OMAN]: dynamicFlag(() => import('./om.svg')), [Locales.ARABIC_QATAR]: dynamicFlag(() => import('./qa.svg')), [Locales.ARABIC_SAUDI_ARABIA]: dynamicFlag(() => import('./sa.svg')), [Locales.ARABIC_SYRIA]: dynamicFlag(() => import('./sy.svg')), [Locales.ARABIC_TUNISIA]: dynamicFlag(() => import('./tn.svg')), [Locales.ARABIC_YEMEN]: dynamicFlag(() => import('./ye.svg')), [Locales.AZERI_LATIN_AZERBAIJAN]: dynamicFlag(() => import('./az.svg')), [Locales.BELARUSIAN_BELARUS]: dynamicFlag(() => import('./by.svg')), [Locales.BULGARIAN_BULGARIA]: dynamicFlag(() => import('./bg.svg')), [Locales.BOSNIAN_BOSNIA_AND_HERZEGOVINA]: dynamicFlag( () => import('./ba.svg') ), [Locales.CATALAN_SPAIN]: dynamicFlag(() => import('./es-ct.svg')), [Locales.CZECH_CZECH_REPUBLIC]: dynamicFlag(() => import('./cz.svg')), [Locales.WELSH_UNITED_KINGDOM]: dynamicFlag(() => import('./gb-wls.svg')), [Locales.DANISH_DENMARK]: dynamicFlag(() => import('./dk.svg')), [Locales.GERMAN_AUSTRIA]: dynamicFlag(() => import('./at.svg')), [Locales.GERMAN_SWITZERLAND]: dynamicFlag(() => import('./ch.svg')), [Locales.GERMAN_GERMANY]: dynamicFlag(() => import('./de.svg')), [Locales.GERMAN_LIECHTENSTEIN]: dynamicFlag(() => import('./li.svg')), [Locales.GERMAN_LUXEMBOURG]: dynamicFlag(() => import('./lu.svg')), [Locales.DIVEHI_MALDIVES]: dynamicFlag(() => import('./mv.svg')), [Locales.GREEK_GREECE]: dynamicFlag(() => import('./gr.svg')), [Locales.ENGLISH_AUSTRALIA]: dynamicFlag(() => import('./au.svg')), [Locales.ENGLISH_BELIZE]: dynamicFlag(() => import('./bz.svg')), [Locales.ENGLISH_CANADA]: dynamicFlag(() => import('./ca.svg')), [Locales.ENGLISH_CARIBBEAN]: dynamicFlag(() => import('./xx.svg')), // No specific flag [Locales.ENGLISH_UNITED_KINGDOM]: dynamicFlag(() => import('./gb.svg')), [Locales.ENGLISH_IRELAND]: dynamicFlag(() => import('./ie.svg')), [Locales.ENGLISH_JAMAICA]: dynamicFlag(() => import('./jm.svg')), [Locales.ENGLISH_NEW_ZEALAND]: dynamicFlag(() => import('./nz.svg')), [Locales.ENGLISH_PHILIPPINES]: dynamicFlag(() => import('./ph.svg')), [Locales.ENGLISH_TRINIDAD_AND_TOBAGO]: dynamicFlag(() => import('./tt.svg')), [Locales.ENGLISH_UNITED_STATES]: dynamicFlag(() => import('./us.svg')), [Locales.ENGLISH_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.ENGLISH_ZIMBABWE]: dynamicFlag(() => import('./zw.svg')), [Locales.SPANISH_ARGENTINA]: dynamicFlag(() => import('./ar.svg')), [Locales.SPANISH_BOLIVIA]: dynamicFlag(() => import('./bo.svg')), [Locales.SPANISH_CHILE]: dynamicFlag(() => import('./cl.svg')), [Locales.SPANISH_COLOMBIA]: dynamicFlag(() => import('./co.svg')), [Locales.SPANISH_COSTA_RICA]: dynamicFlag(() => import('./cr.svg')), [Locales.SPANISH_DOMINICAN_REPUBLIC]: dynamicFlag(() => import('./do.svg')), [Locales.SPANISH_ECUADOR]: dynamicFlag(() => import('./ec.svg')), [Locales.SPANISH_SPAIN]: dynamicFlag(() => import('./es.svg')), [Locales.SPANISH_GUATEMALA]: dynamicFlag(() => import('./gt.svg')), [Locales.SPANISH_HONDURAS]: dynamicFlag(() => import('./hn.svg')), [Locales.SPANISH_MEXICO]: dynamicFlag(() => import('./mx.svg')), [Locales.SPANISH_NICARAGUA]: dynamicFlag(() => import('./ni.svg')), [Locales.SPANISH_PANAMA]: dynamicFlag(() => import('./pa.svg')), [Locales.SPANISH_PERU]: dynamicFlag(() => import('./pe.svg')), [Locales.SPANISH_PUERTO_RICO]: dynamicFlag(() => import('./pr.svg')), [Locales.SPANISH_PARAGUAY]: dynamicFlag(() => import('./py.svg')), [Locales.SPANISH_EL_SALVADOR]: dynamicFlag(() => import('./sv.svg')), [Locales.SPANISH_URUGUAY]: dynamicFlag(() => import('./uy.svg')), [Locales.SPANISH_VENEZUELA]: dynamicFlag(() => import('./ve.svg')), [Locales.ESTONIAN_ESTONIA]: dynamicFlag(() => import('./ee.svg')), [Locales.BASQUE_SPAIN]: dynamicFlag(() => import('./es-pv.svg')), [Locales.FARSI_IRAN]: dynamicFlag(() => import('./ir.svg')), [Locales.FINNISH_FINLAND]: dynamicFlag(() => import('./fi.svg')), [Locales.FAROESE_FAROE_ISLANDS]: dynamicFlag(() => import('./fo.svg')), [Locales.FRENCH_BELGIUM]: dynamicFlag(() => import('./be.svg')), [Locales.FRENCH_CANADA]: dynamicFlag(() => import('./ca.svg')), [Locales.FRENCH_SWITZERLAND]: dynamicFlag(() => import('./ch.svg')), [Locales.FRENCH_FRANCE]: dynamicFlag(() => import('./fr.svg')), [Locales.FRENCH_LUXEMBOURG]: dynamicFlag(() => import('./lu.svg')), [Locales.FRENCH_PRINCIPALITY_OF_MONACO]: dynamicFlag( () => import('./mc.svg') ), [Locales.GALICIAN_SPAIN]: dynamicFlag(() => import('./es-ga.svg')), [Locales.GUJARATI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.HEBREW_ISRAEL]: dynamicFlag(() => import('./il.svg')), [Locales.HINDI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.CROATIAN_BOSNIA_AND_HERZEGOVINA]: dynamicFlag( () => import('./ba.svg') ), [Locales.CROATIAN_CROATIA]: dynamicFlag(() => import('./hr.svg')), [Locales.HUNGARIAN_HUNGARY]: dynamicFlag(() => import('./hu.svg')), [Locales.ARMENIAN_ARMENIA]: dynamicFlag(() => import('./am.svg')), [Locales.INDONESIAN_INDONESIA]: dynamicFlag(() => import('./id.svg')), [Locales.ICELANDIC_ICELAND]: dynamicFlag(() => import('./is.svg')), [Locales.ITALIAN_SWITZERLAND]: dynamicFlag(() => import('./ch.svg')), [Locales.ITALIAN_ITALY]: dynamicFlag(() => import('./it.svg')), [Locales.JAPANESE_JAPAN]: dynamicFlag(() => import('./jp.svg')), [Locales.GEORGIAN_GEORGIA]: dynamicFlag(() => import('./ge.svg')), [Locales.KAZAKH_KAZAKHSTAN]: dynamicFlag(() => import('./kz.svg')), [Locales.KANNADA_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.KOREAN_KOREA]: dynamicFlag(() => import('./kr.svg')), [Locales.KONKANI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.KYRGYZ_KYRGYZSTAN]: dynamicFlag(() => import('./kg.svg')), [Locales.LITHUANIAN_LITHUANIA]: dynamicFlag(() => import('./lt.svg')), [Locales.LATVIAN_LATVIA]: dynamicFlag(() => import('./lv.svg')), [Locales.MAORI_NEW_ZEALAND]: dynamicFlag(() => import('./nz.svg')), [Locales.FYRO_MACEDONIAN_MACEDONIA]: dynamicFlag(() => import('./mk.svg')), [Locales.MONGOLIAN_MONGOLIA]: dynamicFlag(() => import('./mn.svg')), [Locales.MARATHI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.MALAY_BRUNEI_DARUSSALAM]: dynamicFlag(() => import('./bn.svg')), [Locales.MALAY_MALAYSIA]: dynamicFlag(() => import('./my.svg')), [Locales.MALTESE_MALTA]: dynamicFlag(() => import('./mt.svg')), [Locales.NORWEGIAN_BOKMAL_NORWAY]: dynamicFlag(() => import('./no.svg')), [Locales.DUTCH_BELGIUM]: dynamicFlag(() => import('./be.svg')), [Locales.DUTCH_NETHERLANDS]: dynamicFlag(() => import('./nl.svg')), [Locales.NORWEGIAN_NYNORSK_NORWAY]: dynamicFlag(() => import('./no.svg')), [Locales.NORTHERN_SOTHO_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.PUNJABI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.POLISH_POLAND]: dynamicFlag(() => import('./pl.svg')), [Locales.PASHTO_AFGHANISTAN]: dynamicFlag(() => import('./af.svg')), [Locales.PORTUGUESE_BRAZIL]: dynamicFlag(() => import('./br.svg')), [Locales.PORTUGUESE_PORTUGAL]: dynamicFlag(() => import('./pt.svg')), [Locales.QUECHUA_BOLIVIA]: dynamicFlag(() => import('./bo.svg')), [Locales.QUECHUA_ECUADOR]: dynamicFlag(() => import('./ec.svg')), [Locales.QUECHUA_PERU]: dynamicFlag(() => import('./pe.svg')), [Locales.ROMANIAN_ROMANIA]: dynamicFlag(() => import('./ro.svg')), [Locales.RUSSIAN_RUSSIA]: dynamicFlag(() => import('./ru.svg')), [Locales.SANSKRIT_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.SAMI_NORTHERN_FINLAND]: dynamicFlag(() => import('./fi.svg')), [Locales.SAMI_NORTHERN_NORWAY]: dynamicFlag(() => import('./no.svg')), [Locales.SAMI_NORTHERN_SWEDEN]: dynamicFlag(() => import('./se.svg')), [Locales.SLOVAK_SLOVAKIA]: dynamicFlag(() => import('./sk.svg')), [Locales.SLOVENIAN_SLOVENIA]: dynamicFlag(() => import('./si.svg')), [Locales.ALBANIAN_ALBANIA]: dynamicFlag(() => import('./al.svg')), [Locales.SERBIAN_LATIN_BOSNIA_AND_HERZEGOVINA]: dynamicFlag( () => import('./ba.svg') ), [Locales.SERBIAN_LATIN_SERBIA_AND_MONTENEGRO]: dynamicFlag( () => import('./rs.svg') ), [Locales.SWAHILI_KENYA]: dynamicFlag(() => import('./ke.svg')), [Locales.SYRIAC_SYRIA]: dynamicFlag(() => import('./sy.svg')), [Locales.TAMIL_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.TELUGU_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.THAI_THAILAND]: dynamicFlag(() => import('./th.svg')), [Locales.TAGALOG_PHILIPPINES]: dynamicFlag(() => import('./ph.svg')), [Locales.TSWANA_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.TURKISH_TURKEY]: dynamicFlag(() => import('./tr.svg')), [Locales.TATAR_RUSSIA]: dynamicFlag(() => import('./ru.svg')), [Locales.TSOGA]: dynamicFlag(() => import('./xx.svg')), // No specific flag [Locales.UKRAINIAN_UKRAINE]: dynamicFlag(() => import('./ua.svg')), [Locales.URDU_ISLAMIC_REPUBLIC_OF_PAKISTAN]: dynamicFlag( () => import('./pk.svg') ), [Locales.UZBEK_LATIN_UZBEKISTAN]: dynamicFlag(() => import('./uz.svg')), [Locales.VIETNAMESE_VIET_NAM]: dynamicFlag(() => import('./vn.svg')), [Locales.XHOSA_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.CHINESE]: dynamicFlag(() => import('./cn.svg')), [Locales.CHINESE_SIMPLIFIED_CHINA]: dynamicFlag(() => import('./cn.svg')), [Locales.CHINESE_HONG_KONG]: dynamicFlag(() => import('./hk.svg')), [Locales.CHINESE_MACAU]: dynamicFlag(() => import('./mo.svg')), [Locales.CHINESE_SINGAPORE]: dynamicFlag(() => import('./sg.svg')), [Locales.ZULU_SOUTH_AFRICA]: dynamicFlag(() => import('./za.svg')), [Locales.BENGALI]: dynamicFlag(() => import('./in.svg')), [Locales.BENGALI_BANGLADESH]: dynamicFlag(() => import('./bd.svg')), [Locales.BENGALI_INDIA]: dynamicFlag(() => import('./in.svg')), [Locales.BENGALI_MYANMAR]: dynamicFlag(() => import('./mm.svg')), [Locales.BURMESE]: dynamicFlag(() => import('./mm.svg')), [Locales.BURMESE_MYANMAR]: dynamicFlag(() => import('./mm.svg')), [Locales.KHMER]: dynamicFlag(() => import('./kh.svg')), [Locales.KHMER_CAMBODIA]: dynamicFlag(() => import('./kh.svg')), [Locales.LAO]: dynamicFlag(() => import('./la.svg')), [Locales.LAO_LAOS]: dynamicFlag(() => import('./la.svg')), [Locales.YORUBA]: dynamicFlag(() => import('./ng.svg')), [Locales.YORUBA_NIGERIA]: dynamicFlag(() => import('./ng.svg')), [Locales.AMHARIC]: dynamicFlag(() => import('./et.svg')), [Locales.AMHARIC_ETHIOPIA]: dynamicFlag(() => import('./et.svg')), [Locales.NEPALI]: dynamicFlag(() => import('./np.svg')), [Locales.NEPALI_NEPAL]: dynamicFlag(() => import('./np.svg')), }; export const Flag: FC<FlagProps> = ({ locale, alt, ...props }): JSX.Element => { const LazyFlag = flagRecord[locale] ?? dynamicFlag(() => import('./xx.svg')); return ( <Suspense fallback={null}> <LazyFlag alt={alt ?? `${locale} flag`} {...(props as any)} role="img" /> </Suspense> ); };