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>