Skip to content

Commit f73f54a

Browse files
madkarmaamadkarmaa
authored
feat: Use icon library instead of SVGs (#271)
1 parent b068c38 commit f73f54a

30 files changed

+118
-139
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"prettier-plugin-svelte": "3.3.2",
2929
"qrious": "^4.0.2",
3030
"sass": "1.81.0",
31-
"semver": "7.6.3",
3231
"sirv-cli": "3.0.0",
3332
"svelte": "4.2.18",
3433
"svelte-check": "4.1.0",
@@ -46,6 +45,7 @@
4645
"@tanstack/query-persist-client-core": "^4.36.1",
4746
"@tanstack/query-sync-storage-persister": "^4.36.1",
4847
"@tanstack/svelte-query": "^4.36.1",
49-
"datetrigger": "^1.1.1"
48+
"datetrigger": "^1.1.1",
49+
"svelte-material-icons": "^3.0.5"
5050
}
5151
}

‎src/app.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="/favicon.ico" />
6-
<meta
7-
name="robots"
8-
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
9-
/>
10-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
11-
<meta name="viewport" content="width=device-width, initial-scale=1" />
123

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

17-
<!-- Twitter -->
18-
<meta name="twitter:image" itemprop="image" content="/logo.png" />
19-
<meta name="twitter:card" content="summary" />
11+
<!-- OpenGraph -->
12+
<meta property="og:type" content="website" />
13+
<meta property="og:image" content="/logo.png" />
2014

21-
%sveltekit.head%
22-
</head>
23-
<body>
24-
<div>%sveltekit.body%</div>
25-
</body>
26-
</html>
15+
<!-- Twitter -->
16+
<meta name="twitter:image" itemprop="image" content="/logo.png" />
17+
<meta name="twitter:card" content="summary" />
18+
19+
%sveltekit.head%
20+
</head>
21+
22+
<body>
23+
<div>%sveltekit.body%</div>
24+
</body>
25+
26+
</html>

‎src/layout/Footer/FooterSection.svelte‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import { slide } from 'svelte/transition';
33
import { quintOut } from 'svelte/easing';
44
5+
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
6+
57
export let title: string;
68
let expanded: boolean = false;
79
</script>
@@ -19,10 +21,9 @@
1921
<span>
2022
{title}
2123
</span>
22-
<img
23-
src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
24-
alt={expanded ? 'Close' : 'Expand'}
25-
/>
24+
<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
25+
<ChevronDown size="24px" color="var(--surface-six)" />
26+
</div>
2627
</button>
2728
{#if expanded}
2829
<ul transition:slide={{ easing: quintOut, duration: 500 }}>
@@ -65,6 +66,11 @@
6566
display: none;
6667
}
6768
69+
.arrow {
70+
transition: all 0.2s var(--bezier-one);
71+
user-select: none;
72+
}
73+
6874
@media screen and (max-width: 768px) {
6975
.mobile-only {
7076
display: block;
@@ -73,8 +79,4 @@
7379
display: none;
7480
}
7581
}
76-
77-
img {
78-
height: 24px;
79-
}
8082
</style>

‎src/layout/Hero/HeroSection.svelte‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script>
22
import Button from '$lib/components/Button.svelte';
3+
4+
import TrayArrowDown from 'svelte-material-icons/TrayArrowDown.svelte';
5+
import FileDocumentOutline from 'svelte-material-icons/FileDocumentOutline.svelte';
36
</script>
47

58
<section class="hero">
@@ -9,8 +12,14 @@
912
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
1013
</p>
1114
<div class="hero-buttons">
12-
<Button icon="download" type="filled" href="download">Download</Button>
13-
<Button icon="docs" type="tonal" href="patches">View patches</Button>
15+
<Button type="filled" href="download">
16+
<TrayArrowDown size="20px" />
17+
Download
18+
</Button>
19+
<Button type="tonal" href="patches">
20+
<FileDocumentOutline size="20px" />
21+
View patches
22+
</Button>
1423
</div>
1524
</div>
1625
</section>

