Update icon on Select when changing country on Photos

src/routes/photos.svelte

@@ -24,8 +24,18 @@
     const defaultCountry = 'all'
     const defaultSort = 'latest'
     let filtered: boolean = false
-    let filterCountry = defaultCountry
+    let filterCountry: any = defaultCountry
-    let filterSort = defaultSort
+    let filterSort: string = defaultSort
+    let countryFlagId: string
+
+    // Define country flag from selection
+    $: {
+        if (filterCountry !== defaultCountry) {
+            countryFlagId = countries.find((country: any) => country.slug === filterCountry).flag.id
+        } else {
+            countryFlagId = undefined
+        }
+    }
 
 
     /**
@@ -90,7 +100,11 @@
                             on:change={handleCountryChange}
                             value={filterCountry}
                         >
+                            {#if countryFlagId}
+                                <Image id={countryFlagId} width={26} height={26} alt="{filterCountry} flag" class="icon" />
+                            {:else}
                                 <IconEarth class="icon" />
+                            {/if}
                         </Select>
                     </li>
                     <li>

src/style/pages/_photos.scss

@@ -93,14 +93,15 @@
                 display: block;
                 width: 20px;
                 height: 20px;
-                fill: #fff;
+                overflow: hidden;
                 margin-right: 12px;
+                fill: #fff;
+                border-radius: 100%;
                 transition: fill 0.2s;
 
                 @include bp (sm) {
                     width: 26px;
                     height: 26px;
-                    margin-right: 16px;
                 }
             }