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",
+            icon: "globe",
-            "alt": "Globe",
+            iconLabel: "Globe icon",
-            "url": "/locations",
+            url: "/locations",
-            "text": "Discover locations"
+            text: "Discover locations"
         },
         {
-            "icon": "photos",
+            icon: "photos",
-            "alt": "Photos",
+            iconLabel: "Photos icon",
-            "url": "/photos",
+            url: "/photos",
-            "text": "Browse all photos"
+            text: "Browse all photos"
         },
         {
-            "icon": "bag",
+            icon: "bag",
-            "alt": "Shopping bag",
+            iconLabel: "Bag icon",
-            "url": "/shop",
+            url: "/shop",
-            "text": "Shop the prints"
+            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">
+                        <Icon icon="bag" label="Shopping bag icon" />
-                            <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>
                     </div>
                     <p>Your cart is empty</p>
                 </div>

src/routes/[country]/[location]/[photo].svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { page } from '$app/stores'
+    import { getAssetUrlKey } from '$utils/helpers'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-    import { getAssetUrlKey } from '$utils/helpers'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
+    import Icon from '$components/atoms/Icon.svelte'
     import IconArrow from '$components/atoms/IconArrow.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
@@ -20,13 +21,12 @@
     $: isLast = currentIndex === totalPhotos - 1
     $: isFirst = currentIndex === 0
     // Define current photo
-    // $: currentPhoto = photos.find((photo: any) => photo.slug === $page.params.photo)
     $: currentPhoto = photos[photos.findIndex((photo: any) => photo.slug === $page.params.photo)]
-    // Reactive photos showns
+    // Reactive photos
-    $: shownPhotos = [
+    $: displayedPhotos = [
         ...photos.filter((photo: any, index: number) => {
-            // Grab the 4 prev and next photos depending the index
+            // Grab the 4 prev and next photos depending on the index
-            console.log(index)
+            // console.log(index)
             // console.log(index >= currentIndex - 4 && index < currentIndex + 4)
         })
     ]
@@ -120,7 +120,7 @@
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <div class="detail text-date">
-                    <img src="/images/icons/map-pin.svg" width={16} height={18} alt="Map icon"><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
+                    <Icon class="icon" icon="map-pin" label="Map pin" /><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
                 </div>
             </div>
         </div>

src/routes/__layout.svelte

@@ -4,6 +4,7 @@
     import { setContext } from 'svelte'
     import '$utils/polyfills'
     // Components
+    import SVGSprite from '$components/SVGSprite.svelte'
     import Switcher from '$components/molecules/Switcher.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
@@ -25,6 +26,8 @@
     <Footer />
 {/if}
 
+<SVGSprite />
+
 <script context="module" lang="ts">
     import { fetchAPI } from '$utils/api'
 

src/routes/index.svelte

@@ -58,19 +58,19 @@
         <div class="cards">
             <BoxCTA
                 url="{path}#locations"
-                icon="/images/icons/globe.svg"
+                icon="globe"
                 label="Discover locations"
                 alt="Globe"
             />
             <BoxCTA
                 url="/photos"
-                icon="/images/icons/photos.svg"
+                icon="photos"
                 label="Browse all photos"
                 alt="Photos"
             />
             <BoxCTA
                 url="/shop"
-                icon="/images/icons/bag.svg"
+                icon="bag"
                 label="Shop our products"
                 alt="Shopping bag"
             />

src/style/atoms/_box-cta.scss

@@ -21,6 +21,7 @@
     .icon {
         width: 36px;
         height: 36px;
+        color: #fff;
         flex-shrink: 0;
         transition: transform 0.6s var(--ease-quart);
 
@@ -30,11 +31,10 @@
             height: 48px;
         }
 
-        img {
+        svg {
             display: block;
             width: 100%;
             height: 100%;
-            object-fit: contain;
         }
     }
     span {

src/style/atoms/_button-cart.scss

@@ -9,7 +9,8 @@
     }
 
     // Icon
-    img {
+    svg {
+        color: #fff;
         display: block;
         width: 27px;
         height: 27px;

src/style/molecules/_switcher.scss

@@ -51,6 +51,7 @@
             height: 32px;
             object-fit: contain;
             margin-right: 16px;
+            color: $color-secondary-light;
         }
     }
 

src/style/organisms/_cart.scss

@@ -54,6 +54,7 @@
     &__content {
         position: relative;
         flex: 1;
+        margin-bottom: 32px;
     }
 
     // Total
@@ -61,10 +62,6 @@
         margin-top: auto;
         color: $color-gray;
 
-        @include bp (md) {
-            margin: 32px 0 0;
-        }
-
         // Sum
         &--sum {
             display: flex;
@@ -136,23 +133,34 @@
         justify-content: center;
         height: 100%;
         padding: 24px;
-        font-size: rem(20px);
+        font-size: rem(16px);
         font-weight: 200;
         background: #fff;
         color: $color-gray;
         border-radius: 6px;
 
+        @include bp (sm) {
+            font-size: rem(20px);
+        }
+
         // Icon
         .icon {
             display: flex;
             align-items: center;
             justify-content: center;
-            width: 64px;
+            width: 3.6em;
-            height: 64px;
+            height: 3.6em;
             margin-bottom: 16px;
             color: #FF6C89;
             background: $color-cream;
             border-radius: 100%;
+
+            svg {
+                display: block;
+                width: auto;
+                height: 50%;
+                object-fit: contain;
+            }
         }
     }
 

src/style/pages/_viewer-photo.scss

@@ -185,8 +185,10 @@
             }
 
             // Icon
-            img {
+            .icon {
                 display: inline-block;
+                width: 17px;
+                height: 17px;
                 margin-top: -5px;
                 margin-right: 12px;
             }

static/images/icons/bag.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.57 13.193c.026-2.257.748-4.033 1.908-5.254A5.869 5.869 0 0 1 22.802 6.1c3.173.026 6.16 2.558 6.216 7.092h6.374c.925 0 1.655.783 1.586 1.702l-.037.485 4.13 27.93c.161 1.087-.903 1.95-1.938 1.571l-1.579-.576a.137.137 0 0 0-.121.014l-2.829 1.849a1.588 1.588 0 0 1-1.571 1.34H8.605a1.587 1.587 0 0 1-1.585-1.703l2.359-31.148a1.588 1.588 0 0 1 1.586-1.464h5.605Zm1.848 0c.026-1.858.614-3.16 1.403-3.99a4.017 4.017 0 0 1 2.965-1.262c2.073.017 4.332 1.644 4.384 5.252h-8.752Zm10.6 1.84h6.096l-.03.403h-.003l.002.01-2.29 30.221H8.884l2.32-30.634h5.366v5.233a2.111 2.111 0 0 0-1.197 1.901c0 1.166.95 2.112 2.12 2.112a2.111 2.111 0 0 0 .924-4.013v-5.233h8.755v5.233a2.111 2.111 0 0 0-1.197 1.901c0 1.166.95 2.112 2.12 2.112a2.111 2.111 0 0 0 .924-4.013v-5.233Zm5.767 28.815 1.523-20.115 2.839 19.193-.956-.349a1.991 1.991 0 0 0-1.772.203l-1.634 1.068Zm-16.789-21.68a.502.502 0 1 1-1.005-.003.502.502 0 0 1 1.005.002Zm10.099.5a.502.502 0 1 0 .002-1.004.502.502 0 0 0-.002 1.005Z" />
-</svg>

static/images/icons/map-pin.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51787 13.244C8.29206 13.6955 7.64287 13.6955 7.41707 13.244C7.41707 13.244 5.27191 9.01059 4.25578 7.03501C3.23965 5.05943 4.02998 2.49118 6.09046 1.44695C8.15094 0.402716 10.663 1.22117 11.6792 3.28141C12.3001 4.52321 12.2719 5.84967 11.6792 7.03501C11.0864 8.22036 8.51787 13.244 8.51787 13.244ZM9.95738 5.22877C9.95738 4.12809 9.08239 3.25319 7.98158 3.25319C6.88078 3.25319 6.00578 4.15631 6.00578 5.22877C6.00578 6.32945 6.88078 7.20435 7.98158 7.20435C9.08239 7.20435 9.95738 6.32945 9.95738 5.22877ZM6.50898 15.1335C6.51939 15.1526 6.53135 15.171 6.54476 15.1888L6.44888 16.5251L10.0169 17.6779V13.4566C10.3586 12.8149 10.7654 12.0515 11.1765 11.2816V17.6779L14.7445 16.5251L14.2539 9.68778L11.4829 10.7079C11.7389 10.2289 11.9905 9.75854 12.223 9.32507L14.5215 8.47535C14.8705 8.37166 15.1411 8.6724 15.178 9.03754L15.9127 16.3004C15.9636 16.8029 15.6579 17.2724 15.1805 17.425L10.5967 18.8903L5.84678 17.4195L0.740081 18.8903C0.561681 18.9301 0.360981 18.9102 0.204881 18.7909C0.0487812 18.6717 -0.0181187 18.5127 0.00418125 18.3338L1.14148 10.4232C1.18608 10.2244 1.31988 10.0654 1.52058 10.0058L3.65978 9.3043C3.81969 9.61333 3.9812 9.92989 4.14174 10.248L2.23418 10.8605L1.25298 17.6779L5.33388 16.5052L5.57503 13.1639C6.1283 14.315 6.50898 15.1335 6.50898 15.1335Z" fill="#FFE0C5"/>
-</svg>

static/images/icons/photos.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.018 11.594a3.209 3.209 0 0 1 2.856-3.527l29.012-3.05a3.209 3.209 0 0 1 3.523 2.825l5.566.32a3.209 3.209 0 0 1 3.016 3.437l-1.633 22.378a3.209 3.209 0 0 1-3.322 2.973l-.57-.021a3.209 3.209 0 0 1-2.86 3.484l-29.012 3.05a3.209 3.209 0 0 1-3.527-2.857l-3.05-29.012Zm38.255 23.493L37.603 9.69l5.267.302a1.375 1.375 0 0 1 1.293 1.473l-1.634 22.379a1.375 1.375 0 0 1-1.424 1.274l-.832-.031ZM5.065 9.89a1.375 1.375 0 0 0-1.224 1.511L5.9 30.982l4.415-.464-.596-5.668a2.06 2.06 0 0 1 .584-1.665l6.249-6.322c.36-.365.83-.57 1.312-.607a.915.915 0 0 1 .302-.085l5.84-.614c.302-.032.605.043.858.211l7.154 4.78c.793.53.725 1.61.074 2.112l.597 5.506 4.912-.516a.959.959 0 0 1 .047-.004L35.59 8.066a1.375 1.375 0 0 0-1.511-1.225L5.065 9.891Zm26.23 22.435-1.007-9.288-2.845.3.953 9.064c.008.076.011.152.011.227l2.887-.303Zm-8.187 2.704 2.82-.297h.01l6.082-.64a1.298 1.298 0 0 0 1.155-1.43l-.29-2.674 4.907-.515a.957.957 0 0 0 .047-.006l.8 7.61a1.375 1.375 0 0 1-1.224 1.511L8.402 41.64a1.375 1.375 0 0 1-1.511-1.224l-.8-7.61 4.414-.463.202 1.919a2.06 2.06 0 0 0 2.265 1.834l3.307-.347a2.061 2.061 0 0 0 1.834-2.266l-.42-4.003c-.073-.685.446-1.353 1.229-1.435.782-.082 1.429.462 1.5 1.148l.421 4.004a2.06 2.06 0 0 0 2.265 1.834ZM22.246 29l.42 4.004a.227.227 0 0 0 .25.202l3.454-.363a.228.228 0 0 0 .202-.25l-.99-9.415a.227.227 0 0 0-.1-.165l-7.34-4.89a.227.227 0 0 0-.287.029l-6.249 6.322a.227.227 0 0 0-.064.184l.989 9.411a.227.227 0 0 0 .25.203l3.306-.348a.227.227 0 0 0 .202-.25l-.42-4.003c-.184-1.749 1.128-3.269 2.861-3.45 1.733-.183 3.332 1.03 3.516 2.78Zm4.382-7.42 3.139-.33-5.762-3.85-3.143.331 5.637 3.756c.044.03.087.06.129.093Z" />
-</svg>