continue readding icons and accidentally learn mount while doing so

ehanahamed · Feb 3, 2025 · 60901e2 · 60901e2
1 parent 243ab73
commit 60901e2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/web/src/lib/icons/EyeSlash.svelte b/web/src/lib/icons/EyeSlash.svelte
@@ -0,0 +1,4 @@
+<script>
+    let { width = "1rem", height = "1rem", ...props } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 640 512" class={props.class}><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-105.2-82.4c39.6-40.6 66.4-86.1 79.9-118.4 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7 0-70.7-57.3-128-128-128-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zm205.1 160.8-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3 0-5.5-.7-10.9-2-16h2c44.2 0 80 35.8 80 80 0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8l-37.7-29.7c-22.8 29.7-39.1 59.3-48.6 82.2-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47 43.8 111.7 80.6 192.5 80.6 47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128 13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z" fill="currentcolor"/></svg>
diff --git a/web/src/lib/icons/Trash.svelte b/web/src/lib/icons/Trash.svelte
@@ -0,0 +1,4 @@
+<script>
+    let { width = "1rem", height = "1rem", ...props } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 448 512" class={props.class}><path d="m170.5 51.6-19 28.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6 36.7 55H424c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128h-8c-13.3 0-24-10.7-24-24s10.7-24 24-24h69.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128v304c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V128H80zm80 64v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z" fill="currentcolor"/></svg>
diff --git a/web/src/routes/Edit.svelte b/web/src/routes/Edit.svelte
@@ -1,12 +1,13 @@
 <script>
     import Noscript from "$lib/components/Noscript.svelte";
-    import { onMount } from "svelte";
+    import { onMount, mount } from "svelte";
     import { openIndexedDB } from "$lib/indexedDB";
     import { goto } from "$app/navigation";
     let { data } = $props();
 
     import IconLocal from "$lib/icons/Local.svelte";
     import IconCheckmark from "$lib/icons/Checkmark.svelte";
+    import IconTrash from "$lib/icons/Trash.svelte";
 
     onMount(function () {
       var editTermsTable = {
@@ -29,9 +30,13 @@
           "  <div class='content'>" +
           "    <button><i class='nf nf-cod-arrow_up'></i> Move Up </button>" +
           "    <button><i class='nf nf-cod-arrow_down'></i> Move Down </button>" +
-          "    <button class='ohno'><i class='nf nf-fa-trash_o'></i> Delete </button>" +
+          "    <button class='ohno'></button>" +
           "  </div>" +
           "</div></div>";
+        mount(IconTrash, {
+          target: actions.children[0].children[0].children[1].children[2]
+        })
+        actions.children[0].children[0].children[1].children[2].innerHTML += " Delete"
         actions.children[0].children[0].children[1].children[0].addEventListener("click", function (event) {
           editTermsTable.move(
             event.target.parentElement.parentElement

diff --git a/web/src/routes/StudysetPage.svelte b/web/src/routes/StudysetPage.svelte
@@ -7,6 +7,7 @@
 
     import IconLocal from "$lib/icons/Local.svelte";
     import IconPencil from "$lib/icons/Pencil.svelte";
+    import IconEyeSlash from "$lib/icons/EyeSlash.svelte";
 
     onMount(function () {
         if (data.local) {
@@ -168,7 +169,7 @@
         </p>
         {:else if data?.studyset?.private}
         <p class="fg0">
-          <i class="nf nf-fa-eye_slash"></i> Private Studyset
+          <IconEyeSlash /> Private Studyset
         </p>
         {:else if data?.studyset?.user_display_name}
         <!--<p>