Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Use icon library instead of SVGs #271

Merged
merged 29 commits into from
Dec 21, 2024
Merged

feat: Use icon library instead of SVGs #271

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
df01b82
feat: add Google icons font
madkarmaa Dec 13, 2024
1e813e8
feat: add Icon component
madkarmaa Dec 13, 2024
03be90f
fix: fix icons url
madkarmaa Dec 13, 2024
66a4b7e
feat: always lowercase icon name
madkarmaa Dec 13, 2024
62bb949
feat: add filled attribute
madkarmaa Dec 13, 2024
f33e559
fix: remove restProps
madkarmaa Dec 13, 2024
9a295d0
refactor: rename class
madkarmaa Dec 13, 2024
500a89d
undo 'refactor: rename class'
madkarmaa Dec 13, 2024
7619ad5
feat: switch from SVGs to Icon components
madkarmaa Dec 13, 2024
0d910e9
refactor: remove inline css
madkarmaa Dec 13, 2024
510d624
feat: add icon container CSS class
madkarmaa Dec 14, 2024
ca4be12
feat: add size and color props
madkarmaa Dec 14, 2024
229be9a
feat: use icon component in contributors arrow
madkarmaa Dec 14, 2024
cd6a2d9
refactor: remove CSSSize type
madkarmaa Dec 15, 2024
9a1047f
refactor: wrap icon in div to inherit the color from
madkarmaa Dec 15, 2024
0a75393
feat: use icon component in patch item
madkarmaa Dec 15, 2024
b23509e
feat: add missing semver types package
madkarmaa Dec 15, 2024
40d6500
feat: use icon component in donations page
madkarmaa Dec 15, 2024
56eef03
feat: use icon in dialogue back button
madkarmaa Dec 15, 2024
e2e4038
feat: use icon in mobile footer dropdown
madkarmaa Dec 15, 2024
1e3c4f1
feat: swap out more svgs for icon component
madkarmaa Dec 15, 2024
9e8b2ea
feat: use `svelte-material-icons` npm package
madkarmaa Dec 17, 2024
e7edac2
fix: add button component icons
madkarmaa Dec 17, 2024
e125f29
refactor: delete old component
madkarmaa Dec 17, 2024
b3df2a0
fix: fix icon sizes
madkarmaa Dec 18, 2024
0daacd1
refactor: remove icon wrapper div
madkarmaa Dec 18, 2024
9a9af1a
ci: remove unused semver dependency
madkarmaa Dec 18, 2024
0fb03d5
refactor: remove named slot icon from Button component
madkarmaa Dec 21, 2024
ffac7d6
chore: Remove unused assets
Ushie Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- OpenGraph -->
<meta property="og:type" content="website" />
<meta property="og:image" content="/logo.png" />
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Twitter -->
<meta name="twitter:image" itemprop="image" content="/logo.png" />
<meta name="twitter:card" content="summary" />
<!-- OpenGraph -->
<meta property="og:type" content="website" />
<meta property="og:image" content="/logo.png" />

%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
<!-- Twitter -->
<meta name="twitter:image" itemprop="image" content="/logo.png" />
<meta name="twitter:card" content="summary" />

<!-- Google Icons font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

%sveltekit.head%
</head>

<body>
<div>%sveltekit.body%</div>
</body>

</html>
45 changes: 24 additions & 21 deletions src/layout/Navbar/NavHost.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
import { expoOut } from 'svelte/easing';

import Navigation from './NavButton.svelte';
import Svg from '$lib/components/Svg.svelte';
import Modal from '$lib/components/Dialogue.svelte';
import Button from '$lib/components/Button.svelte';
import Icon from '$lib/components/Icon.svelte';

import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
import RouterEvents from '$data/RouterEvents';
Expand Down Expand Up @@ -86,11 +86,9 @@
</div>
<div id="secondary-navigation">
<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
<Svg viewBoxHeight={24} svgHeight={20}>
<path
d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
/>
</Svg>
<div class="navbar-settings-icon">
<Icon name="settings" filled />
</div>
</button>
</div>
</div>
Expand All @@ -109,24 +107,19 @@
<!-- settings -->
<Modal bind:modalOpen>
<svelte:fragment slot="icon">
<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
<rect fill="none" height="24" width="24" />
<path
d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
/>
</Svg>
<div>
<Icon name="settings" filled />
</div>
</svelte:fragment>
<svelte:fragment slot="title">Settings</svelte:fragment>
<svelte:fragment slot="description">Configure the API for this website.</svelte:fragment>
<div id="settings-content">
<div class="input-wrapper">
<input name="api-url" type="text" bind:value={url} />
<button id="button-reset" on:click={reset} aria-label="Reset Button">
<Svg viewBoxHeight={48} svgHeight={24}>
<path
d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
/>
</Svg>
<div>
<Icon name="replay" />
</div>
</button>
</div>
</div>
Expand All @@ -142,12 +135,12 @@
padding: 0.5rem;
}

