flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use SVG icons from global symbols

Browse Source 
Allow to change color and avoid code duplication
This commit is contained in:
Félix Péault
2021-11-10 22:57:50 +01:00
parent f1be0b719e
commit 73c9e80a21
20 changed files with 90 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/SVGSprite.svelte Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

4
src/components/atoms/BoxCTA.svelte
View File

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

3
src/components/atoms/ButtonCart.svelte
View File

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

12
src/components/atoms/Icon.svelte Normal file
View File

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

30
src/components/molecules/Switcher.svelte
View File

@@ -1,25 +1,27 @@
<script lang="ts">
import Icon from '$components/atoms/Icon.svelte'
let isOpen: boolean = false
// Links
const links = [
{
"icon": "globe",
"alt": "Globe",
"url": "/locations",
"text": "Discover locations"
icon: "globe",
iconLabel: "Globe icon",
url: "/locations",
text: "Discover locations"
},
{
"icon": "photos",
"alt": "Photos",
"url": "/photos",
"text": "Browse all photos"
icon: "photos",
iconLabel: "Photos icon",
url: "/photos",
text: "Browse all photos"
},
{
"icon": "bag",
"alt": "Shopping bag",
"url": "/shop",
"text": "Shop the prints"
icon: "bag",
iconLabel: "Bag icon",
url: "/shop",
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>

5
src/components/organisms/Cart.svelte
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>

14
src/routes/[country]/[location]/[photo].svelte
View File

@@ -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
$: shownPhotos = [
// Reactive photos
$: displayedPhotos = [
...photos.filter((photo: any, index: number) => {
// Grab the 4 prev and next photos depending the index
console.log(index)
// Grab the 4 prev and next photos depending on the 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>

3
src/routes/__layout.svelte
View File

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

6
src/routes/index.svelte
View File

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

4
src/style/atoms/_box-cta.scss
View File

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

3
src/style/atoms/_button-cart.scss
View File

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

1
src/style/molecules/_switcher.scss
View File

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

22
src/style/organisms/_cart.scss
View File

@@ -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;
height: 64px;
width: 3.6em;
height: 3.6em;
margin-bottom: 16px;
color: #FF6C89;
background: $color-cream;
border-radius: 100%;
svg {
display: block;
width: auto;
height: 50%;
object-fit: contain;
}
}
}

4
src/style/pages/_viewer-photo.scss
View File

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