treewide: replace unplugin-icons with lucide-svelte

Migrate from unplugin-icons to @lucide/svelte for simpler icon handling.
Removes vite plugin dependency and improves tree-shaking with deep imports.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: aster-void

apps/desktop/package.json

@@ -35,7 +35,6 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.8",
-    "@iconify-json/mdi": "^1.2.3",
     "@lezer/highlight": "^1.2.3",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tauri-apps/api": "^2.9.1",
@@ -46,7 +45,7 @@
     "emoji-picker-element": "^1.28.0",
     "robot3": "^1.2.0",
     "runed": "^0.37.0",
-    "unplugin-icons": "^22.5.0",
+    "@lucide/svelte": "^0.561.0",
     "valibot": "^1.2.0"
   }
 }

apps/desktop/src/components/app/OrganizationSidebar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { Organization } from "@apps/api-client";
+  import ArrowLeftRight from "@lucide/svelte/icons/arrow-left-right";
+  import Settings from "@lucide/svelte/icons/settings";
   import type { Snippet } from "svelte";
-  import MdiCog from "~icons/mdi/cog";
-  import MdiSwapHorizontal from "~icons/mdi/swap-horizontal";
 
   interface Props {
     organization: Organization | undefined;
@@ -29,14 +29,14 @@
         class="btn btn-ghost btn-sm btn-square hover-highlight"
         title="組織設定"
       >
-        <MdiCog class="text-muted h-4 w-4" />
+        <Settings class="text-muted size-4" />
       </a>
       <a
         href="/"
         class="btn btn-ghost btn-sm btn-square hover-highlight"
         title="組織を切り替え"
       >
-        <MdiSwapHorizontal class="text-muted h-4 w-4" />
+        <ArrowLeftRight class="text-muted size-4" />
       </a>
     </div>
   </header>

apps/desktop/src/components/channels/Channel.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { Channel as ChannelType, Message } from "@apps/api-client";
+  import Hash from "@lucide/svelte/icons/hash";
+  import Search from "@lucide/svelte/icons/search";
   import { onMount } from "svelte";
   import {
     getApiClient,
     getChannel,
     unwrapResponse,
     useQuery,
   } from "@/lib/api.svelte";
-  import MdiMagnify from "~icons/mdi/magnify";
-  import MdiPound from "~icons/mdi/pound";
   import MessageInput from "../chat/MessageInput.svelte";
   import MessageList from "../chat/MessageList.svelte";
   import type { SearchResult } from "../chat/messageSearch.svelte.ts";
@@ -85,7 +85,7 @@
     class="border-subtle flex items-center justify-between border-b px-6 py-4"
   >
     <div class="flex items-center gap-3">
-      <MdiPound class="h-5 w-5 opacity-50" />
+      <Hash class="size-5 opacity-50" />
       <h1 class="text-base font-semibold">
         {selectedChannel.data?.name ?? "..."}
       </h1>
@@ -120,8 +120,8 @@
         title="検索"
         onclick={() => (showSearch = !showSearch)}
       >
-        <MdiMagnify
-          class="h-5 w-5 opacity-50 transition-opacity duration-150 hover:opacity-80"
+        <Search
+          class="size-5 opacity-50 transition-opacity duration-150 hover:opacity-80"
         />
       </button>
     </div>

apps/desktop/src/components/channels/ChannelList.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import type { Channel } from "@apps/api-client";
+  import Hash from "@lucide/svelte/icons/hash";
+  import Plus from "@lucide/svelte/icons/plus";
+  import User from "@lucide/svelte/icons/user";
   import { onMount } from "svelte";
   import { getApiClient, unwrapResponse, useQuery } from "@/lib/api.svelte";
   import { UnreadManager } from "@/lib/unread.svelte";
   import { useWebSocket } from "@/lib/websocket";
   import type { Selection } from "$components/chat/types";
   import DMList from "$components/dms/DMList.svelte";
   import UserSearch from "$components/dms/UserSearch.svelte";
-  import MdiAccount from "~icons/mdi/account";
-  import MdiPlus from "~icons/mdi/plus";
-  import MdiPound from "~icons/mdi/pound";
   import CreateChannelButton from "./CreateChannelButton.svelte";
 
   const api = getApiClient();
@@ -65,9 +65,9 @@
                 : "text-base-content/80 hover:bg-base-300 hover:text-base-content",
             ]}
           >
-            <MdiPound
+            <Hash
               class={[
-                "h-4 w-4 flex-shrink-0",
+                "size-4 flex-shrink-0",
                 active ? "text-primary" : "text-muted",
               ]}
             />
@@ -108,7 +108,7 @@
         title="新しいDM"
         onclick={() => (showUserSearch = !showUserSearch)}
       >
-        <MdiPlus class="text-muted h-4 w-4" />
+        <Plus class="text-muted size-4" />
       </button>
     </header>
 
@@ -134,7 +134,7 @@
       href={`/orgs/${organizationId}/personalization`}
       class="text-muted hover:bg-base-300 hover:text-base-content flex items-center gap-2 rounded px-2 py-1.5 text-sm transition-colors"
     >
