chore: update lucide-svelte & icon names

apps/www/package.json

@@ -86,7 +86,7 @@
 		"embla-carousel-autoplay": "8.0.0-rc19",
 		"embla-carousel-svelte": "8.0.0-rc19",
 		"formsnap": "^0.5.1",
-		"lucide-svelte": "^0.303.0",
+		"lucide-svelte": "^0.356.0",
 		"mode-watcher": "^0.2.2",
 		"nanoid": "^5.0.6",
 		"paneforge": "^0.0.2",

apps/www/src/content/components/data-table.md

@@ -442,7 +442,7 @@ We'll start by creating a new component called `data-table-actions.svelte` which
 
 ```svelte showLineNumbers title="routes/payments/data-table-actions.svelte"
 <script lang="ts">
-  import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
+  import Ellipsis from "lucide-svelte/icons/ellipsis";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
   import { Button } from "$lib/components/ui/button";
 
@@ -458,7 +458,7 @@ We'll start by creating a new component called `data-table-actions.svelte` which
       class="relative h-8 w-8 p-0"
     >
       <span class="sr-only">Open menu</span>
-      <MoreHorizontal class="h-4 w-4" />
+      <Ellipsis class="h-4 w-4" />
     </Button>
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>

apps/www/src/content/index.md

@@ -6,7 +6,7 @@ description: Re-usable components built with Bits UI, Melt UI, and Tailwind CSS.
 <script>
   import * as Accordion from '$lib/registry/new-york/ui/accordion';
   import { Callout } from '$lib/components/docs';
-  import AlertCircle from "lucide-svelte/icons/alert-circle";
+  import CircleAlert from "lucide-svelte/icons/circle-alert";
 </script>
 
 An unofficial, community-led [Svelte](https://svelte.dev) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a Svelte version of his work. This project was born out of the need for a similar project for the Svelte ecosystem.

apps/www/src/lib/components/docs/icons/index.ts

@@ -1,48 +1,48 @@
-import AlertTriangle from "lucide-svelte/icons/alert-triangle";
 import ArrowRight from "lucide-svelte/icons/arrow-right";
 import Check from "lucide-svelte/icons/check";
 import ChevronLeft from "lucide-svelte/icons/chevron-left";
 import ChevronRight from "lucide-svelte/icons/chevron-right";
+import CircleHelp from "lucide-svelte/icons/circle-help";
 import ClipboardCheck from "lucide-svelte/icons/clipboard-check";
 import Copy from "lucide-svelte/icons/copy";
 import CreditCard from "lucide-svelte/icons/credit-card";
+import EllipsisVertical from "lucide-svelte/icons/ellipsis";
 import File from "lucide-svelte/icons/file";
 import FileText from "lucide-svelte/icons/file-text";
-import HelpCircle from "lucide-svelte/icons/help-circle";
 import Image from "lucide-svelte/icons/image";
 import Laptop from "lucide-svelte/icons/laptop";
-import Loader2 from "lucide-svelte/icons/loader-2";
+import LoaderCircle from "lucide-svelte/icons/loader-circle";
 import Moon from "lucide-svelte/icons/moon";
-import MoreVertical from "lucide-svelte/icons/more-vertical";
 import Pizza from "lucide-svelte/icons/pizza";
 import Plus from "lucide-svelte/icons/plus";
 import Settings from "lucide-svelte/icons/settings";
 import SunMedium from "lucide-svelte/icons/sun-medium";
 import Trash from "lucide-svelte/icons/trash";
+import TriangleAlert from "lucide-svelte/icons/triangle-alert";
 import User from "lucide-svelte/icons/user";
 import X from "lucide-svelte/icons/x";
 
+import type { SvelteComponent } from "svelte";
 import Apple from "./apple.svelte";
 import Aria from "./aria.svelte";
 import GitHub from "./github.svelte";
 import Google from "./google.svelte";
+import Hamburger from "./hamburger.svelte";
 import Logo from "./logo.svelte";
 import Npm from "./npm.svelte";
 import PayPal from "./paypal.svelte";
 import Pnpm from "./pnpm.svelte";
 import RadixSvelte from "./radix-svelte.svelte";
 import Tailwind from "./tailwind.svelte";
-import Yarn from "./yarn.svelte";
 import Twitter from "./twitter.svelte";
-import Hamburger from "./hamburger.svelte";
-import type { SvelteComponent } from "svelte";
+import Yarn from "./yarn.svelte";
 
 export type Icon = SvelteComponent;
 
 export const Icons = {
 	logo: Logo,
 	close: X,
-	spinner: Loader2,
+	spinner: LoaderCircle,
 	chevronLeft: ChevronLeft,
 	chevronRight: ChevronRight,
 	trash: Trash,
@@ -51,12 +51,12 @@ export const Icons = {
 	media: Image,
 	settings: Settings,
 	billing: CreditCard,
-	ellipsis: MoreVertical,
+	ellipsis: EllipsisVertical,
 	add: Plus,
-	warning: AlertTriangle,
+	warning: TriangleAlert,
 	user: User,
 	arrowRight: ArrowRight,
-	help: HelpCircle,
+	help: CircleHelp,
 	pizza: Pizza,
 	twitter: Twitter,
 	check: Check,

apps/www/src/lib/registry/default/example/alert-destructive.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import AlertCircle from "lucide-svelte/icons/alert-circle";
 	import * as Alert from "$lib/registry/default/ui/alert/index.js";
+	import CircleAlert from "lucide-svelte/icons/circle-alert";
 </script>
 
 <Alert.Root variant="destructive">
-	<AlertCircle class="h-4 w-4" />
+	<CircleAlert class="h-4 w-4" />
 	<Alert.Title>Error</Alert.Title>
 	<Alert.Description>Your session has expired. Please login again.</Alert.Description>
 </Alert.Root>

apps/www/src/lib/registry/default/example/button-loading.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import Loader2 from "lucide-svelte/icons/loader-2";
 	import { Button } from "$lib/registry/default/ui/button/index.js";
+	import LoaderCircle from "lucide-svelte/icons/loader-circle";
 </script>
 
 <Button disabled>
-	<Loader2 class="mr-2 h-4 w-4 animate-spin" />
+	<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 	Please wait
 </Button>

apps/www/src/lib/registry/default/example/combobox-dropdown-menu.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+	import { Button } from "$lib/registry/default/ui/button/index.js";
+	import * as Command from "$lib/registry/default/ui/command/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
 	import Calendar from "lucide-svelte/icons/calendar";
-	import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
 	import Tags from "lucide-svelte/icons/tags";
 	import Trash from "lucide-svelte/icons/trash";
 	import User from "lucide-svelte/icons/user";
-	import * as Command from "$lib/registry/default/ui/command/index.js";
-	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
-	import { Button } from "$lib/registry/default/ui/button/index.js";
 	import { tick } from "svelte";
 
 	const labels = [
@@ -45,7 +45,7 @@
 	<DropdownMenu.Root bind:open let:ids>
 		<DropdownMenu.Trigger asChild let:builder>
 			<Button builders={[builder]} variant="ghost" size="sm" aria-label="Open menu">
-				<MoreHorizontal />
+				<Ellipsis />
 			</Button>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="w-[200px]" align="end">

apps/www/src/lib/registry/default/example/combobox-popover.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import ArrowUpCircle from "lucide-svelte/icons/arrow-up-circle";
-	import CheckCircle2 from "lucide-svelte/icons/check-circle-2";
-	import Circle from "lucide-svelte/icons/circle";
-	import HelpCircle from "lucide-svelte/icons/help-circle";
-	import XCircle from "lucide-svelte/icons/x-circle";
+	import { Button } from "$lib/registry/default/ui/button/index.js";
 	import * as Command from "$lib/registry/default/ui/command/index.js";
 	import * as Popover from "$lib/registry/default/ui/popover/index.js";
-	import { Button } from "$lib/registry/default/ui/button/index.js";
 	import { cn } from "$lib/utils.js";
+	import Circle from "lucide-svelte/icons/circle";
+	import CircleArrowUp from "lucide-svelte/icons/circle-arrow-up";
+	import CircleCheck from "lucide-svelte/icons/circle-check";
+	import CircleHelp from "lucide-svelte/icons/circle-help";
+	import CircleX from "lucide-svelte/icons/circle-x";
 	import { tick, type ComponentType } from "svelte";
 
 	type Status = {
@@ -20,7 +20,7 @@
 		{
 			value: "backlog",
 			label: "Backlog",
-			icon: HelpCircle,
+			icon: CircleHelp,
 		},
 		{
 			value: "todo",
@@ -30,17 +30,17 @@
 		{
 			value: "in progress",
 			label: "In Progress",
-			icon: ArrowUpCircle,
+			icon: CircleArrowUp,
 		},
 		{
 			value: "done",
 			label: "Done",
-			icon: CheckCircle2,
+			icon: CircleCheck,
 		},
 		{
 			value: "canceled",
 			label: "Canceled",
-			icon: XCircle,
+			icon: CircleX,
 		},
 	];
 

apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
 	import { Button } from "$lib/registry/default/ui/button/index.js";
-	import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
 
 	export let id: string;
 </script>
@@ -10,7 +10,7 @@
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button variant="ghost" builders={[builder]} size="icon" class="relative h-8 w-8 p-0">
 			<span class="sr-only">Open menu</span>
-			<MoreHorizontal class="h-4 w-4" />
+			<Ellipsis class="h-4 w-4" />
 		</Button>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>

apps/www/src/lib/registry/default/example/dropdown-menu-demo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CirclePlus from "lucide-svelte/icons/circle-plus";
 	import Cloud from "lucide-svelte/icons/cloud";
 	import CreditCard from "lucide-svelte/icons/credit-card";
 	import Github from "lucide-svelte/icons/github";
@@ -8,7 +9,6 @@
 	import Mail from "lucide-svelte/icons/mail";
 	import MessageSquare from "lucide-svelte/icons/message-square";
 	import Plus from "lucide-svelte/icons/plus";
-	import PlusCircle from "lucide-svelte/icons/plus-circle";
 	import Settings from "lucide-svelte/icons/settings";
 	import User from "lucide-svelte/icons/user";
 	import UserPlus from "lucide-svelte/icons/user-plus";
@@ -68,7 +68,7 @@
 						<span>Message</span>
 					</DropdownMenu.Item>
 					<DropdownMenu.Item>
-						<PlusCircle class="mr-2 h-4 w-4" />
+						<CirclePlus class="mr-2 h-4 w-4" />
 						<span>More...</span>
 					</DropdownMenu.Item>
 				</DropdownMenu.SubContent>

apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
 	import { cn } from "$lib/utils.js";
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 		el?: HTMLSpanElement;
@@ -19,6 +19,6 @@
 	class={cn("flex h-9 w-9 items-center justify-center", className)}
 	{...$$restProps}
 >
-	<MoreHorizontal class="h-4 w-4" />
+	<Ellipsis class="h-4 w-4" />
 	<span class="sr-only">More</span>
 </span>

apps/www/src/lib/registry/default/ui/pagination/pagination-ellipsis.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
 	import { cn } from "$lib/utils.js";
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
@@ -14,6 +14,6 @@
 	class={cn("flex h-9 w-9 items-center justify-center", className)}
 	{...$$restProps}
 >
-	<MoreHorizontal class="h-4 w-4" />
+	<Ellipsis class="h-4 w-4" />
 	<span class="sr-only">More pages</span>
 </span>

apps/www/src/routes/examples/mail/(components)/mail-display.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { getLocalTimeZone, DateFormatter, now, getDayOfWeek } from "@internationalized/date";
+	import { DateFormatter, getDayOfWeek, getLocalTimeZone, now } from "@internationalized/date";
 
-	import * as Icons from "../icons.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button, buttonVariants } from "$lib/registry/new-york/ui/button/index.js";
 	import { Calendar } from "$lib/registry/new-york/ui/calendar/index.js";
@@ -13,6 +12,7 @@
 	import { Textarea } from "$lib/registry/new-york/ui/textarea/index.js";
 	import * as Tooltip from "$lib/registry/new-york/ui/tooltip/index.js";
 	import type { Mail } from "../data.js";
+	import * as Icons from "../icons.js";
 
 	export let mail: Mail | null = null;
 
@@ -176,7 +176,7 @@
 				class={buttonVariants({ variant: "ghost", size: "icon" })}
 				disabled={!mail}
 			>
-				<Icons.MoreVertical class="size-4" />
+				<Icons.EllipsisVertical class="size-4" />
 				<span class="sr-only">More</span>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="end">

apps/www/src/routes/examples/mail/config.ts

@@ -1,7 +1,7 @@
 import * as Icons from "./icons.js";
 
-import type { ComponentType } from "svelte";
 import type { Icon } from "lucide-svelte";
+import type { ComponentType } from "svelte";
 
 export type Route = {
 	title: string;
@@ -59,7 +59,7 @@ export const secondaryRoutes: Route[] = [
 	{
 		title: "Updates",
 		label: "342",
-		icon: Icons.AlertCircle,
+		icon: Icons.CircleAlert,
 		variant: "ghost",
 	},
 	{

apps/www/src/routes/examples/mail/icons.ts

@@ -1,12 +1,12 @@
-export { default as AlertCircle } from "lucide-svelte/icons/alert-circle";
 export { default as Archive } from "lucide-svelte/icons/archive";
 export { default as ArchiveX } from "lucide-svelte/icons/archive-x";
+export { default as CircleAlert } from "lucide-svelte/icons/circle-alert";
 export { default as Clock } from "lucide-svelte/icons/clock";
+export { default as EllipsisVertical } from "lucide-svelte/icons/ellipsis-vertical";
 export { default as File } from "lucide-svelte/icons/file";
 export { default as Forward } from "lucide-svelte/icons/forward";
 export { default as Inbox } from "lucide-svelte/icons/inbox";
 export { default as MessagesSquare } from "lucide-svelte/icons/messages-square";
-export { default as MoreVertical } from "lucide-svelte/icons/more-vertical";
 export { default as Reply } from "lucide-svelte/icons/reply";
 export { default as ReplyAll } from "lucide-svelte/icons/reply-all";
 export { default as Send } from "lucide-svelte/icons/send";