next: switch to lucide icons

exceptionless · Jan 11, 2025 · 1676d72 · 1676d72
1 parent cd4f479
commit 1676d72
Show file tree

Hide file tree

Showing 51 changed files with 188 additions and 195 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
@@ -3,8 +3,8 @@
     import ObjectDump from '$comp/object-dump.svelte';
     import { Code, H4 } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import IconArrowDown from '~icons/mdi/arrow-down';
-    import IconArrowUp from '~icons/mdi/arrow-up';
+    import ArrowDown from 'lucide-svelte/icons/arrow-down';
+    import ArrowUp from 'lucide-svelte/icons/arrow-up';
 
     interface Props {
         canPromote?: boolean;
@@ -70,11 +70,11 @@
             {#if canPromote}
                 {#if !isPromoted}
                     <Button onclick={async () => await promote(title)} size="icon" title="Promote to Tab"
-                        ><IconArrowUp /><span class="sr-only">Promote to Tab</span></Button
+                        ><ArrowUp /><span class="sr-only">Promote to Tab</span></Button
                     >
                 {:else}
                     <Button onclick={async () => await demote(title)} size="icon" title="Demote Tab"
-                        ><IconArrowDown /><span class="sr-only">Demote Tab</span></Button
+                        ><ArrowDown /><span class="sr-only">Demote Tab</span></Button
                     >
                 {/if}
             {/if}

diff --git a/...nless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte b/...nless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { EventSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -35,7 +35,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/...less.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte b/...less.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { EventSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -19,7 +19,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/...nless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte b/...nless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
     import { Badge } from '$comp/ui/badge';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -43,7 +43,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/...less.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte b/...less.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
     import { Badge } from '$comp/ui/badge';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -31,7 +31,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/...ientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte b/...ientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte
@@ -7,8 +7,8 @@
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { deleteEvent } from '$features/events/api.svelte';
     import { type Table as SvelteTable } from '@tanstack/svelte-table';
+    import ChevronDown from 'lucide-svelte/icons/chevron-down';
     import { toast } from 'svelte-sonner';
-    import ChevronDown from '~icons/mdi/chevron-down';
 
     import RemoveEventDialog from '../dialogs/remove-event-dialog.svelte';
 

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte
@@ -24,9 +24,9 @@
         getStackTrace,
         hasErrorOrSimpleError
     } from '$features/events/persistent-event';
-    import IconEmail from '~icons/mdi/email';
-    import IconFilter from '~icons/mdi/filter';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
+    import Filter from 'lucide-svelte/icons/filter';
+    import Email from 'lucide-svelte/icons/mail';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -198,7 +198,7 @@
                     {#each event.tags as tag (tag)}
                         <Badge color="dark"
                             ><ClickableStringFilter {changed} class="mr-1" term="tag" value={tag}
-                                ><IconFilter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
+                                ><Filter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
                             >{tag}</Badge
                         >
                     {/each}
@@ -213,7 +213,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -231,9 +231,7 @@
                     <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                         ><ClickableStringFilter {changed} term="user.email" value={userEmail} /></Table.Cell
                     >
-                    <Table.Cell class="flex items-center"
-                        >{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><IconEmail /></A></Table.Cell
-                    >
+                    <Table.Cell class="flex items-center">{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><Email /></A></Table.Cell>
                 </Table.Row>
             {/if}
             {#if userIdentity}

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte
@@ -6,7 +6,7 @@
     import { Button } from '$comp/ui/button';
     import * as Table from '$comp/ui/table';
     import { getRequestInfoPath, getRequestInfoUrl } from '$features/events/persistent-event';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -64,7 +64,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -88,7 +88,7 @@
                         size="sm"
                         target="_blank"
                         title="Open in new window"
-                        variant="ghost"><IconOpenInNew /></Button
+                        variant="ghost"><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
@@ -24,9 +24,9 @@
         getStackTrace,
         hasErrorOrSimpleError
     } from '$features/events/persistent-event';
-    import IconEmail from '~icons/mdi/email';
-    import IconFilter from '~icons/mdi/filter';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
+    import Filter from 'lucide-svelte/icons/filter';
+    import Email from 'lucide-svelte/icons/mail';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -198,7 +198,7 @@
                     {#each event.tags as tag (tag)}
                         <Badge color="dark"
                             ><ClickableStringFilter {changed} class="mr-1" term="tag" value={tag}
-                                ><IconFilter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
+                                ><Filter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
                             >{tag}</Badge
                         >
                     {/each}
@@ -213,7 +213,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -231,9 +231,7 @@
                     <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                         ><ClickableStringFilter {changed} term="user.email" value={userEmail} /></Table.Cell
                     >
-                    <Table.Cell class="flex items-center"
-                        >{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><IconEmail /></A></Table.Cell
-                    >
+                    <Table.Cell class="flex items-center">{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><Email /></A></Table.Cell>
                 </Table.Row>
             {/if}
             {#if userIdentity}

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte
@@ -6,7 +6,7 @@
     import { Button } from '$comp/ui/button';
     import * as Table from '$comp/ui/table';
     import { getRequestInfoPath, getRequestInfoUrl } from '$features/events/persistent-event';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -64,7 +64,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -88,7 +88,7 @@
                         size="sm"
                         target="_blank"
                         title="Open in new window"
-                        variant="ghost"><IconOpenInNew /></Button
+                        variant="ghost"><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>

diff --git a/...tionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte b/...tionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte
@@ -3,8 +3,8 @@
     import type { VariantProps } from 'tailwind-variants';
 
     import { Button, type ButtonProps, type buttonVariants } from '$comp/ui/button';
+    import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
     import { toast } from 'svelte-sonner';
-    import IconContentCopy from '~icons/mdi/content-copy';
 
     type Props = ButtonProps & {
         children?: Snippet;
@@ -29,7 +29,7 @@
         {#if children}
             {@render children()}
         {:else}
-            <IconContentCopy class="size-4" />
+            <ClipboardCopy class="size-4" />
         {/if}
     </Button>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { Button } from '$comp/ui/button';
     import * as ContextMenu from '$comp/ui/context-menu';
+    import Moon from 'lucide-svelte/icons/moon';
+    import Sun from 'lucide-svelte/icons/sun';
     import { setMode, toggleMode, userPrefersMode } from 'mode-watcher';
-    import IconMoonWaningCrescent from '~icons/mdi/moon-waning-crescent';
-    import IconWhiteBalanceSunny from '~icons/mdi/white-balance-sunny';
 
     function onUserThemePreferenceChange(mode?: string) {
         setMode(mode as 'dark' | 'light' | 'system');
@@ -13,8 +13,8 @@
 <ContextMenu.Root>
     <ContextMenu.Trigger>
         <Button onclick={toggleMode} size="icon" title="Toggle dark mode" variant="outline">
-            <IconWhiteBalanceSunny class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <IconMoonWaningCrescent class="absolute ml-1 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
         </Button>
     </ContextMenu.Trigger>

diff --git a/...b/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte b/...b/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte
@@ -9,10 +9,10 @@
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { cn } from '$lib/utils';
-    import IconArrowDownward from '~icons/mdi/arrow-downward';
-    import IconArrowUpward from '~icons/mdi/arrow-upward';
-    import IconEyeOff from '~icons/mdi/eye-off-outline';
-    import IconUnfoldMore from '~icons/mdi/unfold-more-horizontal';
+    import ArrowDown from 'lucide-svelte/icons/arrow-down';
+    import ArrowUp from 'lucide-svelte/icons/arrow-up';
+    import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
+    import EyeOff from 'lucide-svelte/icons/eye-off';
 
     type Props = HTMLAttributes<HTMLDivElement> & {
         column: Column<TData, unknown>;
@@ -31,25 +31,23 @@
                             {@render children()}
                         {/if}
                         {#if column.getIsSorted() === 'desc'}
-                            <IconArrowDownward />
+                            <ArrowDown />
                         {:else if column.getIsSorted() === 'asc'}
-                            <IconArrowUpward />
+                            <ArrowUp />
                         {:else}
-                            <IconUnfoldMore />
+                            <ChevronsUpDown />
                         {/if}
                     </Button>
                 {/snippet}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
-                <DropdownMenu.Item onclick={() => column.toggleSorting(false)}
-                    ><IconArrowUpward class="mr-2 size-3.5 text-muted-foreground/70" />Asc</DropdownMenu.Item
-                >
+                <DropdownMenu.Item onclick={() => column.toggleSorting(false)}><ArrowUp class="mr-2 size-3.5 text-muted-foreground/70" />Asc</DropdownMenu.Item>
                 <DropdownMenu.Item onclick={() => column.toggleSorting(true)}
-                    ><IconArrowDownward class="mr-2 size-3.5 text-muted-foreground/70" />Desc</DropdownMenu.Item
+                    ><ArrowDown class="mr-2 size-3.5 text-muted-foreground/70" />Desc</DropdownMenu.Item
                 >
                 <DropdownMenu.Separator />
                 <DropdownMenu.Item onclick={() => column.toggleVisibility(false)}
-                    ><IconEyeOff class="mr-2 size-3.5 text-muted-foreground/70" />Hide</DropdownMenu.Item
+                    ><EyeOff class="mr-2 size-3.5 text-muted-foreground/70" />Hide</DropdownMenu.Item
                 >
             </DropdownMenu.Content>
         </DropdownMenu.Root>

diff --git a/....Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte b/....Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
@@ -6,9 +6,9 @@
     import type { Table } from '@tanstack/svelte-table';
 
     import { Button } from '$comp/ui/button';
-    import IconChevronDoubleLeft from '~icons/mdi/chevron-double-left';
-    import IconChevronLeft from '~icons/mdi/chevron-left';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
+    import ChevronDoubleLeft from 'lucide-svelte/icons/chevrons-left';
 
     interface Props {
         table: Table<TData>;
@@ -21,15 +21,15 @@
     {#if table.getState().pagination.pageIndex > 1}
         <Button class="hidden size-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
             <span class="sr-only">Go to first page</span>
-            <IconChevronDoubleLeft class="size-4" />
+            <ChevronDoubleLeft class="size-4" />
         </Button>
     {/if}
     <Button class="size-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
         <span class="sr-only">Go to previous page</span>
-        <IconChevronLeft class="size-4" />
+        <ChevronLeft class="size-4" />
     </Button>
     <Button class="size-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
         <span class="sr-only">Go to next page</span>
-        <IconChevronRight class="size-4" />
+        <ChevronRight class="size-4" />
     </Button>
 </div>
diff --git a/...eb/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte b/...eb/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte
@@ -7,7 +7,7 @@
 
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
-    import IconViewColumn from '~icons/mdi/view-column';
+    import ViewColumn from 'lucide-svelte/icons/columns-3';
 
     interface Props {
         table: Table<TData>;
@@ -19,7 +19,7 @@
 <DropdownMenu.Root>
     <DropdownMenu.Trigger>
         <Button class="ml-auto hidden h-8 lg:flex" size="sm" variant="outline">
-            <IconViewColumn class="mr-2 size-4" />
+            <ViewColumn class="mr-2 size-4" />
             View
         </Button>
     </DropdownMenu.Trigger>