From 80fe5caf37f5330172e51e4ded0ee80a353f8112 Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 29 May 2024 16:29:15 -0700
Subject: [PATCH] fix: use import.meta.glob to load flag svgs

---
 src/components/Kv/KvFlag.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Kv/KvFlag.vue b/src/components/Kv/KvFlag.vue
index 479a9e2192..110ba692e6 100644
--- a/src/components/Kv/KvFlag.vue
+++ b/src/components/Kv/KvFlag.vue
@@ -20,10 +20,14 @@
 <script>
 import { getCodes, getNameByCode } from 'flag-icon-css';
 import getCacheKey from '#src/util/getCacheKey';
+import { metaGlobReader } from '#src/util/importHelpers';
 
 const COUNTRY_LIST = getCodes();
 const SPRITE_FLAG_WIDTH = 32; // Number of px wide that the sprite PNG is.
 
+const flagGlob = import.meta.glob('#node_modules/flag-icon-css/flags/**/*');
+const flags = metaGlobReader(flagGlob, 'flag-icon-css/flags/');
+
 export default {
 	name: 'KvFlag',
 	serverCacheKey: props => getCacheKey(`KvFlag-${props.country}-${props.aspectRatio}-${props.inlineSvg}`),
@@ -62,7 +66,7 @@ export default {
 			// registerd by Vue, and so any changes to the country are not picked up, which leads to
 			// the flag not being rendered when the country isn't provided until after the first render.
 			const { aspectRatio, country } = this;
-			return () => import(`flag-icon-css/flags/${aspectRatio}/${country.toLowerCase()}.svg`);
+			return flags[`${aspectRatio}/${country.toLowerCase()}.svg`];
 		},
 		spriteYPosition() {
 			if (!this.inlineSvg) {