From 9e6df85bf126a3fae26a07ea27593a7cc5cd49f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 22:10:53 +0100
Subject: [PATCH] Make more icons reusable in global SVG sprite

---
 src/components/SVGSprite.svelte                      |  8 ++++++++
 src/components/atoms/IconArrow.svelte                |  7 +++++--
 src/components/molecules/CartItem.svelte             |  4 ++--
 src/components/molecules/ShopLocationSwitcher.svelte |  4 ++--
 src/components/organisms/Carousel.svelte             |  4 ++--
 static/images/icons/pin.svg                          |  5 -----
 static/images/icons/sort.svg                         | 12 ------------
 7 files changed, 19 insertions(+), 25 deletions(-)
 delete mode 100644 static/images/icons/pin.svg
 delete mode 100644 static/images/icons/sort.svg

diff --git a/src/components/SVGSprite.svelte b/src/components/SVGSprite.svelte
index 604c7b3..e67c433 100644
--- a/src/components/SVGSprite.svelte
+++ b/src/components/SVGSprite.svelte
@@ -15,5 +15,13 @@
         <symbol id="icon-map-pin" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" clip-rule="evenodd" d="M16.853 21.36a1.014 1.014 0 0 1-1.813 0s-3.534-6.995-5.207-10.26c-1.674-3.263-.373-7.506 3.022-9.23 3.393-1.725 7.53-.373 9.204 3.03 1.023 2.052.977 4.244 0 6.202a2734.416 2734.416 0 0 1-5.206 10.259Zm2.37-13.243a3.239 3.239 0 0 0-3.254-3.264c-1.813 0-3.254 1.492-3.254 3.264a3.24 3.24 0 0 0 3.254 3.264 3.239 3.239 0 0 0 3.255-3.264Zm-5.68 16.364a.78.78 0 0 0 .06.092l-.158 2.208 5.877 1.904v-6.974c.562-1.06 1.233-2.321 1.91-3.593v10.567l5.876-1.904-.808-11.297-4.564 1.686c.422-.792.836-1.569 1.22-2.285l3.785-1.404c.575-.171 1.02.326 1.081.929l1.21 12a1.76 1.76 0 0 1-1.206 1.857l-7.55 2.421-7.823-2.43-8.41 2.43c-.295.066-.625.033-.882-.164s-.368-.46-.33-.755l1.872-13.07a.901.901 0 0 1 .625-.69l3.523-1.158c.263.51.53 1.033.794 1.559l-3.142 1.012-1.616 11.263 6.721-1.937.398-5.52a312.979 312.979 0 0 1 1.538 3.253Z"/>
         </symbol>
+
+        <symbol id="arrow" viewBox="0 0 12 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z"/>
+        </symbol>
+
+        <symbol id="cross" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" />
+        </symbol>
     </defs>
 </svg>
\ No newline at end of file
diff --git a/src/components/atoms/IconArrow.svelte b/src/components/atoms/IconArrow.svelte
index a6a3f18..23fecbf 100644
--- a/src/components/atoms/IconArrow.svelte
+++ b/src/components/atoms/IconArrow.svelte
@@ -3,6 +3,9 @@
     export let flip: boolean = false
 </script>
 
-<svg class="arrow arrow--{color}" class:arrow--flip={flip} width="12" height="14" viewBox="0 0 12 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z"/>
+<svg width="12" height="14"
+    class="arrow arrow--{color}"
+    class:arrow--flip={flip}
+>
+    <use xlink:href="#arrow" />
 </svg>
\ No newline at end of file
diff --git a/src/components/molecules/CartItem.svelte b/src/components/molecules/CartItem.svelte
index e6111a2..7952c95 100644
--- a/src/components/molecules/CartItem.svelte
+++ b/src/components/molecules/CartItem.svelte
@@ -54,8 +54,8 @@
             size="tiny" color="gray"
             on:click={removeItem}
         >
-            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
+            <svg width="8" height="8">
+                <use xlink:href="#cross" />
             </svg>
         </ButtonCircle>
     </div>
diff --git a/src/components/molecules/ShopLocationSwitcher.svelte b/src/components/molecules/ShopLocationSwitcher.svelte
index f56e5b9..05644b3 100644
--- a/src/components/molecules/ShopLocationSwitcher.svelte
+++ b/src/components/molecules/ShopLocationSwitcher.svelte
@@ -22,8 +22,8 @@
 <dl class={classes}>
     <dt class="text-label">Shop your city</dt>
     <dd>
