feat: Use icon library instead of SVGs (#271)

2026-01-28 21:31:04 +00:00 · 2024-12-21 19:22:13 +01:00
parent b068c38661
commit f73f54a926
30 changed files with 118 additions and 139 deletions
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -4,6 +4,8 @@
 	import type { Contributor } from '$lib/types';
 	import ContributorButton from './ContributorPerson.svelte';

+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	export let contributors: Contributor[];
 	export let name: string;
 	export let url: string;
@@ -20,15 +22,12 @@
 		on:click={() => (expanded = !expanded)}
 		on:keypress={() => (expanded = !expanded)}
 	>
-		<a href="{url}" rel="noreferrer" target="_blank" on:click|stopPropagation>
+		<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
 			<h4>{name}</h4>
 		</a>
-		<img
-			id="arrow"
-			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
-			src="/icons/expand_less.svg"
-			alt="dropdown"
-		/>
+		<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}>
+			<ChevronUp size="24px" color="var(--surface-six)" />
+		</div>
 	</div>

 	{#if expanded}
@@ -63,7 +62,6 @@
 	}

 	#arrow {
-		height: 1.5rem;
 		transition: all 0.2s var(--bezier-one);
 		user-select: none;
 	}
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -16,6 +16,10 @@
 	import DonateHeartAnimation from './DonateHeartAnimation.svelte';
 	import TeamMember from './TeamMember.svelte';

+	import CircleMultipleOutline from 'svelte-material-icons/CircleMultipleOutline.svelte';
+	import WalletOutline from 'svelte-material-icons/WalletOutline.svelte';
+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+
 	import { supportsWebP } from '$util/supportsWebP';

 	const teamQuery = createQuery(['team'], queries.team);
@@ -135,7 +139,7 @@

 <Dialogue bind:modalOpen={cryptoDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/coins.svg" alt="Cryptocurrencies" />
+		<CircleMultipleOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">Cryptocurrencies</svelte:fragment>
 	<svelte:fragment slot="description">
@@ -161,7 +165,9 @@
 							/>
 							{`${wallet.network} (${wallet.currency_code})`}
 						</div>
-						<img id="arrow" src="/icons/expand_less.svg" alt="continue" />
+						<div id="arrow">
+							<ChevronUp size="20px" color="var(--surface-six)" />
+						</div>
 					</button>
 				{/each}
 			</Query>
@@ -174,7 +180,7 @@

 <Dialogue bind:modalOpen={qrCodeDialogue}>
 	<svelte:fragment slot="icon">
-		<img class="qr-code" src="/icons/wallet.svg" alt="QR Code" />
+		<WalletOutline size="32px" color="var(--surface-six)" />
 	</svelte:fragment>
 	<svelte:fragment slot="title">{qrCodeDialogueName} Wallet</svelte:fragment>
 	<svelte:fragment slot="description">
--- a/src/routes/donate/TeamMember.svelte
+++ b/src/routes/donate/TeamMember.svelte
@@ -4,7 +4,8 @@

 	import type { TeamMember } from '$lib/types';
 	import ToolTip from '$lib/components/ToolTip.svelte';
-	import Svg from '$lib/components/Svg.svelte';
+
+	import CheckDecagramOutline from 'svelte-material-icons/CheckDecagramOutline.svelte';

 	export let member: TeamMember;
 	export let i: number;
@@ -15,9 +16,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">
@@ -37,15 +35,11 @@
 				>
 					<div class="desktop">
 						<a href={member.gpg_key.url} rel="noreferrer" target="_blank">
-							<Svg svgHeight={16} viewBoxHeight={16}>
-								<path d={verifiedIconPath} />
-							</Svg>
+							<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						</a>
 					</div>
 					<div class="mobile">
-						<Svg svgHeight={16} viewBoxHeight={16}>
-							<path d={verifiedIconPath} />
-						</Svg>
+						<CheckDecagramOutline size="20px" color="var(--secondary)" />
 						<h5>GPG key</h5>
 					</div>
 				</ToolTip>
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -7,6 +7,8 @@

 	import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';

+	import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
+
 	import Head from '$lib/components/Head.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -89,16 +91,13 @@
 	<div class="buttons">
 		<Query {query} let:data>
 			{#if !isAndroid || androidVersion < 8}
-				<Button on:click={handleClick} type="filled" icon="download">
+				<Button on:click={handleClick} type="filled">
+					<TrayArrowDown size="20px" />
 					{data.release.version}
 				</Button>
 			{:else}
-				<Button
-					on:click={handleClick}
-					type="filled"
-					icon="download"
-					href={data.release.download_url}
-				>
+				<Button on:click={handleClick} type="filled" href={data.release.download_url}>
+					<TrayArrowDown size="20px" />
 					{data.release.version}
 				</Button>
 			{/if}
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+
 	import type { Patch } from '$lib/types';
-	import { compare, coerce } from 'semver';
 	import Button from '$lib/components/Button.svelte';

+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let patch: Patch;
 	export let showAllVersions: boolean;
 	let expanded: boolean = false;
@@ -28,7 +30,9 @@
 			<h3>{patch.name}</h3>
 		</div>
 		{#if hasPatchOptions}
-			<img class="expand-arrow" src="/icons/expand_more.svg" alt="dropdown" />
+			<div class="expand-arrow">
+				<ChevronDown size="24px" color="var(--surface-six)" />
+			</div>
 		{/if}
 	</div>
 	{#if patch.description}
@@ -71,12 +75,12 @@
 			{#if patch.compatiblePackages[0].versions.length > 1}
 				<li class="button">
 					<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
-						<img
+						<div
 							class="expand-arrow"
 							style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
-							src="/icons/expand_more.svg"
-							alt="dropdown"
-						/>
+						>
+							<ChevronDown size="24px" color="var(--surface-six)" />
+						</div>
 					</Button>
 				</li>
 			{/if}