arevdata 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (289) hide show
  1. package/README.md +499 -0
  2. package/dist/arevdata.cjs +38955 -0
  3. package/dist/arevdata.cjs.map +1 -0
  4. package/dist/arevdata.js +38955 -0
  5. package/dist/arevdata.js.map +1 -0
  6. package/dist/assets/flags/LICENSE.flag-icons.txt +21 -0
  7. package/dist/assets/flags/README.md +11 -0
  8. package/dist/assets/flags/index.html +88 -0
  9. package/dist/assets/flags/overrides/xn.svg +6 -0
  10. package/dist/assets/flags/svg/ad.svg +150 -0
  11. package/dist/assets/flags/svg/ae.svg +6 -0
  12. package/dist/assets/flags/svg/af.svg +81 -0
  13. package/dist/assets/flags/svg/ag.svg +14 -0
  14. package/dist/assets/flags/svg/al.svg +5 -0
  15. package/dist/assets/flags/svg/am.svg +5 -0
  16. package/dist/assets/flags/svg/ao.svg +13 -0
  17. package/dist/assets/flags/svg/ar.svg +32 -0
  18. package/dist/assets/flags/svg/at.svg +4 -0
  19. package/dist/assets/flags/svg/au.svg +8 -0
  20. package/dist/assets/flags/svg/az.svg +8 -0
  21. package/dist/assets/flags/svg/ba.svg +12 -0
  22. package/dist/assets/flags/svg/bb.svg +6 -0
  23. package/dist/assets/flags/svg/bd.svg +4 -0
  24. package/dist/assets/flags/svg/be.svg +7 -0
  25. package/dist/assets/flags/svg/bf.svg +7 -0
  26. package/dist/assets/flags/svg/bg.svg +5 -0
  27. package/dist/assets/flags/svg/bh.svg +4 -0
  28. package/dist/assets/flags/svg/bi.svg +15 -0
  29. package/dist/assets/flags/svg/bj.svg +14 -0
  30. package/dist/assets/flags/svg/bn.svg +36 -0
  31. package/dist/assets/flags/svg/bo.svg +673 -0
  32. package/dist/assets/flags/svg/br.svg +45 -0
  33. package/dist/assets/flags/svg/bs.svg +13 -0
  34. package/dist/assets/flags/svg/bt.svg +89 -0
  35. package/dist/assets/flags/svg/bw.svg +7 -0
  36. package/dist/assets/flags/svg/by.svg +18 -0
  37. package/dist/assets/flags/svg/bz.svg +145 -0
  38. package/dist/assets/flags/svg/ca.svg +4 -0
  39. package/dist/assets/flags/svg/cd.svg +5 -0
  40. package/dist/assets/flags/svg/cf.svg +15 -0
  41. package/dist/assets/flags/svg/cg.svg +12 -0
  42. package/dist/assets/flags/svg/ch.svg +9 -0
  43. package/dist/assets/flags/svg/cl.svg +13 -0
  44. package/dist/assets/flags/svg/cm.svg +15 -0
  45. package/dist/assets/flags/svg/cn.svg +11 -0
  46. package/dist/assets/flags/svg/co.svg +7 -0
  47. package/dist/assets/flags/svg/cr.svg +7 -0
  48. package/dist/assets/flags/svg/cu.svg +13 -0
  49. package/dist/assets/flags/svg/cv.svg +13 -0
  50. package/dist/assets/flags/svg/cy.svg +6 -0
  51. package/dist/assets/flags/svg/cz.svg +5 -0
  52. package/dist/assets/flags/svg/de.svg +5 -0
  53. package/dist/assets/flags/svg/dj.svg +13 -0
  54. package/dist/assets/flags/svg/dk.svg +5 -0
  55. package/dist/assets/flags/svg/dm.svg +152 -0
  56. package/dist/assets/flags/svg/do.svg +121 -0
  57. package/dist/assets/flags/svg/dz.svg +5 -0
  58. package/dist/assets/flags/svg/ec.svg +138 -0
  59. package/dist/assets/flags/svg/ee.svg +5 -0
  60. package/dist/assets/flags/svg/eg.svg +38 -0
  61. package/dist/assets/flags/svg/er.svg +8 -0
  62. package/dist/assets/flags/svg/es.svg +544 -0
  63. package/dist/assets/flags/svg/et.svg +14 -0
  64. package/dist/assets/flags/svg/fi.svg +5 -0
  65. package/dist/assets/flags/svg/fj.svg +120 -0
  66. package/dist/assets/flags/svg/fm.svg +11 -0
  67. package/dist/assets/flags/svg/fr.svg +5 -0
  68. package/dist/assets/flags/svg/ga.svg +7 -0
  69. package/dist/assets/flags/svg/gb.svg +7 -0
  70. package/dist/assets/flags/svg/gd.svg +27 -0
  71. package/dist/assets/flags/svg/ge.svg +6 -0
  72. package/dist/assets/flags/svg/gh.svg +6 -0
  73. package/dist/assets/flags/svg/gm.svg +14 -0
  74. package/dist/assets/flags/svg/gn.svg +7 -0
  75. package/dist/assets/flags/svg/gq.svg +23 -0
  76. package/dist/assets/flags/svg/gr.svg +16 -0
  77. package/dist/assets/flags/svg/gt.svg +204 -0
  78. package/dist/assets/flags/svg/gw.svg +13 -0
  79. package/dist/assets/flags/svg/gy.svg +9 -0
  80. package/dist/assets/flags/svg/hn.svg +18 -0
  81. package/dist/assets/flags/svg/hr.svg +58 -0
  82. package/dist/assets/flags/svg/ht.svg +116 -0
  83. package/dist/assets/flags/svg/hu.svg +7 -0
  84. package/dist/assets/flags/svg/id.svg +4 -0
  85. package/dist/assets/flags/svg/ie.svg +7 -0
  86. package/dist/assets/flags/svg/il.svg +14 -0
  87. package/dist/assets/flags/svg/in.svg +25 -0
  88. package/dist/assets/flags/svg/iq.svg +10 -0
  89. package/dist/assets/flags/svg/ir.svg +219 -0
  90. package/dist/assets/flags/svg/is.svg +12 -0
  91. package/dist/assets/flags/svg/it.svg +7 -0
  92. package/dist/assets/flags/svg/jm.svg +8 -0
  93. package/dist/assets/flags/svg/jo.svg +16 -0
  94. package/dist/assets/flags/svg/jp.svg +11 -0
  95. package/dist/assets/flags/svg/ke.svg +23 -0
  96. package/dist/assets/flags/svg/kg.svg +4 -0
  97. package/dist/assets/flags/svg/kh.svg +61 -0
  98. package/dist/assets/flags/svg/ki.svg +36 -0
  99. package/dist/assets/flags/svg/km.svg +16 -0
  100. package/dist/assets/flags/svg/kn.svg +14 -0
  101. package/dist/assets/flags/svg/kp.svg +15 -0
  102. package/dist/assets/flags/svg/kr.svg +24 -0
  103. package/dist/assets/flags/svg/kw.svg +13 -0
  104. package/dist/assets/flags/svg/kz.svg +36 -0
  105. package/dist/assets/flags/svg/la.svg +12 -0
  106. package/dist/assets/flags/svg/lb.svg +15 -0
  107. package/dist/assets/flags/svg/lc.svg +8 -0
  108. package/dist/assets/flags/svg/li.svg +43 -0
  109. package/dist/assets/flags/svg/lk.svg +22 -0
  110. package/dist/assets/flags/svg/lr.svg +14 -0
  111. package/dist/assets/flags/svg/ls.svg +8 -0
  112. package/dist/assets/flags/svg/lt.svg +7 -0
  113. package/dist/assets/flags/svg/lu.svg +5 -0
  114. package/dist/assets/flags/svg/lv.svg +6 -0
  115. package/dist/assets/flags/svg/ly.svg +13 -0
  116. package/dist/assets/flags/svg/ma.svg +4 -0
  117. package/dist/assets/flags/svg/mc.svg +6 -0
  118. package/dist/assets/flags/svg/md.svg +70 -0
  119. package/dist/assets/flags/svg/me.svg +116 -0
  120. package/dist/assets/flags/svg/mg.svg +7 -0
  121. package/dist/assets/flags/svg/mh.svg +7 -0
  122. package/dist/assets/flags/svg/mk.svg +5 -0
  123. package/dist/assets/flags/svg/ml.svg +7 -0
  124. package/dist/assets/flags/svg/mm.svg +12 -0
  125. package/dist/assets/flags/svg/mn.svg +14 -0
  126. package/dist/assets/flags/svg/mr.svg +6 -0
  127. package/dist/assets/flags/svg/mt.svg +58 -0
  128. package/dist/assets/flags/svg/mu.svg +8 -0
  129. package/dist/assets/flags/svg/mv.svg +6 -0
  130. package/dist/assets/flags/svg/mw.svg +10 -0
  131. package/dist/assets/flags/svg/mx.svg +382 -0
  132. package/dist/assets/flags/svg/my.svg +26 -0
  133. package/dist/assets/flags/svg/mz.svg +21 -0
  134. package/dist/assets/flags/svg/na.svg +16 -0
  135. package/dist/assets/flags/svg/ne.svg +6 -0
  136. package/dist/assets/flags/svg/ng.svg +6 -0
  137. package/dist/assets/flags/svg/ni.svg +129 -0
  138. package/dist/assets/flags/svg/nl.svg +5 -0
  139. package/dist/assets/flags/svg/no.svg +7 -0
  140. package/dist/assets/flags/svg/np.svg +13 -0
  141. package/dist/assets/flags/svg/nr.svg +12 -0
  142. package/dist/assets/flags/svg/nz.svg +36 -0
  143. package/dist/assets/flags/svg/om.svg +115 -0
  144. package/dist/assets/flags/svg/pa.svg +14 -0
  145. package/dist/assets/flags/svg/pe.svg +4 -0
  146. package/dist/assets/flags/svg/pg.svg +9 -0
  147. package/dist/assets/flags/svg/ph.svg +6 -0
  148. package/dist/assets/flags/svg/pk.svg +15 -0
  149. package/dist/assets/flags/svg/pl.svg +6 -0
  150. package/dist/assets/flags/svg/ps.svg +6 -0
  151. package/dist/assets/flags/svg/pt.svg +57 -0
  152. package/dist/assets/flags/svg/pw.svg +11 -0
  153. package/dist/assets/flags/svg/py.svg +157 -0
  154. package/dist/assets/flags/svg/qa.svg +4 -0
  155. package/dist/assets/flags/svg/ro.svg +7 -0
  156. package/dist/assets/flags/svg/rs.svg +292 -0
  157. package/dist/assets/flags/svg/ru.svg +5 -0
  158. package/dist/assets/flags/svg/rw.svg +13 -0
  159. package/dist/assets/flags/svg/sa.svg +25 -0
  160. package/dist/assets/flags/svg/sb.svg +13 -0
  161. package/dist/assets/flags/svg/sc.svg +7 -0
  162. package/dist/assets/flags/svg/sd.svg +13 -0
  163. package/dist/assets/flags/svg/se.svg +4 -0
  164. package/dist/assets/flags/svg/sg.svg +13 -0
  165. package/dist/assets/flags/svg/si.svg +18 -0
  166. package/dist/assets/flags/svg/sk.svg +9 -0
  167. package/dist/assets/flags/svg/sl.svg +7 -0
  168. package/dist/assets/flags/svg/sm.svg +75 -0
  169. package/dist/assets/flags/svg/sn.svg +8 -0
  170. package/dist/assets/flags/svg/so.svg +11 -0
  171. package/dist/assets/flags/svg/sr.svg +6 -0
  172. package/dist/assets/flags/svg/ss.svg +8 -0
  173. package/dist/assets/flags/svg/st.svg +16 -0
  174. package/dist/assets/flags/svg/sv.svg +593 -0
  175. package/dist/assets/flags/svg/sy.svg +6 -0
  176. package/dist/assets/flags/svg/sz.svg +34 -0
  177. package/dist/assets/flags/svg/td.svg +7 -0
  178. package/dist/assets/flags/svg/tg.svg +14 -0
  179. package/dist/assets/flags/svg/th.svg +7 -0
  180. package/dist/assets/flags/svg/tj.svg +22 -0
  181. package/dist/assets/flags/svg/tl.svg +13 -0
  182. package/dist/assets/flags/svg/tm.svg +204 -0
  183. package/dist/assets/flags/svg/tn.svg +4 -0
  184. package/dist/assets/flags/svg/to.svg +10 -0
  185. package/dist/assets/flags/svg/tr.svg +8 -0
  186. package/dist/assets/flags/svg/tt.svg +5 -0
  187. package/dist/assets/flags/svg/tv.svg +9 -0
  188. package/dist/assets/flags/svg/tw.svg +34 -0
  189. package/dist/assets/flags/svg/tz.svg +13 -0
  190. package/dist/assets/flags/svg/ua.svg +6 -0
  191. package/dist/assets/flags/svg/ug.svg +30 -0
  192. package/dist/assets/flags/svg/us.svg +9 -0
  193. package/dist/assets/flags/svg/uy.svg +28 -0
  194. package/dist/assets/flags/svg/uz.svg +30 -0
  195. package/dist/assets/flags/svg/va.svg +190 -0
  196. package/dist/assets/flags/svg/vc.svg +8 -0
  197. package/dist/assets/flags/svg/ve.svg +26 -0
  198. package/dist/assets/flags/svg/vn.svg +11 -0
  199. package/dist/assets/flags/svg/vu.svg +21 -0
  200. package/dist/assets/flags/svg/ws.svg +7 -0
  201. package/dist/assets/flags/svg/xk.svg +5 -0
  202. package/dist/assets/flags/svg/xn.svg +6 -0
  203. package/dist/assets/flags/svg/ye.svg +7 -0
  204. package/dist/assets/flags/svg/za.svg +17 -0
  205. package/dist/assets/flags/svg/zm.svg +27 -0
  206. package/dist/assets/flags/svg/zw.svg +21 -0
  207. package/dist/data/languages/index.html +86 -0
  208. package/dist/docs/api-worker-plan/index.html +439 -0
  209. package/dist/docs/cities/index.html +193 -0
  210. package/dist/docs/continents-currencies/index.html +306 -0
  211. package/dist/docs/countries/index.html +274 -0
  212. package/dist/docs/country-maps/index.html +262 -0
  213. package/dist/docs/flags/index.html +300 -0
  214. package/dist/docs/geography/index.html +454 -0
  215. package/dist/docs/languages/index.html +304 -0
  216. package/dist/docs/phone-codes/index.html +152 -0
  217. package/dist/docs/states/index.html +334 -0
  218. package/dist/docs/world-map/index.html +345 -0
  219. package/dist/examples/vue-app/index.html +208 -0
  220. package/dist/index.html +784 -0
  221. package/dist/robots.txt +2 -0
  222. package/dist/style/app.css +1 -0
  223. package/dist/types/__tests__/cities.test.d.ts +1 -0
  224. package/dist/types/__tests__/continents.test.d.ts +1 -0
  225. package/dist/types/__tests__/countries.test.d.ts +1 -0
  226. package/dist/types/__tests__/countryMaps.test.d.ts +1 -0
  227. package/dist/types/__tests__/geography.test.d.ts +1 -0
  228. package/dist/types/__tests__/index.test.d.ts +1 -0
  229. package/dist/types/__tests__/phoneCodes.test.d.ts +1 -0
  230. package/dist/types/__tests__/states.test.d.ts +1 -0
  231. package/dist/types/__tests__/translations.test.d.ts +1 -0
  232. package/dist/types/api/index.d.ts +5 -0
  233. package/dist/types/api/index.test.d.ts +1 -0
  234. package/dist/types/api/query.d.ts +3 -0
  235. package/dist/types/api/response.d.ts +16 -0
  236. package/dist/types/api/router.d.ts +1 -0
  237. package/dist/types/api/routes/cities.d.ts +2 -0
  238. package/dist/types/api/routes/countries.d.ts +2 -0
  239. package/dist/types/api/routes/health.d.ts +1 -0
  240. package/dist/types/api/routes/maps.d.ts +1 -0
  241. package/dist/types/api/routes/meta.d.ts +1 -0
  242. package/dist/types/api/routes/phoneCodes.d.ts +1 -0
  243. package/dist/types/data/cities.d.ts +22 -0
  244. package/dist/types/data/continents.d.ts +9 -0
  245. package/dist/types/data/countries.d.ts +23 -0
  246. package/dist/types/data/countryMaps.d.ts +104 -0
  247. package/dist/types/data/currencies.d.ts +13 -0
  248. package/dist/types/data/flags.d.ts +37 -0
  249. package/dist/types/data/geography.d.ts +48 -0
  250. package/dist/types/data/languages/index.d.ts +2 -0
  251. package/dist/types/data/languages/language.test.d.ts +1 -0
  252. package/dist/types/data/languages/languageData.d.ts +6 -0
  253. package/dist/types/data/languages/languageFunctions.d.ts +43 -0
  254. package/dist/types/data/languages/translations/ar.d.ts +1189 -0
  255. package/dist/types/data/languages/translations/de.d.ts +1189 -0
  256. package/dist/types/data/languages/translations/es.d.ts +1189 -0
  257. package/dist/types/data/languages/translations/fr.d.ts +1189 -0
  258. package/dist/types/data/languages/translations/hi.d.ts +1189 -0
  259. package/dist/types/data/languages/translations/it.d.ts +1189 -0
  260. package/dist/types/data/languages/translations/ja.d.ts +1189 -0
  261. package/dist/types/data/languages/translations/ko.d.ts +1189 -0
  262. package/dist/types/data/languages/translations/nl.d.ts +1189 -0
  263. package/dist/types/data/languages/translations/pl.d.ts +1189 -0
  264. package/dist/types/data/languages/translations/pt.d.ts +1189 -0
  265. package/dist/types/data/languages/translations/ru.d.ts +1189 -0
  266. package/dist/types/data/languages/translations/tr.d.ts +1189 -0
  267. package/dist/types/data/languages/translations/zh.d.ts +1189 -0
  268. package/dist/types/data/phoneCodes.d.ts +16 -0
  269. package/dist/types/data/states.d.ts +18 -0
  270. package/dist/types/data/translations/ar.d.ts +1832 -0
  271. package/dist/types/data/translations/de.d.ts +2005 -0
  272. package/dist/types/data/translations/es.d.ts +1852 -0
  273. package/dist/types/data/translations/fr.d.ts +1860 -0
  274. package/dist/types/data/translations/hi.d.ts +1816 -0
  275. package/dist/types/data/translations/it.d.ts +1824 -0
  276. package/dist/types/data/translations/ja.d.ts +1833 -0
  277. package/dist/types/data/translations/ko.d.ts +1832 -0
  278. package/dist/types/data/translations/nl.d.ts +1826 -0
  279. package/dist/types/data/translations/pl.d.ts +1818 -0
  280. package/dist/types/data/translations/pt.d.ts +1829 -0
  281. package/dist/types/data/translations/ru.d.ts +1838 -0
  282. package/dist/types/data/translations/tr.d.ts +1818 -0
  283. package/dist/types/data/translations/zh.d.ts +1834 -0
  284. package/dist/types/data/translations.d.ts +73 -0
  285. package/dist/types/data/worldMap.d.ts +122 -0
  286. package/dist/types/index.d.ts +33 -0
  287. package/dist/types/types/index.d.ts +348 -0
  288. package/dist/types/utils/geo.d.ts +101 -0
  289. package/package.json +67 -0
