From dcd9efaebaf0b3c9f86c028b1be900a660f8891f Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Tue, 1 Mar 2022 01:51:43 +0100
Subject: [PATCH] use native icons

---
 frontend/src/lib/icons/IconContrast.svelte  |  5 +++
 frontend/src/lib/icons/IconCopy.svelte      |  7 ++++
 frontend/src/lib/icons/IconDice.svelte      |  5 +++
 frontend/src/lib/icons/IconEye.svelte       |  5 +++
 frontend/src/lib/icons/IconEyeOff.svelte    |  7 ++++
 frontend/src/lib/ui/Icon.svelte             | 41 +++++++++++----------
 frontend/src/lib/ui/ThemeToggle.svelte      |  2 +-
 frontend/static/icons/contrast-sharp.svg    |  1 -
 frontend/static/icons/copy-sharp.svg        |  1 -
 frontend/static/icons/dice-sharp.svg        |  1 -
 frontend/static/icons/eye-off-sharp.svg     |  1 -
 frontend/static/icons/eye-sharp.svg         |  1 -
 frontend/static/icons/lock-closed-sharp.svg |  1 -
 13 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/lib/icons/IconContrast.svelte
 create mode 100644 frontend/src/lib/icons/IconCopy.svelte
 create mode 100644 frontend/src/lib/icons/IconDice.svelte
 create mode 100644 frontend/src/lib/icons/IconEye.svelte
 create mode 100644 frontend/src/lib/icons/IconEyeOff.svelte
 delete mode 100644 frontend/static/icons/contrast-sharp.svg
 delete mode 100644 frontend/static/icons/copy-sharp.svg
 delete mode 100644 frontend/static/icons/dice-sharp.svg
 delete mode 100644 frontend/static/icons/eye-off-sharp.svg
 delete mode 100644 frontend/static/icons/eye-sharp.svg
 delete mode 100644 frontend/static/icons/lock-closed-sharp.svg

diff --git a/frontend/src/lib/icons/IconContrast.svelte b/frontend/src/lib/icons/IconContrast.svelte
new file mode 100644
index 0000000..a96c3dc
--- /dev/null
+++ b/frontend/src/lib/icons/IconContrast.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
+	><title>Contrast</title><path
+		d="M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z"
+	/></svg
+>
diff --git a/frontend/src/lib/icons/IconCopy.svelte b/frontend/src/lib/icons/IconCopy.svelte
new file mode 100644
index 0000000..0ea2b14
--- /dev/null
+++ b/frontend/src/lib/icons/IconCopy.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
+	><title>Copy</title><path
+		d="M456 480H136a24 24 0 01-24-24V128a16 16 0 0116-16h328a24 24 0 0124 24v320a24 24 0 01-24 24z"
+	/><path
+		d="M112 80h288V56a24 24 0 00-24-24H60a28 28 0 00-28 28v316a24 24 0 0024 24h24V112a32 32 0 0132-32z"
+	/></svg
+>
diff --git a/frontend/src/lib/icons/IconDice.svelte b/frontend/src/lib/icons/IconDice.svelte
new file mode 100644
index 0000000..108acc2
--- /dev/null
+++ b/frontend/src/lib/icons/IconDice.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
+	><title>Dice</title><path
+		d="M48 366.92L240 480V284L48 170zM192 288c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zm-96 32c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zM272 284v196l192-113.08V170zm48 140c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm32 77.64zM256 32L64 144l192 112 192-112zm0 120c-13.25 0-24-7.16-24-16s10.75-16 24-16 24 7.16 24 16-10.75 16-24 16z"
+	/></svg
+>
diff --git a/frontend/src/lib/icons/IconEye.svelte b/frontend/src/lib/icons/IconEye.svelte
new file mode 100644
index 0000000..dd1110e
--- /dev/null
+++ b/frontend/src/lib/icons/IconEye.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
+	><title>Eye</title><circle cx="256" cy="256" r="64" /><path
+		d="M394.82 141.18C351.1 111.2 304.31 96 255.76 96c-43.69 0-86.28 13-126.59 38.48C88.52 160.23 48.67 207 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416c49 0 95.85-15.07 139.3-44.79C433.31 345 469.71 299.82 496 256c-26.38-43.43-62.9-88.56-101.18-114.82zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z"
+	/></svg
+>
diff --git a/frontend/src/lib/icons/IconEyeOff.svelte b/frontend/src/lib/icons/IconEyeOff.svelte
new file mode 100644
index 0000000..a504988
--- /dev/null
+++ b/frontend/src/lib/icons/IconEyeOff.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
+	><title>Eye Off</title><path
+		d="M63.998 86.004l21.998-21.998L448 426.01l-21.998 21.998zM259.34 192.09l60.57 60.57a64.07 64.07 0 00-60.57-60.57zM252.66 319.91l-60.57-60.57a64.07 64.07 0 0060.57 60.57z"
+	/><path
+		d="M256 352a96 96 0 01-92.6-121.34l-69.07-69.08C66.12 187.42 39.24 221.14 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416A233.47 233.47 0 00335 402.2l-53.61-53.6A95.84 95.84 0 01256 352zM256 160a96 96 0 0192.6 121.34L419.26 352c29.15-26.25 56.07-61.56 76.74-96-26.38-43.43-62.9-88.56-101.18-114.82C351.1 111.2 304.31 96 255.76 96a222.92 222.92 0 00-78.21 14.29l53.11 53.11A95.84 95.84 0 01256 160z"
+	/></svg
+>
diff --git a/frontend/src/lib/ui/Icon.svelte b/frontend/src/lib/ui/Icon.svelte
index 1df7b68..cfad495 100644
--- a/frontend/src/lib/ui/Icon.svelte
+++ b/frontend/src/lib/ui/Icon.svelte
@@ -1,27 +1,30 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	export let icon: string = ''
-	export let href: string = ''
+<script lang="ts" context="module">
+	import IconContrast from '$lib/icons/IconContrast.svelte'
+	import IconCopy from '$lib/icons/IconCopy.svelte'
+	import IconDice from '$lib/icons/IconDice.svelte'
+	import IconEye from '$lib/icons/IconEye.svelte'
+	import IconEyeOff from '$lib/icons/IconEyeOff.svelte'
 
