Use SVG icons from global symbols

Allow to change color and avoid code duplication

src/components/molecules/Switcher.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
+    import Icon from '$components/atoms/Icon.svelte'
+
     let isOpen: boolean = false
 
     // Links
     const links = [
         {
-            "icon": "globe",
-            "alt": "Globe",
-            "url": "/locations",
-            "text": "Discover locations"
+            icon: "globe",
+            iconLabel: "Globe icon",
+            url: "/locations",
+            text: "Discover locations"
         },
         {
-            "icon": "photos",
-            "alt": "Photos",
-            "url": "/photos",
-            "text": "Browse all photos"
+            icon: "photos",
+            iconLabel: "Photos icon",
+            url: "/photos",
+            text: "Browse all photos"
         },
         {
-            "icon": "bag",
-            "alt": "Shopping bag",
-            "url": "/shop",
-            "text": "Shop the prints"
+            icon: "bag",
+            iconLabel: "Bag icon",
+            url: "/shop",
+            text: "Shop the prints"
         }
     ]
 
@@ -35,10 +37,10 @@
 <aside class="switcher" class:is-open={isOpen}>
     <nav class="switcher__links">
         <ul>
-            {#each links as { icon, alt, url, text }}
+            {#each links as { icon, iconLabel, url, text }}
                 <li>
                     <a href={url} on:click={toggleSwitcher} sveltekit:prefetch>
-                        <img src="/images/icons/{icon}.svg" alt={alt} class="icon" width="32" height="32" loading="lazy">
+                        <Icon class="icon" icon={icon} label={iconLabel} />
                         <span>{text}</span>
                     </a>
                 </li>