Created svg files for all icons

src/lib/components/Message.svelte

@@ -4,6 +4,9 @@
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 
+    import branchIcon from '$lib/assets/controlIcons/branchIcon.svg?raw'
+    import trashIcon from '$lib/assets/controlIcons/trashIcon.svg?raw'
+
     let {
         value,
         ondelete,
@@ -37,29 +40,15 @@
                 href="{base}/#{value.id}"
                 title="Create a new thread"
             >
-                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-                    ><path
-                        d="M7.5 2a3.5 3.5 0 0 1 .99 6.86 5.5 5.5 0 0 0 5.26 3.89h.33a3.5 3.5 0 1 1 0 1.5h-.33a6.99 6.99 0 0 1-5.5-2.67v3.5a3.5 3.5 0 1 1-1.5 0V8.92A3.5 3.5 0 0 1 7.5 2zm0 14.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-10-8a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"
-                    /></svg
-                >
+                {@html branchIcon}
             </a>
         {/if}
         <button
             class="cursor-pointer w-4 h-4 stroke-current"
             onclick={() => ondelete(value)}
             title="Delete a note"
         >
-            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-                ><g
-                    fill="none"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    ><path
-                        d="M3 6h18M5 6v14c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V6M8 6V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2M14 11v6M10 11v6"
-                    /></g
-                ></svg
-            >
+            {@html trashIcon}
         </button>
     </div>
 </div>

src/lib/components/Note.svelte

@@ -1,6 +1,11 @@
 <script>
     import { base } from '$app/paths'
     import { messages } from '../index.svelte'
+
+    import moveIcon from '$lib/assets/controlIcons/moveIcon.svg?raw'
+    import copyIcon from '$lib/assets/controlIcons/copyIcon.svg?raw'
+    import linkIcon from '$lib/assets/controlIcons/linkIcon.svg?raw'
+
     let {
         posX,
         posY,
@@ -42,55 +47,26 @@
             top: {posY}px;
           "
 >
-    <button class="w-4 h-4 absolute right-2 top-2" onmousedown={onMouseDown}>
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-arrows-move"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill-rule="evenodd"
-                d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"
-            />
-        </svg>
+    <button
+        class="w-4 h-4 absolute right-2 top-2"
+        title="Drag & move"
+        onmousedown={onMouseDown}
+    >
+        {@html moveIcon}
     </button>
     <button
+        title="Copy message content"
         class="w-4 h-4 absolute left-2 top-2"
         onclick={() => copyToClipboard(messageContent)}
     >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-copy"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill-rule="evenodd"
-                d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
-            />
-        </svg>
+        {@html copyIcon}
     </button>
-    <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{messageId}">
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-link"
-            viewBox="0 0 16 16"
-        >
-            <path
-                d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9q-.13 0-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"
-            />
-            <path
-                d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6z"
-            />
-        </svg>
+    <a
+        title="Go to message"
+        class="w-4 h-4 absolute left-8 top-2"
+        href="{base}/#{messageId}"
+    >
+        {@html linkIcon}
     </a>
     <div class="flex w-full h-full justify-center">
         <div class="p-4 w-full break-all">{messageContent}</div>

src/lib/components/ThemeToggle.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
     import { browser } from '$app/environment'
 
+    import darkThemeIcon from '$lib/assets/themeIcons/darkThemeIcon.svg?raw'
+    import whiteThemeIcon from '$lib/assets/themeIcons/whiteThemeIcon.svg?raw'
+
     // TODO: Move dark state into a separate file
     let dark = $state(
         browser &&
@@ -16,25 +19,11 @@
 </script>
 
 <button onclick={() => (dark = !dark)}>
-    <svg
-        class="fill-current w-8 h-8"
-        class:hidden={dark}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-    >
-        <path
-            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-        />
-    </svg>
+    <div class:hidden={dark}>
+        {@html darkThemeIcon}
+    </div>
 
-    <svg
-        class="fill-current w-8 h-8"
-        class:hidden={!dark}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-    >
-        <path
-            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-        />
-    </svg>
+    <div class:hidden={!dark}>
+        {@html whiteThemeIcon}
+    </div>
 </button>

src/routes/+page.svelte

@@ -6,6 +6,8 @@
     import { browser } from '$app/environment'
     import { base } from '$app/paths'
 
+    import submitIcon from '$lib/assets/controlIcons/submitIcon.svg?raw'
+
     // if there is hash with a leaf note id, open it
     // if there is no hash, redirect to a last created note
 
@@ -107,20 +109,7 @@
                 class="w-full p-2 focus:outline-none focus:border-blue-500 bg-transparent"
             />
             <button class="px-4 py-2 rounded-md ml-2" type="submit">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 fill-current"
-                    viewBox="0 0 64 64"
-                    ><defs
-                        ><clipPath id="a"
-                            ><rect width="64" height="64"></rect></clipPath
-                        ></defs
-                    ><g clip-path="url(#a)"
-                        ><path
-                            d="M 8.216 36.338 L 26.885 32.604 C 28.552 32.271 28.552 31.729 26.885 31.396 L 8.216 27.662 C 7.104 27.44 6.021 26.356 5.799 25.245 L 2.065 6.576 C 1.731 4.908 2.714 4.133 4.259 4.846 L 61.228 31.139 C 62.257 31.614 62.257 32.386 61.228 32.861 L 4.259 59.154 C 2.714 59.867 1.731 59.092 2.065 57.424 L 5.799 38.755 C 6.021 37.644 7.104 36.56 8.216 36.338 Z "
-                        ></path></g
-                    ></svg
-                >
+                {@html submitIcon}
             </button>
         </form>
     </footer>