enhance: use flag-icons for country flags

devTools/flagUpdater/README.md

@@ -0,0 +1,8 @@
+Update the flags we have in [public/images/flags](../../public/images/flags).
+
+Flags are copied over from the `4x3` variants of [the `flag-icons` repo](https://github.com/lipis/flag-icons) ([gallery](https://flagicons.lipis.dev/)).
+It is probably a good idea to run `yarn up flag-icons` beforehand.
+
+## Run
+
+To run this, run `npx tsx ./devTools/flagUpdater/update.ts`.

devTools/flagUpdater/svgo.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    js2svg: { indent: 2, pretty: true },
+    plugins: [
+        {
+            name: "preset-default",
+            params: {
+                overrides: {
+                    cleanupIds: false,
+                },
+            },
+        },
+        "convertStyleToAttrs",
+        "removeDimensions",
+        "removeScriptElement",
+        "removeStyleElement",
+        "sortAttrs",
+    ],
+}

devTools/flagUpdater/svgo.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+npx svgo --config svgo.config.js ../../public/images/flags

devTools/flagUpdater/update.ts

@@ -0,0 +1,77 @@
+import { Region, regions } from "@ourworldindata/utils"
+
+import path from "path"
+import fs from "fs-extra"
+import { glob } from "glob"
+import findProjectBaseDir from "../../settings/findBaseDir.ts"
+
+const BASE_DIR = findProjectBaseDir(__dirname)
+if (!BASE_DIR) throw new Error("Could not find project base directory")
+const FLAG_BASE_PATH = path.join(BASE_DIR, "node_modules/flag-icons/flags/4x3")
+const FLAG_TARGET_DIR = path.join(BASE_DIR, "public/images/flags")
+
+const main = async () => {
+    const skippedBecauseMissingShortCode: Region[] = []
+    const failedBecauseNoFlag: Region[] = []
+    let successfulCount: number = 0
+
+    for (const f of await glob(`${FLAG_TARGET_DIR}/*.svg`)) {
+        await fs.remove(f)
+    }
+
+    await fs.ensureDir(FLAG_TARGET_DIR)
+
+    for (const region of regions) {
+        // We want to ensure we have a flag for every non-historical country; others are optional
+        const isNonHistoricalCountry =
+            region.regionType === "country" && !region.isHistorical
+
+        let shortCode = "shortCode" in region && region.shortCode
+
+        if (region.code === "OWID_KOS") {
+            // Kosovo is a special case; it doesn't have an official ISO code,
+            // but has been assigned the special "XK" and has a flag under that code
+            shortCode = "XK"
+        } else if (region.code === "PS_GZA") {
+            // Gaza Strip and Palestine use the same flag
+            shortCode = "PS"
+        }
+
+        if (!shortCode) {
+            if (isNonHistoricalCountry)
+                skippedBecauseMissingShortCode.push(region)
+            continue
+        }
+
+        const flagPath = path.join(
+            FLAG_BASE_PATH,
+            `${shortCode.toLowerCase()}.svg`
+        )
+        const exists = await fs.pathExists(flagPath)
+        if (!exists) {
+            if (isNonHistoricalCountry) failedBecauseNoFlag.push(region)
+            continue
+        }
+
+        const targetPath = path.join(FLAG_TARGET_DIR, `${region.code}.svg`)
+        await fs.copy(flagPath, targetPath)
+        successfulCount++
+    }
+
+    console.log(`Successfully copied ${successfulCount} flags.`)
+
+    if (skippedBecauseMissingShortCode.length > 0) {
+        console.log(
+            `Skipped ${skippedBecauseMissingShortCode.length} countries because they had no short code:`,
+            skippedBecauseMissingShortCode.map((c) => c.name)
+        )
+    }
+    if (failedBecauseNoFlag.length > 0) {
+        console.log(
+            `Failed to copy flags for ${failedBecauseNoFlag.length} countries because the flag was missing:`,
+            failedBecauseNoFlag.map((c) => c.name)
+        )
+    }
+}
+
+main()

package.json

@@ -225,6 +225,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-react": "^7.34.0",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "flag-icons": "^7.2.3",
         "http-server": "^14.1.1",
         "husky": "^9.0.11",
         "jest": "^29.7.0",