‎src/layout/Navbar/NavHost.svelte‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
import { expoOut } from 'svelte/easing';
66
77
import Navigation from './NavButton.svelte';
8-
import Svg from '$lib/components/Svg.svelte';
98
import Modal from '$lib/components/Dialogue.svelte';
109
import Button from '$lib/components/Button.svelte';
1110
11+
import Cog from 'svelte-material-icons/Cog.svelte';
12+
import Replay from 'svelte-material-icons/Replay.svelte';
13+
1214
import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
1315
import RouterEvents from '$data/RouterEvents';
1416
@@ -86,11 +88,7 @@
8688
</div>
8789
<div id="secondary-navigation">
8890
<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
89-
<Svg viewBoxHeight={24} svgHeight={20}>
90-
<path
91-
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"
92-
/>
93-
</Svg>
91+
<Cog size="20px" color="var(--surface-six)" />
9492
</button>
9593
</div>
9694
</div>
@@ -109,24 +107,15 @@
109107
<!-- settings -->
110108
<Modal bind:modalOpen>
111109
<svelte:fragment slot="icon">
112-
<Svg viewBoxHeight={24} viewBoxWidth={24} svgHeight={24}>
113-
<rect fill="none" height="24" width="24" />
114-
<path
115-
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"
116-
/>
117-
</Svg>
110+
<Cog size="24px" color="var(--surface-six)" />
118111
</svelte:fragment>
119112
<svelte:fragment slot="title">Settings</svelte:fragment>
120113
<svelte:fragment slot="description">Configure the API for this website.</svelte:fragment>
121114
<div id="settings-content">
122115
<div class="input-wrapper">
123116
<input name="api-url" type="text" bind:value={url} />
124117
<button id="button-reset" on:click={reset} aria-label="Reset Button">
125-
<Svg viewBoxHeight={48} svgHeight={24}>
126-
<path
127-
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"
128-
/>
129-
</Svg>
118+
<Replay size="24px" color="var(--surface-six)" />
130119
</button>
131120
</div>
132121
</div>
@@ -142,14 +131,6 @@
142131
padding: 0.5rem;
143132
}
144133
145-
path {
146-
fill: var(--surface-six);
147-
}
148-
149-
button:hover path {
150-
fill: var(--secondary);
151-
}
152-
153134
button {
154135
background-color: transparent;
155136
border: none;

‎src/lib/components/Button.svelte‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
<script lang="ts">
22
export let type: 'filled' | 'tonal' | 'text' | 'outlined';
3-
export let icon = '';
4-
export let href = '';
5-
export let target = '';
6-
export let label = '';
3+
export let href: string = '';
4+
export let target: string = '';
5+
export let label: string = '';
76
</script>
87

98
{#if href}
109
<a {href} {target} class={`button-${type}`} aria-label={label}>
11-
{#if icon}
12-
<img src="../icons/{icon}.svg" alt={icon} />
13-
{/if}
1410
<slot />
1511
</a>
1612
{:else}
1713
<button on:click class={`button-${type}`} aria-label={label}>
18-
{#if icon}
19-
<img src="../icons/{icon}.svg" alt={icon} />
20-
{/if}
2114
<slot />
2215
</button>
2316
{/if}
@@ -74,8 +67,4 @@
7467
a:hover {
7568
filter: brightness(85%);
7669
}
77-
78-
img {
79-
height: 20px;
80-
}
8170
</style>

‎src/lib/components/Dialogue.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script lang="ts">
22
import { fade } from 'svelte/transition';
33
import { quadInOut } from 'svelte/easing';
4+
5+
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
6+
47
export let modalOpen = false;
58
export let fullscreen = false;
69
export let notDismissible = false;
@@ -39,7 +42,7 @@
3942
<div class="title" class:hasIcon={$$slots.icon}>
4043
{#if fullscreen}
4144
<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
42-
<img src="../icons/back.svg" id="back" alt="back" />
45+
<ArrowLeft size="24px" color="var(--surface-six)" />
4346
</button>
4447
{/if}
4548
{#if $$slots.icon}
@@ -145,10 +148,6 @@
145148
align-items: center;
146149
}
147150
148-
#back {
149-
height: 24px;
150-
}
151-
152151
.fullscreen {
153152
padding: 0;
154153
max-height: 100%;

‎src/lib/components/FilterChip.svelte‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<script>
2+
import Check from 'svelte-material-icons/Check.svelte';
3+
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
4+
25
export let dropdown = false;
36
export let check = false;
47
export let selected = false;
58
</script>
69

710
<button class:selected on:click>
811
{#if check}
9-
<img id="check" src="/icons/check.svg" alt="selected" />
12+
<Check size="18px" color="var(--surface-six)" />
1013
{/if}
1114
<slot />
1215
{#if dropdown}
13-
<img id="dropdown" src="/icons/expand_more.svg" alt="dropdown" />
16+
<ChevronDown size="18px" color="var(--surface-six)" />
1417
{/if}
1518
</button>
1619

@@ -36,10 +39,6 @@
3639
color: var(--primary);
3740
}
3841
39-
img {
40-
height: 18px;
41-
}
42-
4342
#dropdown {
4443
margin-right: -6px;
4544
}

‎src/lib/components/Search.svelte‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
import { page } from '$app/stores';
55
import { goto } from '$app/navigation';
66
7+
import Close from 'svelte-material-icons/Close.svelte';
8+
import Magnify from 'svelte-material-icons/Magnify.svelte';
9+
710
export let title: string;
811
export let searchTerm: string | null;
912
export let displayedTerm: string | undefined;
@@ -19,16 +22,18 @@
1922
</script>
2023

2124
<div class="search-container">
22-
<img src="../icons/search.svg" id="search" alt="Search" />
25+
<div id="search">
26+
<Magnify size="24px" color="var(--surface-six)" />
27+
</div>
2328
{#if searchTerm}
24-
<img
25-
src="../icons/close.svg"
29+
<div
2630
id="clear"
27-
alt="Clear"
2831
on:click={clear}
2932
on:keypress={clear}
3033
transition:fade={{ easing: quintOut, duration: 250 }}
31-
/>
34+
>
35+
<Close size="24px" color="var(--surface-six)" />
36+
</div>
3237
{/if}
3338
<input
3439
type="text"

0 commit comments

Comments
 (0)