-	$: src = href || `/icons/${icon}.svg`
-
-	let html = null
-
-	onMount(async () => {
-		html = await fetch(src).then((res) => res.text())
-	})
+	const map = {
+		contrast: IconContrast,
+		copy: IconCopy,
+		dice: IconDice,
+		eye: IconEye,
+		'eye-off': IconEyeOff,
+	}
 </script>
 
-{#if html === null}
-	<img on:click {...$$restProps} {src} alt={icon} />
-{:else}
-	<div on:click {...$$restProps}>
-		{@html html}
-	</div>
-{/if}
+<script lang="ts">
+	export let icon: keyof typeof map
+</script>
+
+<div on:click {...$$restProps}>
+	{#if map[icon]}
+		<svelte:component this={map[icon]} />
+	{/if}
+</div>
 
 <style>
-	img,
 	div {
 		display: inline-block;
 		contain: strict;
diff --git a/frontend/src/lib/ui/ThemeToggle.svelte b/frontend/src/lib/ui/ThemeToggle.svelte
index 01028aa..74655f2 100644
--- a/frontend/src/lib/ui/ThemeToggle.svelte
+++ b/frontend/src/lib/ui/ThemeToggle.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <div on:click={change}>
-	<Icon class="icon" icon="contrast-sharp" />
+	<Icon class="icon" icon="contrast" />
 	{$theme}
 </div>
 
diff --git a/frontend/static/icons/contrast-sharp.svg b/frontend/static/icons/contrast-sharp.svg
deleted file mode 100644
index c6af5f6..0000000
--- a/frontend/static/icons/contrast-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Contrast</title><path d='M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z'/></svg>
\ No newline at end of file
diff --git a/frontend/static/icons/copy-sharp.svg b/frontend/static/icons/copy-sharp.svg
deleted file mode 100644
index 3328e2e..0000000
--- a/frontend/static/icons/copy-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Copy</title><path d='M456 480H136a24 24 0 01-24-24V128a16 16 0 0116-16h328a24 24 0 0124 24v320a24 24 0 01-24 24z'/><path d='M112 80h288V56a24 24 0 00-24-24H60a28 28 0 00-28 28v316a24 24 0 0024 24h24V112a32 32 0 0132-32z'/></svg>
\ No newline at end of file
diff --git a/frontend/static/icons/dice-sharp.svg b/frontend/static/icons/dice-sharp.svg
deleted file mode 100644
index 0866f86..0000000
--- a/frontend/static/icons/dice-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Dice</title><path d='M48 366.92L240 480V284L48 170zM192 288c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zm-96 32c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zM272 284v196l192-113.08V170zm48 140c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm32 77.64zM256 32L64 144l192 112 192-112zm0 120c-13.25 0-24-7.16-24-16s10.75-16 24-16 24 7.16 24 16-10.75 16-24 16z'/></svg>
\ No newline at end of file
diff --git a/frontend/static/icons/eye-off-sharp.svg b/frontend/static/icons/eye-off-sharp.svg
deleted file mode 100644
index c0487a4..0000000
--- a/frontend/static/icons/eye-off-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Eye Off</title><path d='M63.998 86.004l21.998-21.998L448 426.01l-21.998 21.998zM259.34 192.09l60.57 60.57a64.07 64.07 0 00-60.57-60.57zM252.66 319.91l-60.57-60.57a64.07 64.07 0 0060.57 60.57z'/><path d='M256 352a96 96 0 01-92.6-121.34l-69.07-69.08C66.12 187.42 39.24 221.14 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416A233.47 233.47 0 00335 402.2l-53.61-53.6A95.84 95.84 0 01256 352zM256 160a96 96 0 0192.6 121.34L419.26 352c29.15-26.25 56.07-61.56 76.74-96-26.38-43.43-62.9-88.56-101.18-114.82C351.1 111.2 304.31 96 255.76 96a222.92 222.92 0 00-78.21 14.29l53.11 53.11A95.84 95.84 0 01256 160z'/></svg>
\ No newline at end of file
diff --git a/frontend/static/icons/eye-sharp.svg b/frontend/static/icons/eye-sharp.svg
deleted file mode 100644
index b0cbb39..0000000
--- a/frontend/static/icons/eye-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Eye</title><circle cx='256' cy='256' r='64'/><path d='M394.82 141.18C351.1 111.2 304.31 96 255.76 96c-43.69 0-86.28 13-126.59 38.48C88.52 160.23 48.67 207 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416c49 0 95.85-15.07 139.3-44.79C433.31 345 469.71 299.82 496 256c-26.38-43.43-62.9-88.56-101.18-114.82zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z'/></svg>
\ No newline at end of file
diff --git a/frontend/static/icons/lock-closed-sharp.svg b/frontend/static/icons/lock-closed-sharp.svg
deleted file mode 100644
index e497811..0000000
--- a/frontend/static/icons/lock-closed-sharp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Lock Closed</title><path d='M420 192h-68v-80a96 96 0 10-192 0v80H92a12 12 0 00-12 12v280a12 12 0 0012 12h328a12 12 0 0012-12V204a12 12 0 00-12-12zm-106 0H198v-80.75a58 58 0 11116 0z'/></svg>
\ No newline at end of file