WCM6 收口企业微信多手机移动渲染稳定化

client/src/components/mobile/MobileIcon.tsx

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "react";
+import {
+  Bell,
+  BriefcaseBusiness,
+  CalendarCheck,
+  Circle,
+  ClipboardCheck,
+  CloudUpload,
+  FileCheck2,
+  FileText,
+  Home,
+  IdCard,
+  Network,
+  PackageSearch,
+  ReceiptText,
+  Settings,
+  UserCog,
+  UserRound,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const MOBILE_ICON_MAP: Record<string, LucideIcon> = {
+  account_tree: Network,
+  badge: IdCard,
+  cloud_upload: CloudUpload,
+  event_available: CalendarCheck,
+  fact_check: ClipboardCheck,
+  group: Users,
+  home: Home,
+  inventory_2: PackageSearch,
+  manage_accounts: UserCog,
+  notifications: Bell,
+  person: UserRound,
+  picture_as_pdf: FileText,
+  receipt_long: ReceiptText,
+  request_quote: FileCheck2,
+  settings: Settings,
+  workspaces: BriefcaseBusiness,
+};
+
+type MobileIconProps = HTMLAttributes<HTMLSpanElement> & {
+  iconClassName?: string;
+  name: string;
+};
+
+export function MobileIcon({ className, iconClassName, name, ...props }: MobileIconProps) {
+  const Icon = MOBILE_ICON_MAP[name] ?? Circle;
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("inline-flex shrink-0 items-center justify-center leading-none", className)}
+      {...props}
+    >
+      <Icon className={cn("size-5", iconClassName)} strokeWidth={2.1} />
+    </span>
+  );
+}