Use SVG icons from global symbols

Allow to change color and avoid code duplication

src/components/atoms/BoxCTA.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Icon from '$components/atoms/Icon.svelte'
+
     export let icon: string
     export let alt: string
     export let label: string
@@ -7,7 +9,7 @@
 
 <a href={url} class="box-cta">
     <div class="icon">
-        <img src={icon} alt={alt} width={48} height={48} loading="lazy">
+        <Icon icon={icon} />
     </div>
     <span class="text-label">
         {label}

src/components/atoms/ButtonCart.svelte

@@ -3,6 +3,7 @@
     import { quartOut } from 'svelte/easing'
     import { cartOpen, cartAmount } from '$utils/stores/shop'
     // Components
+    import Icon from '$components/atoms/Icon.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     const openCart = () => {
@@ -12,7 +13,7 @@
 
 <div class="button-cart">
     <ButtonCircle color="purple" on:click={openCart}>
-        <img src="/images/icons/bag.svg" width={27} height={22} alt="Cart icon">
+        <Icon icon="bag" label="Cart icon" />
     </ButtonCircle>
 
     {#if $cartAmount > 0}

src/components/atoms/Icon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let icon: string
+    export let label: string = undefined
+
+    const classes = [
+        $$props.class
+    ].join(' ').trim()
+</script>
+
+<svg class={classes} aria-label={label}>
+    <use xlink:href="#icon-{icon}" />
+</svg>

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>

src/components/organisms/Cart.svelte

@@ -5,6 +5,7 @@
     import { cartOpen, cartId, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
     // Components
     import Button from '$components/atoms/Button.svelte'
+    import Icon from '$components/atoms/Icon.svelte'
     import CartItem from '$components/molecules/CartItem.svelte'
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
 
@@ -125,9 +126,7 @@
             {:else}
                 <div class="cart__empty shadow-small">
                     <div class="icon">
-                        <svg width="23" height="29" viewBox="0 0 23 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.95 5.83a4.94 4.94 0 0 1 1.23-3.42 3.8 3.8 0 0 1 2.8-1.2c2.07.02 4 1.67 4.04 4.62h4.13c.6 0 1.08.52 1.03 1.11l-.02.32 2.68 18.19a.94.94 0 0 1-1.26 1.02l-1.02-.38a.09.09 0 0 0-.08.01l-1.84 1.2c-.08.5-.5.88-1.02.88H1.78c-.6 0-1.07-.51-1.03-1.1l1.53-20.3c.04-.53.5-.95 1.03-.95h3.64Zm1.2 0c.01-1.2.4-2.05.9-2.6a2.6 2.6 0 0 1 1.93-.81c1.34 0 2.8 1.07 2.84 3.41H8.15Zm6.87 1.2h3.95l-.02.27-1.48 19.68H1.97l1.5-19.95h3.48v3.41a1.38 1.38 0 1 0 1.2 0v-3.4h5.67v3.4a1.38 1.38 0 1 0 1.2 0v-3.4Zm3.74 18.77.99-13.1 1.84 12.5-.62-.23c-.38-.14-.81-.1-1.15.13l-1.06.7ZM7.87 11.68a.33.33 0 1 1-.65 0 .33.33 0 0 1 .65 0Zm6.55.33a.33.33 0 1 0 0-.66.33.33 0 0 0 0 .66Z"/>
-                        </svg>
+                        <Icon icon="bag" label="Shopping bag icon" />
                     </div>
                     <p>Your cart is empty</p>
                 </div>