Make more icons reusable in global SVG sprite

2021-11-21 22:10:53 +01:00
parent bec2c0879b
commit 9e6df85bf1
7 changed files with 19 additions and 25 deletions
--- 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>
--- 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>
--- 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>
--- 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 }}
--- 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}
--- a/static/images/icons/pin.svg
+++ b/static/images/icons/pin.svg
@@ -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>
--- a/static/images/icons/sort.svg
+++ b/static/images/icons/sort.svg
@@ -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>