Use SVG icons from global symbols

Allow to change color and avoid code duplication
This commit is contained in:
2021-11-10 22:57:50 +01:00
parent f1be0b719e
commit 73c9e80a21
20 changed files with 90 additions and 52 deletions

View File

@@ -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>