add live statistics

src/components/admin/table/DataTable.svelte

@@ -2,7 +2,6 @@
   import type { Writable } from 'svelte/store';
   import SortableTr from '@components/admin/table/SortableTr.svelte';
   import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import Icon from '@iconify/svelte';
   import type { Snippet } from 'svelte';
   import { getObjectEntryByKey } from '@util/objects.ts';
 
@@ -64,12 +63,12 @@
             <td>
               {#if onEdit}
                 <button class="cursor-pointer" onclick={() => onEdit(d)}>
-                  <Icon icon="heroicons:pencil-square" />
+                  <span class="iconify iconify-[heroicons--pencil-square]"></span>
                 </button>
               {/if}
               {#if onDelete}
                 <button class="cursor-pointer" onclick={() => onDelete(d)}>
-                  <Icon icon="heroicons:trash" />
+                  <span class="iconify iconify-[heroicons--trash]"></span>
                 </button>
               {/if}
             </td>

src/components/admin/table/SortableTh.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getContext, type Snippet } from 'svelte';
   import type { Writable } from 'svelte/store';
-  import Icon from '@iconify/svelte';
 
   // types
   interface Props {
@@ -37,9 +36,9 @@
     <button class="flex items-center gap-1" onclick={() => onButtonClick()}>
       <span>{@render children?.()}</span>
       {#if $headerKey === key && asc}
-        <Icon icon="heroicons:chevron-up-16-solid" />
+        <span class="iconify iconify-[heroicons--chevron-up-16-solid]"></span>
       {:else}
-        <Icon icon="heroicons:chevron-down-16-solid" />
+        <span class="iconify iconify-[heroicons--chevron-down-16-solid]"></span>
       {/if}
     </button>
   {:else}