path {
fill: var(--surface-six);
div:has(.material-symbols-outlined) {
color: var(--surface-six);
}

button:hover path {
fill: var(--secondary);
button:hover > div:has(.material-symbols-outlined) {
color: var(--secondary);
}

button {
Expand Down Expand Up @@ -233,6 +226,16 @@
justify-content: space-between;
}

.navbar-settings-icon {
display: flex;
align-items: center;
justify-content: center;
}

.navbar-settings-icon > :global(span) {
font-size: 1.2rem;
}

@media (min-width: 768px) {
.nav-wrapper {
align-items: center;
Expand Down
6 changes: 4 additions & 2 deletions src/lib/components/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import Icon from './Icon.svelte';

export let type: 'filled' | 'tonal' | 'text' | 'outlined';
export let icon = '';
export let href = '';
Expand All @@ -9,14 +11,14 @@
{#if href}
<a {href} {target} class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
<Icon name={icon} />
{/if}
<slot />
</a>
{:else}
<button on:click class={`button-${type}`} aria-label={label}>
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
<Icon name={icon} />
{/if}
<slot />
</button>
Expand Down
22 changes: 22 additions & 0 deletions src/lib/components/Icon.svelte
View file
Open in desktop
madkarmaa marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script lang="ts">
export let name: string;
export let filled: boolean = false;

name = name.toLowerCase();

const filledValue = filled ? 1 : 0;
</script>

<span class="material-symbols-outlined" style="--filled: {filledValue};">
{name}
</span>

<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' var(--filled),
'wght' 400,
'GRAD' 0,
'opsz' 24;
}
</style>
13 changes: 3 additions & 10 deletions src/routes/donate/TeamMember.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import type { TeamMember } from '$lib/types';
import ToolTip from '$lib/components/ToolTip.svelte';
import Svg from '$lib/components/Svg.svelte';
import Icon from '$lib/components/Icon.svelte';

export let member: TeamMember;
export let i: number;
Expand All @@ -15,9 +15,6 @@
duration: 750,
delay: 50 * i
};

const verifiedIconPath =
'm9.585.52.929.68c.153.112.331.186.518.215l1.138.175a2.678 2.678 0 0 1 2.24 2.24l.174 1.139c.029.187.103.365.215.518l.68.928a2.677 2.677 0 0 1 0 3.17l-.68.928a1.174 1.174 0 0 0-.215.518l-.175 1.138a2.678 2.678 0 0 1-2.241 2.241l-1.138.175a1.17 1.17 0 0 0-.518.215l-.928.68a2.677 2.677 0 0 1-3.17 0l-.928-.68a1.174 1.174 0 0 0-.518-.215L3.83 14.41a2.678 2.678 0 0 1-2.24-2.24l-.175-1.138a1.17 1.17 0 0 0-.215-.518l-.68-.928a2.677 2.677 0 0 1 0-3.17l.68-.928c.112-.153.186-.331.215-.518l.175-1.14a2.678 2.678 0 0 1 2.24-2.24l1.139-.175c.187-.029.365-.103.518-.215l.928-.68a2.677 2.677 0 0 1 3.17 0ZM7.303 1.728l-.927.68a2.67 2.67 0 0 1-1.18.489l-1.137.174a1.179 1.179 0 0 0-.987.987l-.174 1.136a2.677 2.677 0 0 1-.489 1.18l-.68.928a1.18 1.18 0 0 0 0 1.394l.68.927c.256.348.424.753.489 1.18l.174 1.137c.078.509.478.909.987.987l1.136.174a2.67 2.67 0 0 1 1.18.489l.928.68c.414.305.979.305 1.394 0l.927-.68a2.67 2.67 0 0 1 1.18-.489l1.137-.174a1.18 1.18 0 0 0 .987-.987l.174-1.136a2.67 2.67 0 0 1 .489-1.18l.68-.928a1.176 1.176 0 0 0 0-1.394l-.68-.927a2.686 2.686 0 0 1-.489-1.18l-.174-1.137a1.179 1.179 0 0 0-.987-.987l-1.136-.174a2.677 2.677 0 0 1-1.18-.489l-.928-.68a1.176 1.176 0 0 0-1.394 0ZM11.28 6.78l-3.75 3.75a.75.75 0 0 1-1.06 0L4.72 8.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L7 8.94l3.22-3.22a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z';
</script>

<div class="member">
Expand All @@ -37,15 +34,11 @@
>
<div class="desktop">
<a href={member.gpg_key.url} rel="noreferrer" target="_blank">
<Svg svgHeight={16} viewBoxHeight={16}>
<path d={verifiedIconPath} />
</Svg>
<Icon name="verified" />
</a>
</div>
<div class="mobile">
<Svg svgHeight={16} viewBoxHeight={16}>
<path d={verifiedIconPath} />
</Svg>
<Icon name="verified" />
<h5>GPG key</h5>
</div>
</ToolTip>
Expand Down
Loading