Convert icons to components

Co-authored-by: Jess Martin <jessmartin@gmail.com>

src/components/auth/Register.svelte

@@ -9,6 +9,8 @@
   } from '$lib/common/webnative'
   import { sessionStore } from '../../stores'
   import type { Session } from '$lib/session'
+  import CheckIcon from '$components/icons/CheckIcon.svelte'
+  import XIcon from '$components/icons/XIcon.svelte'
 
   let username: string = ''
   let usernameValid = true
@@ -18,9 +20,6 @@
 
   let unsubscribeSessionStore: () => void = () => {}
 
-  let checkIcon = `<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2071 0.292893C14.5976 0.683417 14.5976 1.31658 14.2071 1.70711L6.20711 9.70711C5.81658 10.0976 5.18342 10.0976 4.79289 9.70711L0.792893 5.70711C0.402369 5.31658 0.402369 4.68342 0.792893 4.29289C1.18342 3.90237 1.81658 3.90237 2.20711 4.29289L5.5 7.58579L12.7929 0.292893C13.1834 -0.0976311 13.8166 -0.0976311 14.2071 0.292893Z" fill="#16A34A"/> </svg> `
-  let xIcon = `<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.792893 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L6.5 4.58579L10.7929 0.292893C11.1834 -0.0976311 11.8166 -0.0976311 12.2071 0.292893C12.5976 0.683417 12.5976 1.31658 12.2071 1.70711L7.91421 6L12.2071 10.2929C12.5976 10.6834 12.5976 11.3166 12.2071 11.7071C11.8166 12.0976 11.1834 12.0976 10.7929 11.7071L6.5 7.41421L2.20711 11.7071C1.81658 12.0976 1.18342 12.0976 0.792893 11.7071C0.402369 11.3166 0.402369 10.6834 0.792893 10.2929L5.08579 6L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z" fill="#DC2626"/> </svg>`
-
   onMount(() => {
     unsubscribeSessionStore = sessionStore.subscribe((session: Session) => {
       if (session.authed) {
@@ -86,12 +85,12 @@
         {/if}
         {#if !(username.length === 0) && usernameAvailable && usernameValid && !checkingUsername}
           <span class="w-4 h-4 block absolute top-4 right-4">
-            {@html checkIcon}
+            <CheckIcon />
           </span>
         {/if}
         {#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
           <span class="w-4 h-4 block absolute top-4 right-4">
-            {@html xIcon}
+            <XIcon />
           </span>
         {/if}
       </div>

src/components/icons/CheckIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+  width="15"
+  height="10"
+  viewBox="0 0 15 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.2071 0.292893C14.5976 0.683417 14.5976 1.31658 14.2071 1.70711L6.20711 9.70711C5.81658 10.0976 5.18342 10.0976 4.79289 9.70711L0.792893 5.70711C0.402369 5.31658 0.402369 4.68342 0.792893 4.29289C1.18342 3.90237 1.81658 3.90237 2.20711 4.29289L5.5 7.58579L12.7929 0.292893C13.1834 -0.0976311 13.8166 -0.0976311 14.2071 0.292893Z"
+    fill="#16A34A"
+  />
+</svg>

src/components/icons/XIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+  width="13"
+  height="12"
+  viewBox="0 0 13 12"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.792893 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L6.5 4.58579L10.7929 0.292893C11.1834 -0.0976311 11.8166 -0.0976311 12.2071 0.292893C12.5976 0.683417 12.5976 1.31658 12.2071 1.70711L7.91421 6L12.2071 10.2929C12.5976 10.6834 12.5976 11.3166 12.2071 11.7071C11.8166 12.0976 11.1834 12.0976 10.7929 11.7071L6.5 7.41421L2.20711 11.7071C1.81658 12.0976 1.18342 12.0976 0.792893 11.7071C0.402369 11.3166 0.402369 10.6834 0.792893 10.2929L5.08579 6L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z"
+    fill="#DC2626"
+  />
+</svg>