feat(ui): add @ant-design/icons

ui/src/pages/ConsoleLayout.tsx

@@ -3,17 +3,17 @@ import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-d
 import { useTranslation } from "react-i18next";
 import { Button, Drawer, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd";
 import {
-  Languages as LanguagesIcon,
-  LogOut as LogOutIcon,
-  Home as HomeIcon,
-  Menu as MenuIcon,
-  Moon as MoonIcon,
-  Server as ServerIcon,
-  Settings as SettingsIcon,
-  ShieldCheck as ShieldCheckIcon,
-  Sun as SunIcon,
-  Workflow as WorkflowIcon,
-} from "lucide-react";
+  CloudServerOutlined as CloudServerOutlinedIcon,
+  GlobalOutlined as GlobalOutlinedIcon,
+  HomeOutlined as HomeOutlinedIcon,
+  LogoutOutlined as LogoutOutlinedIcon,
+  MenuOutlined as MenuOutlinedIcon,
+  MoonOutlined as MoonOutlinedIcon,
+  NodeIndexOutlined as NodeIndexOutlinedIcon,
+  SafetyOutlined as SafetyOutlinedIcon,
+  SettingOutlined as SettingOutlinedIcon,
+  SunOutlined as SunOutlinedIcon,
+} from "@ant-design/icons";
 
 import Version from "@/components/core/Version";
 import { useBrowserTheme } from "@/hooks";
@@ -67,7 +67,7 @@ const ConsoleLayout = () => {
         <Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[19] shadow-sm" style={{ background: themeToken.colorBgContainer }}>
           <div className="flex items-center justify-between size-full px-4 overflow-hidden">
             <div className="flex items-center gap-4 size-full">
-              <Button className="md:hidden" icon={<MenuIcon />} size="large" onClick={handleSiderOpen} />
+              <Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
               <Drawer
                 closable={false}
                 destroyOnClose
@@ -90,10 +90,10 @@ const ConsoleLayout = () => {
                 <LocaleToggleButton size="large" />
               </Tooltip>
               <Tooltip title={t("common.menu.settings")} mouseEnterDelay={2}>
-                <Button icon={<SettingsIcon size={18} />} size="large" onClick={handleSettingsClick} />
+                <Button icon={<SettingOutlinedIcon />} size="large" onClick={handleSettingsClick} />
               </Tooltip>
               <Tooltip title={t("common.menu.logout")} mouseEnterDelay={2}>
-                <Button danger icon={<LogOutIcon size={18} />} size="large" onClick={handleLogoutClick} />
+                <Button danger icon={<LogoutOutlinedIcon />} size="large" onClick={handleLogoutClick} />
               </Tooltip>
             </div>
           </div>
@@ -118,10 +118,10 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
   const MENU_KEY_CERTIFICATES = "/certificates";
   const MENU_KEY_ACCESSES = "/accesses";
   const menuItems: Required<MenuProps>["items"] = [
-    [MENU_KEY_HOME, <HomeIcon size={16} />, t("dashboard.page.title")],
-    [MENU_KEY_WORKFLOWS, <WorkflowIcon size={16} />, t("workflow.page.title")],
-    [MENU_KEY_CERTIFICATES, <ShieldCheckIcon size={16} />, t("certificate.page.title")],
-    [MENU_KEY_ACCESSES, <ServerIcon size={16} />, t("access.page.title")],
+    [MENU_KEY_HOME, <HomeOutlinedIcon />, t("dashboard.page.title")],
+    [MENU_KEY_WORKFLOWS, <NodeIndexOutlinedIcon />, t("workflow.page.title")],
+    [MENU_KEY_CERTIFICATES, <SafetyOutlinedIcon />, t("certificate.page.title")],
+    [MENU_KEY_ACCESSES, <CloudServerOutlinedIcon />, t("access.page.title")],
   ].map(([key, icon, label]) => {
     return {
       key: key as string,
@@ -201,7 +201,7 @@ const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button icon={theme === "dark" ? <MoonIcon size={18} /> : <SunIcon size={18} />} size={size} />
+      <Button icon={theme === "dark" ? <MoonOutlinedIcon /> : <SunOutlinedIcon />} size={size} />
     </Dropdown>
   );
 });
@@ -219,7 +219,7 @@ const LocaleToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button icon={<LanguagesIcon size={18} />} size={size} />
+      <Button icon={<GlobalOutlinedIcon />} size={size} />
     </Dropdown>
   );
 });