-        <svg width="14" height="17" viewBox="0 0 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.1 11.18a.52.52 0 0 1-.92 0L3.55 6.05a3.46 3.46 0 1 1 6.19 0L7.1 11.18Zm1.2-6.62c0-.91-.73-1.63-1.65-1.63a1.63 1.63 0 1 0 0 3.26c.92 0 1.65-.72 1.65-1.63Zm-2.88 8.18.03.05-.08 1.1 2.98.95v-3.48l.96-1.8v5.28l2.98-.95-.41-5.65-2.31.84.62-1.14 1.91-.7c.3-.09.52.16.55.46l.61 6c.04.42-.21.8-.61.93l-3.82 1.21-3.96-1.21-4.25 1.21a.54.54 0 0 1-.45-.08.4.4 0 0 1-.17-.38l.95-6.53c.04-.16.15-.3.32-.35l1.78-.57.4.77-1.59.51-.82 5.63 3.4-.97.2-2.76c.47.95.78 1.63.78 1.63Z"/>
+        <svg width="18" height="18">
+            <use xlink:href="#icon-map-pin" />
         </svg>
         <select on:change={quickLocationChange}>
             {#each $shopLocations as { name, slug }}
diff --git a/src/components/organisms/Carousel.svelte b/src/components/organisms/Carousel.svelte
index 4ebc8fb..46e2db7 100644
--- a/src/components/organisms/Carousel.svelte
+++ b/src/components/organisms/Carousel.svelte
@@ -118,8 +118,8 @@
             style="--x: {$arrowPosition.x}px; --y: {$arrowPosition.y}px;"
             class:is-flipped={arrowDirection === 'prev' && !isFirstSlide || isLastSlide}
         >
-            <svg width="29" height="32" viewBox="0 0 29 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.82 28.275a2.182 2.182 0 0 0 3.086 3.086l13.818-13.818a2.182 2.182 0 0 0 0-3.086L13.906.64a2.182 2.182 0 1 0-3.085 3.086l10.093 10.093H2.182a2.182 2.182 0 1 0 0 4.364h18.732L10.821 28.275Z" />
+            <svg width="29" height="32">
+                <use xlink:href="#arrow" />
             </svg>
         </span>
     {/if}
diff --git a/static/images/icons/pin.svg b/static/images/icons/pin.svg
deleted file mode 100644
index 3a3dc95..0000000
--- a/static/images/icons/pin.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
-  <path d="M25.3 9.764a.879.879 0 0 0-1.532-.863l-4.763 8.453a.879.879 0 1 0 1.532.863L25.3 9.764Z" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.418.515a1.318 1.318 0 1 0-1.114 2.39l1.192.556-8.879 15.257-1.336-.623a1.319 1.319 0 0 0-1.115 2.39l19.917 9.287a1.319 1.319 0 0 0 1.114-2.39l-1.336-.623 5.981-16.609 1.192.556a1.318 1.318 0 1 0 1.114-2.39L22.418.515Zm-7.2 18.95 14.043 6.548 5.682-15.778-11.291-5.266-8.435 14.495Z" />
-  <path d="m11.795 46.277 9.49-17.337c.193-.357.138-.763-.12-.883l-2.31-1.076c-.257-.12-.607.103-.753.475L10.92 45.869c-.3.779.475 1.14.874.408Z" />
-</svg>
\ No newline at end of file
diff --git a/static/images/icons/sort.svg b/static/images/icons/sort.svg
deleted file mode 100644
index f188fa8..0000000
--- a/static/images/icons/sort.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
-    <path d="M9.407 6.379c0-.622.504-1.125 1.125-1.125h10.343a1.125 1.125 0 0 1 0 2.25H10.532a1.125 1.125 0 0 1-1.125-1.125Zm0 5.247c0-.622.504-1.125 1.125-1.125h7.195a1.125 1.125 0 0 1 0 2.25h-7.195a1.125 1.125 0 0 1-1.125-1.125Zm1.125 4.122a1.125 1.125 0 0 0 0 2.25h4.046a1.125 1.125 0 0 0 0-2.25h-4.046ZM-.046 7.214l4.442-4.44a1.125 1.125 0 0 1 1.59 1.59l-4.44 4.441a1.125 1.125 0 1 1-1.592-1.59Z"/>
-    <path d="M5.191 2.444c.622 0 1.125.503 1.125 1.125v16.79a1.125 1.125 0 0 1-2.25 0V3.569c0-.622.504-1.125 1.125-1.125Z"/>
-    <path d="m1.546 15.122 4.44 4.441a1.125 1.125 0 0 1-1.59 1.591l-4.441-4.44a1.125 1.125 0 0 1 1.59-1.592Z"/>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M0 0h24v24H0z"/>
-    </clipPath>
-  </defs>
-</svg>
\ No newline at end of file