package/dist/docs/flags/index.html ADDED
@@ -0,0 +1,300 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta name="type" content="content">
6
+ <title>Flags</title>
7
+ <link href="/style/app.css" rel="stylesheet" type="text/css">
8
+ </head>
9
+ <body class="page--flags">
10
+ <div class="page-container">
11
+ <header class="header">
12
+ <div class="header__container">
13
+ </div>
14
+ </header>
15
+ <main class="main">
16
+ <section class="section">
17
+ <div class="container">
18
+ <div class="content"><h1 id="flags" tabindex="-1">Flags</h1>
19
+ <p><a href="../README.md">← Back to README</a></p>
20
+ <p><code>arev</code> provides complete flag metadata for ~195 countries:</p>
21
+ <ul>
22
+ <li><strong>Self-hosted SVG and PNG image URLs</strong> served from <code>arevdata.com</code></li>
23
+ <li><strong>Dominant colours</strong> on each flag (up to 4, most prominent first)</li>
24
+ <li><strong>Visually similar flags</strong> — groups of flags that look alike and would be confused by players in a “guess the flag” game</li>
25
+ </ul>
26
+ <h2 id="import" tabindex="-1">Import</h2>
27
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span>
28
+ flagData<span class="token punctuation">,</span>
29
+ getFlagData<span class="token punctuation">,</span>
30
+ getFlagsByColor<span class="token punctuation">,</span>
31
+ getSimilarFlags<span class="token punctuation">,</span>
32
+ getFlagSvgUrl<span class="token punctuation">,</span>
33
+ getFlagPngUrl<span class="token punctuation">,</span>
34
+ getCountryMapSvgUrl<span class="token punctuation">,</span>
35
+ getCountryFlag<span class="token punctuation">,</span> <span class="token comment">// emoji flag — from countries module</span>
36
+ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
37
+ <span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> FlagInfo<span class="token punctuation">,</span> FlagColor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
38
+ </code></pre>
39
+ <h2 id="data-shape" tabindex="-1">Data shape</h2>
40
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">FlagInfo</span> <span class="token punctuation">{</span>
41
+ alpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "NL"</span>
42
+ svgUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/nl.svg"</span>
43
+ pngUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w320/nl.png"</span>
44
+ colors<span class="token operator">:</span> FlagColor<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// ["red", "white", "blue"] — most dominant first</span>
45
+ similar<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// ["LU", "FR", "RU"] — alpha-2 codes of similar-looking flags</span>
46
+ <span class="token punctuation">}</span>
47
+
48
+ <span class="token keyword">type</span> <span class="token class-name">FlagColor</span> <span class="token operator">=</span>
49
+ <span class="token operator">|</span> <span class="token string">"red"</span> <span class="token operator">|</span> <span class="token string">"dark-red"</span> <span class="token operator">|</span> <span class="token string">"white"</span> <span class="token operator">|</span> <span class="token string">"blue"</span> <span class="token operator">|</span> <span class="token string">"green"</span> <span class="token operator">|</span> <span class="token string">"yellow"</span>
50
+ <span class="token operator">|</span> <span class="token string">"orange"</span> <span class="token operator">|</span> <span class="token string">"black"</span> <span class="token operator">|</span> <span class="token string">"gold"</span> <span class="token operator">|</span> <span class="token string">"light-blue"</span> <span class="token operator">|</span> <span class="token string">"dark-blue"</span>
51
+ <span class="token operator">|</span> <span class="token string">"dark-green"</span> <span class="token operator">|</span> <span class="token string">"purple"</span> <span class="token operator">|</span> <span class="token string">"brown"</span><span class="token punctuation">;</span>
52
+ </code></pre>
53
+ <h2 id="flag-image-urls" tabindex="-1">Flag image URLs</h2>
54
+ <p>Flag images are served from <code>arevdata.com</code>. SVG files are the source of truth in the repo, and the PNG sizes are generated from those SVGs during the asset build pipeline.</p>
55
+ <h3 id="svg-flags" tabindex="-1">SVG flags</h3>
56
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
57
+
58
+ <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/nl.svg"</span>
59
+ <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span><span class="token string">"US"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/us.svg"</span>
60
+ </code></pre>
61
+ <p>Use in HTML:</p>
62
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://arevdata.com/flags/svg/nl.svg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Netherlands flag<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
63
+ </code></pre>
64
+ <p>Use in React:</p>
65
+ <pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
66
+
67
+ <span class="token keyword">function</span> <span class="token function">Flag</span><span class="token punctuation">(</span><span class="token punctuation">{</span> countryCode <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> countryCode<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
68
+ <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span>countryCode<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span></span> <span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>countryCode<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> flag</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
69
+ <span class="token punctuation">}</span>
70
+ </code></pre>
71
+ <h3 id="png-flags-(multiple-sizes)" tabindex="-1">PNG flags (multiple sizes)</h3>
72
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagPngUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
73
+
74
+ <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w320/nl.png" (default 320px wide)</span>
75
+ <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w40/nl.png"</span>
76
+ <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">160</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w160/nl.png"</span>
77
+ <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">640</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w640/nl.png"</span>
78
+ </code></pre>
79
+ <p>Available widths: <code>40 | 80 | 160 | 320 | 640 | 1280 | 2560</code></p>
80
+ <h3 id="country-outline-svg-(map-shape)" tabindex="-1">Country outline SVG (map shape)</h3>
81
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryMapSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
82
+
83
+ <span class="token function">getCountryMapSvgUrl</span><span class="token punctuation">(</span><span class="token string">"NLD"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Wikimedia Commons outline map URL</span>
84
+ </code></pre>
85
+ <blockquote>
86
+ <p><strong>Note:</strong> Country outline SVGs are not bundled. This returns an external Wikimedia Commons URL. For embedded maps, consider <a href="https://www.naturalearthdata.com/">natural earth data</a> or GeoJSON libraries.</p>
87
+ </blockquote>
88
+ <h2 id="similar-flags" tabindex="-1">Similar flags</h2>
89
+ <p>The <code>similar</code> field on each <code>FlagInfo</code> entry lists alpha-2 codes of countries whose flags would be visually confusing. This is designed for <strong>“guess the flag” games</strong> where you need to generate plausible wrong answers.</p>
90
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getSimilarFlags<span class="token punctuation">,</span> getFlagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
91
+
92
+ <span class="token comment">// Get similar flags for the Netherlands</span>
93
+ <span class="token keyword">const</span> similar <span class="token operator">=</span> <span class="token function">getSimilarFlags</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
94
+ similar<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>f <span class="token operator">=></span> f<span class="token punctuation">.</span>alpha2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["LU", "FR", "RU", "YU", "HR"]</span>
95
+
96
+ <span class="token comment">// Or access directly from the entry</span>
97
+ <span class="token keyword">const</span> nl <span class="token operator">=</span> <span class="token function">getFlagData</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
98
+ nl<span class="token operator">?.</span>similar<span class="token punctuation">;</span> <span class="token comment">// ["LU", "FR", "RU", ...]</span>
99
+ </code></pre>
100
+ <h3 id="notable-similar-flag-groups" tabindex="-1">Notable similar-flag groups</h3>
101
+ <table>
102
+ <thead>
103
+ <tr>
104
+ <th>Country</th>
105
+ <th>Similar flags</th>
106
+ <th>Reason</th>
107
+ </tr>
108
+ </thead>
109
+ <tbody>
110
+ <tr>
111
+ <td>🇳🇱 Netherlands</td>
112
+ <td>🇱🇺 Luxembourg, 🇷🇺 Russia, 🇫🇷 France, 🇭🇷 Croatia</td>
113
+ <td>Red/white/blue horizontal or vertical tricolour</td>
114
+ </tr>
115
+ <tr>
116
+ <td>🇩🇰 Denmark</td>
117
+ <td>🇳🇴 Norway, 🇸🇪 Sweden, 🇫🇮 Finland, 🇮🇸 Iceland</td>
118
+ <td>Nordic cross design</td>
119
+ </tr>
120
+ <tr>
121
+ <td>🇦🇺 Australia</td>
122
+ <td>🇳🇿 New Zealand, 🇬🇧 United Kingdom, 🇫🇯 Fiji</td>
123
+ <td>Union Jack in canton</td>
124
+ </tr>
125
+ <tr>
126
+ <td>🇩🇪 Germany</td>
127
+ <td>🇧🇪 Belgium, 🇧🇴 Bolivia</td>
128
+ <td>Black/red/gold horizontal tricolour</td>
129
+ </tr>
130
+ <tr>
131
+ <td>🇮🇹 Italy</td>
132
+ <td>🇮🇪 Ireland, 🇨🇮 Ivory Coast, 🇲🇽 Mexico</td>
133
+ <td>Green/white/red vertical tricolour</td>
134
+ </tr>
135
+ <tr>
136
+ <td>🇹🇷 Turkey</td>
137
+ <td>🇹🇳 Tunisia, 🇵🇰 Pakistan, 🇦🇿 Azerbaijan, 🇲🇾 Malaysia, 🇩🇿 Algeria</td>
138
+ <td>Crescent and star</td>
139
+ </tr>
140
+ <tr>
141
+ <td>🇪🇹 Ethiopia</td>
142
+ <td>🇬🇳 Guinea, 🇲🇱 Mali, 🇨🇲 Cameroon, 🇸🇳 Senegal</td>
143
+ <td>Pan-African colours</td>
144
+ </tr>
145
+ <tr>
146
+ <td>🇮🇩 Indonesia</td>
147
+ <td>🇲🇨 Monaco, 🇵🇱 Poland, 🇸🇬 Singapore</td>
148
+ <td>Red and white</td>
149
+ </tr>
150
+ </tbody>
151
+ </table>
152
+ <h2 id="flag-colours" tabindex="-1">Flag colours</h2>
153
+ <p>Use flag colours to group or filter countries:</p>
154
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagsByColor<span class="token punctuation">,</span> flagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
155
+
156
+ <span class="token comment">// All flags with green</span>
157
+ <span class="token keyword">const</span> greenFlags <span class="token operator">=</span> <span class="token function">getFlagsByColor</span><span class="token punctuation">(</span><span class="token string">"green"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
158
+
159
+ <span class="token comment">// All flags with red or orange</span>
160
+ <span class="token keyword">const</span> redOrOrangeFlags <span class="token operator">=</span> <span class="token function">getFlagsByColor</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"red"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
161
+
162
+ <span class="token comment">// Flags that are only red and white</span>
163
+ <span class="token keyword">const</span> redWhiteOnly <span class="token operator">=</span> flagData<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
164
+ <span class="token punctuation">(</span>f<span class="token punctuation">)</span> <span class="token operator">=></span> f<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token operator">=></span> c <span class="token operator">===</span> <span class="token string">"red"</span> <span class="token operator">||</span> c <span class="token operator">===</span> <span class="token string">"white"</span><span class="token punctuation">)</span>
165
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
166
+ </code></pre>
167
+ <h2 id="building-a-%E2%80%9Cguess-the-flag%E2%80%9D-game" tabindex="-1">Building a “Guess the Flag” game</h2>
168
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> flagData<span class="token punctuation">,</span> getSimilarFlags<span class="token punctuation">,</span> getFlagSvgUrl<span class="token punctuation">,</span> getCountryByCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
169
+
170
+ <span class="token keyword">function</span> <span class="token function">getQuizQuestion</span><span class="token punctuation">(</span>targetAlpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
171
+ <span class="token keyword">const</span> target <span class="token operator">=</span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">;</span>
172
+ <span class="token keyword">const</span> wrongOptions <span class="token operator">=</span> <span class="token function">getSimilarFlags</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
173
+
174
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
175
+ question<span class="token operator">:</span> <span class="token string">"Which country does this flag belong to?"</span><span class="token punctuation">,</span>
176
+ flagUrl<span class="token operator">:</span> <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">,</span>
177
+ correctAnswer<span class="token operator">:</span> target<span class="token operator">?.</span>name<span class="token punctuation">,</span>
178
+ wrongAnswers<span class="token operator">:</span> wrongOptions<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span>alpha2<span class="token punctuation">)</span><span class="token operator">?.</span>name<span class="token punctuation">)</span><span class="token punctuation">,</span>
179
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
180
+ <span class="token punctuation">}</span>
181
+ </code></pre>
182
+ <h2 id="full-flag-data-array" tabindex="-1">Full flag data array</h2>
183
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> flagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
184
+
185
+ <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>flagData<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ~195</span>
186
+
187
+ <span class="token comment">// Find all flags with a gold/yellow star-associated colour</span>
188
+ <span class="token keyword">const</span> goldFlags <span class="token operator">=</span> flagData<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>f <span class="token operator">=></span> f<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"gold"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
189
+ </code></pre>
190
+ <h2 id="related" tabindex="-1">Related</h2>
191
+ <ul>
192
+ <li><a href="countries.md">Countries</a> — <code>getCountryFlag()</code> returns the emoji flag</li>
193
+ <li><a href="geography.md">Geography</a> — combine with country geography for location-aware flag games</li>
194
+ </ul>
195
+
196
+ </div>
197
+ </div>
198
+ </section>
199
+ </main>
200
+ </div>
201
+ <footer class="footer">
202
+ <div class="footer__container">
203
+ <div class="footer__controls">
204
+ <div class="footer__control"><span class="footer__label">Theme</span>
205
+ <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </footer>
210
+ </body>
211
+ <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
212
+ let localMode = isDarkMode ? "dark" : "light";
213
+
214
+ const updateColorModeToggle = () => {
215
+ const toggle = document.querySelector("[data-color-mode-toggle]");
216
+ if (!toggle) return;
217
+
218
+ const value = toggle.querySelector(".color-mode-toggle__value");
219
+ if (!value) return;
220
+
221
+ value.textContent = localMode === "dark" ? "Dark" : "Light";
222
+ };
223
+
224
+ const initColorMode = () => {
225
+ localMode = localStorage.getItem("colorMode");
226
+ setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
227
+ };
228
+
229
+ const setCurrentMode = (mode) => {
230
+ localMode = mode;
231
+ localStorage.setItem("colorMode", localMode);
232
+ document.body.setAttribute("color-mode", mode);
233
+ updateColorModeToggle();
234
+ };
235
+
236
+ const switchMode = () => {
237
+ if (localMode == "dark") setCurrentMode("light");
238
+ else setCurrentMode("dark");
239
+ };
240
+
241
+ const bindColorModeToggle = () => {
242
+ const toggle = document.querySelector("[data-color-mode-toggle]");
243
+ if (!toggle) return;
244
+
245
+ toggle.addEventListener("click", () => {
246
+ switchMode();
247
+ });
248
+ };
249
+
250
+ initColorMode();
251
+ bindColorModeToggle();
252
+ const tables = document.querySelectorAll("table");
253
+ let initTableWrap = false;
254
+
255
+ const wrapTables = (tables) => {
256
+ tables &&
257
+ tables.forEach((table) => {
258
+ if (table.getBoundingClientRect().width > window.screen.width) {
259
+ table.classList.add("wrap");
260
+ initTableWrap = true;
261
+ }
262
+ });
263
+ };
264
+
265
+ const labelTables = (tables) => {
266
+ tables &&
267
+ tables.forEach((table) => {
268
+ // Set all headers as attributes to td's
269
+ const headerElements = table.querySelectorAll("thead th");
270
+ const bodyElementRows = table.querySelectorAll("tbody tr");
271
+ const heads = [];
272
+
273
+ if (headerElements && bodyElementRows) {
274
+ // Get TH heads
275
+ headerElements.forEach((th) => {
276
+ heads.push(th.textContent);
277
+ });
278
+ }
279
+
280
+ if (heads.length) {
281
+ bodyElementRows.forEach((tr) => {
282
+ const tds = tr.querySelectorAll("td");
283
+
284
+ tds.forEach((td, i) => {
285
+ td.setAttribute("data-label", heads[i]);
286
+ });
287
+ });
288
+ }
289
+ });
290
+ };
291
+
292
+ wrapTables(tables);
293
+ labelTables(tables);
294
+
295
+ window.addEventListener("resize", () => {
296
+ if (!initTableWrap) wrapTables(tables);
297
+ });
298
+
299
+ </script>
300
+ </html>