ui/src/pages/accesses/AccessList.tsx

@@ -3,7 +3,12 @@ import { useTranslation } from "react-i18next";
 import { useRequest } from "ahooks";
 import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import {
+  DeleteOutlined as DeleteOutlinedIcon,
+  EditOutlined as EditOutlinedIcon,
+  PlusOutlined as PlusOutlinedIcon,
+  SnippetsOutlined as SnippetsOutlinedIcon,
+} from "@ant-design/icons";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
@@ -75,7 +80,7 @@ const AccessList = () => {
             preset="edit"
             trigger={
               <Tooltip title={t("access.action.edit")}>
-                <Button color="primary" icon={<PencilIcon size={16} />} variant="text" />
+                <Button color="primary" icon={<EditOutlinedIcon />} variant="text" />
               </Tooltip>
             }
           />
@@ -85,7 +90,7 @@ const AccessList = () => {
             preset="add"
             trigger={
               <Tooltip title={t("access.action.copy")}>
-                <Button color="primary" icon={<CopyIcon size={16} />} variant="text" />
+                <Button color="primary" icon={<SnippetsOutlinedIcon />} variant="text" />
               </Tooltip>
             }
           />
@@ -93,7 +98,7 @@ const AccessList = () => {
           <Tooltip title={t("access.action.delete")}>
             <Button
               color="danger"
-              icon={<Trash2Icon size={16} />}
+              icon={<DeleteOutlinedIcon />}
               variant="text"
               onClick={() => {
                 handleDeleteClick(record);
@@ -168,7 +173,7 @@ const AccessList = () => {
             key="create"
             preset="add"
             trigger={
-              <Button type="primary" icon={<PlusIcon size={16} />}>
+              <Button type="primary" icon={<PlusOutlinedIcon />}>
                 {t("access.action.add")}
               </Button>
             }

ui/src/pages/certificates/CertificateList.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useRequest } from "ahooks";
 import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { Eye as EyeIcon, Filter as FilterIcon, Trash2 as Trash2Icon } from "lucide-react";
+import { DeleteOutlined as DeleteOutlinedIcon, SelectOutlined as SelectOutlinedIcon } from "@ant-design/icons";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
@@ -88,7 +88,6 @@ const CertificateList = () => {
           </div>
         );
       },
-      filterIcon: () => <FilterIcon size={14} />,
       render: (_, record) => {
         const total = dayjs(record.expireAt).diff(dayjs(record.created), "d") + 1;
         const left = dayjs(record.expireAt).diff(dayjs(), "d");
@@ -158,7 +157,7 @@ const CertificateList = () => {
             data={record}
             trigger={
               <Tooltip title={t("certificate.action.view")}>
-                <Button color="primary" icon={<EyeIcon size={16} />} variant="text" />
+                <Button color="primary" icon={<SelectOutlinedIcon />} variant="text" />
               </Tooltip>
             }
           />
@@ -166,7 +165,7 @@ const CertificateList = () => {
           <Tooltip title={t("certificate.action.delete")}>
             <Button
               color="danger"
-              icon={<Trash2Icon size={16} />}
+              icon={<DeleteOutlinedIcon />}
               variant="text"
               onClick={() => {
                 alert("TODO");

ui/src/pages/settings/Settings.tsx

@@ -3,7 +3,12 @@ import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Card, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { KeyRound as KeyRoundIcon, Megaphone as MegaphoneIcon, ShieldCheck as ShieldCheckIcon, UserRound as UserRoundIcon } from "lucide-react";
+import {
+  ApiOutlined as ApiOutlinedIcon,
+  LockOutlined as LockOutlinedIcon,
+  SendOutlined as SendOutlinedIcon,
+  UserOutlined as UserOutlinedIcon,
+} from "@ant-design/icons";
 
 const Settings = () => {
   const location = useLocation();
@@ -32,7 +37,7 @@ const Settings = () => {
             key: "account",
             label: (
               <Space>
-                <UserRoundIcon size={14} />
+                <UserOutlinedIcon />
                 <label>{t("settings.account.tab")}</label>
               </Space>
             ),
@@ -41,7 +46,7 @@ const Settings = () => {
             key: "password",
             label: (
               <Space>
-                <KeyRoundIcon size={14} />
+                <LockOutlinedIcon />
                 <label>{t("settings.password.tab")}</label>
               </Space>
             ),
@@ -50,7 +55,7 @@ const Settings = () => {
             key: "notification",
             label: (
               <Space>
-                <MegaphoneIcon size={14} />
+                <SendOutlinedIcon />
                 <label>{t("settings.notification.tab")}</label>
               </Space>
             ),
@@ -59,7 +64,7 @@ const Settings = () => {
             key: "ssl-provider",
             label: (
               <Space>
-                <ShieldCheckIcon size={14} />
+                <ApiOutlinedIcon />
                 <label>{t("settings.sslprovider.tab")}</label>
               </Space>
             ),

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { PageHeader } from "@ant-design/pro-components";
+import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
 import { z } from "zod";
-import { Ellipsis as EllipsisIcon, Trash2 as Trash2Icon } from "lucide-react";
 
 import Show from "@/components/Show";
 import End from "@/components/workflow/End";
@@ -136,7 +136,7 @@ const WorkflowDetail = () => {
                       key: "delete",
                       label: t("common.button.delete"),
                       danger: true,
-                      icon: <Trash2Icon size={14} />,
+                      icon: <DeleteOutlinedIcon />,
                       onClick: () => {
                         handleDeleteClick();
                       },
@@ -145,7 +145,7 @@ const WorkflowDetail = () => {
                 }}
                 trigger={["click"]}
               >
-                <Button icon={<EllipsisIcon size={14} />} />
+                <Button icon={<EllipsisOutlinedIcon />} />
               </Dropdown>
             </Button.Group>,
           ]}

ui/src/pages/workflows/WorkflowList.tsx

@@ -21,7 +21,7 @@ import {
   type TableProps,
 } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
-import { Filter as FilterIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import { DeleteOutlined as DeleteOutlinedIcon, EditOutlined as EditOutlinedIcon, PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
@@ -133,7 +133,6 @@ const WorkflowList = () => {
           </div>
         );
       },
-      filterIcon: () => <FilterIcon size={14} />,
       render: (_, record) => {
         const enabled = record.enabled;
         return (
@@ -180,7 +179,7 @@ const WorkflowList = () => {
           <Tooltip title={t("workflow.action.edit")}>
             <Button
               color="primary"
-              icon={<PencilIcon size={16} />}
+              icon={<EditOutlinedIcon />}
               variant="text"
               onClick={() => {
                 navigate(`/workflows/${record.id}`);
@@ -192,7 +191,7 @@ const WorkflowList = () => {
             <Button
               color="danger"
               danger={true}
-              icon={<Trash2Icon size={16} />}
+              icon={<DeleteOutlinedIcon />}
               variant="text"
               onClick={() => {
                 handleDeleteClick(record);
@@ -301,7 +300,7 @@ const WorkflowList = () => {
           <Button
             key="create"
             type="primary"
-            icon={<PlusIcon size={16} />}
+            icon={<PlusOutlinedIcon />}
             onClick={() => {
               handleCreateClick();
             }}