dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: seperate icons in standalone files

Browse source
This commit is contained in:
EETagent 2022-11-25 14:54:02 +01:00
parent 4a7124b6bb
commit 78ada5d132
6 changed files with 69 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
frontend/src/lib/components/icon/Circles.svelte → frontend/src/lib/components/icons/Circles.svelte
View file

11
frontend/src/lib/components/icons/Email.svelte Normal file
View file

@ -0,0 +1,11 @@
<span>@</span>
<style>
span {
@apply flex items-center justify-center;
@apply text-center text-2xl text-sspsBlue;
@apply pb-1;
@apply select-none;
}
</style>

20
frontend/src/lib/components/icons/Home.svelte Normal file
View file

@ -0,0 +1,20 @@
<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"
><path
d="M4.586 20.414l-.707.707zm14.828 0l-.707-.707zM19 10v7h2v-7zm-3 10H8v2h8zM5 17v-7H3v7zm3 3c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C6.3 22.002 7.085 22 8 22zm-5-3c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C5.002 18.6 5 17.971 5 17zm16 0c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C21.002 18.7 21 17.915 21 17zm-3 5c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064z"
/><path
d="M3 11l6.172-6.172c1.333-1.333 2-2 2.828-2s1.495.667 2.828 2L21 11"
stroke-linecap="round"
stroke-width="2"
/><path
d="M9 17c0-.932 0-1.398.152-1.765a2 2 0 0 1 1.083-1.083C10.602 14 11.068 14 12 14s1.398 0 1.765.152a2 2 0 0 1 1.083 1.083C15 15.602 15 16.068 15 17v4H9zm7-12.5c0-.466 0-.699.076-.883a1 1 0 0 1 .541-.54C16.801 3 17.034 3 17.5 3s.699 0 .883.076a1 1 0 0 1 .54.541c.077.184.077.417.077.883V10l-3-3.5z"
/></svg
>
<style>
path {
@apply fill-sspsBlue;
}
path:nth-child(2) {
@apply stroke-sspsBlue;
}
</style>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

18
frontend/src/lib/components/icons/Lock.svelte Normal file
View file

@ -0,0 +1,18 @@
<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"
><g
><path
d="M19.414 20.414l.707.707zm-14.828 0l-.707.707zm14.828-9.828l.707-.707zM8 11h8V9H8zm-3 6v-3H3v3zm11 3H8v2h8zm3-6v3h2v-3zm-3 8c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064zm3-5c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C21.002 18.7 21 17.915 21 17zM3 17c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C5.002 18.6 5 17.971 5 17zm5 3c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C6.3 22.002 7.085 22 8 22zm8-9c.971 0 1.599.002 2.061.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.793-.797C17.7 8.998 16.915 9 16 9zm5 3c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061zM8 9c-.915 0-1.701-.002-2.328.082-.655.088-1.284.287-1.793.797l1.414 1.414c.076-.076.212-.17.646-.229C6.4 11.002 7.029 11 8 11zm-3 5c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L3.879 9.879c-.51.51-.709 1.138-.797 1.793C2.998 12.3 3 13.085 3 14z"
/><path
d="M16 6h-1zm-8 4h1V6.5H7V10zm1-3.5c0-1.174.447-1.718.942-2.026C10.514 4.12 11.293 4 12 4V2c-.856 0-2.077.131-3.114.776C7.772 3.468 7 4.674 7 6.5zM12 4c.706 0 1.514.118 2.108.441.524.285.892.72.892 1.559h2c0-1.66-.85-2.726-1.937-3.316C14.05 2.132 12.856 2 12 2zm3 2v4h2V6z"
/></g
></svg
>
<style>
svg {
@apply stroke-sspsBlue fill-sspsBlue;
}
g, path {
@apply fill-sspsBlue stroke-sspsBlue;
}
</style>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

18
frontend/src/lib/components/icons/Telephone.svelte Normal file
View file

@ -0,0 +1,18 @@
<svg
class="fill-transparent stroke-sspsBlue"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
><g stroke-linecap="round" stroke-linejoin="round"
><path
d="M17.935 19.5C13.535 23.9.1 10.465 4.5 6.065l1.232-1.232a2 2 0 0 1 3.14.405l.535.914a2 2 0 0 1-.071 2.131l-.363.535a1.5 1.5 0 0 0 .182 1.902l2.062 2.063 2.063 2.062a1.5 1.5 0 0 0 1.902.181l.535-.362a2 2 0 0 1 2.131-.07l.914.534a2 2 0 0 1 .404 3.14z"
stroke-width="2"
/><path d="M13 6.5l4-4m0 0h-2.5m2.5 0V5m4 1.5l-4 4m0 0h2.5m-2.5 0V8" stroke-width="1.5" /></g
></svg
>
<style>
svg {
@apply stroke-sspsBlue fill-transparent;
}
</style>
Side by side

After

Width:  |  Height:  |  Size: 621 B

11
frontend/src/routes/admin/auth/login/+page.svelte
View file

@ -4,6 +4,7 @@
import TextField from '$lib/components/textfield/TextField.svelte';
import background from '$lib/assets/background2.jpg';
import Lock from '$lib/components/icons/Lock.svelte';
let adminIdValue = '';
let adminPasswordValue = '';
@ -25,15 +26,7 @@
<TextField bind:value={adminPasswordValue} placeholder="Heslo" type="password" icon>
<div slot="icon" class="flex items-center justify-center">
<svg class="stroke-sspsBlue" fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"
><g class="fill-sspsBlue"
><path
d="M19.414 20.414l.707.707zm-14.828 0l-.707.707zm14.828-9.828l.707-.707zM8 11h8V9H8zm-3 6v-3H3v3zm11 3H8v2h8zm3-6v3h2v-3zm-3 8c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064zm3-5c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C21.002 18.7 21 17.915 21 17zM3 17c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C5.002 18.6 5 17.971 5 17zm5 3c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C6.3 22.002 7.085 22 8 22zm8-9c.971 0 1.599.002 2.061.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.793-.797C17.7 8.998 16.915 9 16 9zm5 3c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061zM8 9c-.915 0-1.701-.002-2.328.082-.655.088-1.284.287-1.793.797l1.414 1.414c.076-.076.212-.17.646-.229C6.4 11.002 7.029 11 8 11zm-3 5c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L3.879 9.879c-.51.51-.709 1.138-.797 1.793C2.998 12.3 3 13.085 3 14z"
/><path
d="M16 6h-1zm-8 4h1V6.5H7V10zm1-3.5c0-1.174.447-1.718.942-2.026C10.514 4.12 11.293 4 12 4V2c-.856 0-2.077.131-3.114.776C7.772 3.468 7 4.674 7 6.5zM12 4c.706 0 1.514.118 2.108.441.524.285.892.72.892 1.559h2c0-1.66-.85-2.726-1.937-3.316C14.05 2.132 12.856 2 12 2zm3 2v4h2V6z"
/></g
></svg
>
<Lock />
</div>
</TextField>
</div>