-      <MdiAccount class="h-4 w-4" />
+      <User class="size-4" />
       <span>個人設定</span>
     </a>
   </footer>

apps/desktop/src/components/channels/CreateChannelButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import Plus from "@lucide/svelte/icons/plus";
   import { getApiClient, unwrapResponse } from "@/lib/api.svelte";
   import Modal, { ModalManager } from "@/lib/modal/modal.svelte";
-  import MdiPlus from "~icons/mdi/plus";
 
   const api = getApiClient();
 
@@ -47,7 +47,7 @@
     modalManager.dispatch(createChannelModalContent);
   }}
 >
-  <MdiPlus class="text-muted h-4 w-4" />
+  <Plus class="text-muted size-4" />
 </button>
 
 {#snippet createChannelModalContent()}

apps/desktop/src/components/chat/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Message } from "@apps/api-client";
+  import X from "@lucide/svelte/icons/x";
   import FileSelector from "@/features/files/upload/Selector.svelte";
-  import MdiClose from "~icons/mdi/close";
   import EmojiButton from "./EmojiButton.svelte";
   import EmojiPalette from "./EmojiPalette.svelte";
   import FileAttachmentPreview from "./FileAttachmentPreview.svelte";
@@ -41,7 +41,7 @@
         class="btn btn-ghost btn-xs btn-square"
         onclick={() => (replyingTo = null)}
       >
-        <MdiClose class="h-4 w-4" />
+        <X class="size-4" />
       </button>
     </div>
   {/if}

apps/desktop/src/components/chat/MessageItem.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { Message } from "@apps/api-client";
-  import MdiDotsVertical from "~icons/mdi/dots-vertical";
-  import MdiPin from "~icons/mdi/pin";
-  import MdiReply from "~icons/mdi/reply";
+  import EllipsisVertical from "@lucide/svelte/icons/ellipsis-vertical";
+  import Pin from "@lucide/svelte/icons/pin";
+  import Reply from "@lucide/svelte/icons/reply";
   import FileAttachment from "../../features/files/view/FileAttachment.svelte";
   import ReactionButtons from "./ReactionButtons.svelte";
   import VoteViewer from "./VoteViewer.svelte";
@@ -54,7 +54,7 @@
     <div
       class="mb-2 flex items-center gap-1.5 text-xs opacity-60 transition-opacity duration-150 group-hover:opacity-80"
     >
-      <MdiReply class="h-3 w-3" />
+      <Reply class="size-3" />
       <span class="text-primary/80 font-medium">{parentMessage.author}</span>
       <span class="truncate">{parentMessage.content}</span>
     </div>
@@ -75,7 +75,7 @@
     {/if}
     {#if message.pinnedAt}
       <span class="text-warning flex items-center gap-1 text-xs opacity-70">
-        <MdiPin class="h-3 w-3" />
+        <Pin class="size-3" />
         ピン留め
       </span>
     {/if}
@@ -137,7 +137,7 @@
       onclick={onDotsClick}
       title="メニュー"
     >
-      <MdiDotsVertical class="h-4 w-4 opacity-60" />
+      <EllipsisVertical class="size-4 opacity-60" />
     </button>
   </div>
 </article>

apps/desktop/src/components/chat/MessageTextarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Attachment from "@/icons/attachment.svelte";
+  import Paperclip from "@lucide/svelte/icons/paperclip";
 
   interface Props {
     value: string;
@@ -41,7 +41,7 @@
       title="ファイルを添付"
       type="button"
     >
-      <Attachment />
+      <Paperclip class="size-4" />
       {showFileSelector ? "キャンセル" : "ファイル添付"}
     </button>
     <button

apps/desktop/src/components/chat/PinnedMessages.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Message } from "@apps/api-client";
-  import MdiPin from "@/icons/mdi-pin.svelte";
+  import Pin from "@lucide/svelte/icons/pin";
   import { getApiClient, unwrapResponse, useQuery } from "@/lib/api.svelte";
   import { useWebSocket } from "@/lib/websocket";
 
@@ -63,7 +63,7 @@
 {#if messages.length > 0}
   <div class="bg-base-200 border-b p-2">
     <div class="text-warning mb-2 flex items-center gap-2">
-      <MdiPin class="h-4 w-4" />
+      <Pin class="size-4" />
       <span class="text-sm font-semibold">ピン留めされたメッセージ</span>
     </div>
     <div class="space-y-1">

apps/desktop/src/components/chat/ReplyBanner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Message } from "@apps/api-client";
-  import MdiClose from "@/icons/mdi-close.svelte";
+  import X from "@lucide/svelte/icons/x";
 
   interface Props {
     replyingTo: Message;
@@ -23,6 +23,6 @@
     <span class="truncate">: {replyingTo.content}</span>
   </div>
   <button class="btn btn-ghost btn-circle btn-sm" onclick={onclose}>
-    <MdiClose />
+    <X class="size-4" />
   </button>
 </div>