Merge pull request #236 from moonlight-mod/notnite/vendored-icons

packages/core-extensions/src/common/index.ts

···
   },
   ErrorBoundary: {
     dependencies: [{ id: "react" }]
+  },
+  icons: {
+    dependencies: [{ id: "react" }, { id: "discord/components/common/index" }]
   }
 };

packages/core-extensions/src/common/manifest.json

···
   "apiLevel": 2,
   "meta": {
     "name": "Common",
-    "tagline": "A *lot* of common clientmodding utilities from the Discord client",
+    "tagline": "Common client modding utilities for the Discord client",
     "authors": ["Cynosphere", "NotNite"],
     "tags": ["library"]
   },

packages/core-extensions/src/common/webpackModules/icons.ts

···
+import { Icons, IconSize } from "@moonlight-mod/types/coreExtensions/common";
+import { tokens } from "@moonlight-mod/wp/discord/components/common/index";
+
+// This is defined in a Webpack module but we copy it here to be less breakage-prone
+const sizes: Partial<Record<IconSize, number>> = {
+  xxs: 12,
+  xs: 16,
+  sm: 18,
+  md: 24,
+  lg: 32,
+  refresh_sm: 20
+};
+
+export const icons: Icons = {
+  parseProps(props) {
+    // NOTE: var() fallback is non-standard behavior, just for safety reasons
+    const color = props?.color ?? tokens?.colors?.["INTERACTIVE_NORMAL"] ?? "var(--interactive-normal)";
+
+    const size = sizes[props?.size ?? "md"];
+
+    return {
+      // note: this default size is also non-standard behavior, just for safety
+      width: size ?? props?.width ?? sizes.md!,
+      height: size ?? props?.width ?? sizes.md!,
+
+      fill: typeof color === "string" ? color : color.css,
+      className: props?.colorClass ?? ""
+    };
+  }
+};
+export default icons;

packages/core-extensions/src/moonbase/index.tsx

···
       { id: "react" },
       { id: "discord/components/common/index" },
       { ext: "moonbase", id: "stores" },
+      { ext: "moonbase", id: "ThemeDarkIcon" },
       { id: "discord/modules/guild_settings/web/AppCard.css" },
       { ext: "contextMenu", id: "contextMenu" },
       { id: "discord/modules/modals/Modals" },
···
       '"Missing channel in Channel.openChannelContextMenu"',
       ".forumOrHome]:"
     ]
+  },
+
+  ThemeDarkIcon: {
+    dependencies: [{ ext: "common", id: "icons" }, { id: "react" }]
   },
 
   settings: {
···
     dependencies: [
       { id: "react" },
       { ext: "moonbase", id: "stores" },
+      { ext: "moonbase", id: "ThemeDarkIcon" },
       { ext: "notices", id: "notices" },
       {
         ext: "spacepack",

packages/core-extensions/src/moonbase/webpackModules/ThemeDarkIcon.tsx

···
+// RIP to ThemeDarkIcon ????-2025
+// <Cynthia> Failed to remap "ThemeDarkIcon" in "discord/components/common/index"
+// <NotNite> bro are you fucking kidding me
+// <NotNite> that's literally the icon we use for the update banner
+
+import React from "@moonlight-mod/wp/react";
+import icons from "@moonlight-mod/wp/common_icons";
+import type { IconProps } from "@moonlight-mod/types/coreExtensions/common";
+
+export default function ThemeDarkIcon(props?: IconProps) {
+  const parsed = icons.parseProps(props);
+
+  return (
+    <svg
+      aria-hidden="true"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      width={parsed.width}
+      height={parsed.height}
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill={parsed.fill}
+        className={parsed.className}
+        d="M20.52 18.96c.32-.4-.01-.96-.52-.96A11 11 0 0 1 9.77 2.94c.31-.78-.3-1.68-1.1-1.43a11 11 0 1 0 11.85 17.45Z"
+      />
+
+      <path
+        fill={parsed.fill}
+        className={parsed.className}
+        d="m17.73 9.27-.76-2.02a.5.5 0 0 0-.94 0l-.76 2.02-2.02.76a.5.5 0 0 0 0 .94l2.02.76.76 2.02a.5.5 0 0 0 .94 0l.76-2.02 2.02-.76a.5.5 0 0 0 0-.94l-2.02-.76ZM19.73 2.62l.45 1.2 1.2.45c.21.08.21.38 0 .46l-1.2.45-.45 1.2a.25.25 0 0 1-.46 0l-.45-1.2-1.2-.45a.25.25 0 0 1 0-.46l1.2-.45.45-1.2a.25.25 0 0 1 .46 0Z"
+      />
+    </svg>
+  );
+}

packages/core-extensions/src/moonbase/webpackModules/ui/update.tsx

···
 import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
 import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
 import {
-  ThemeDarkIcon,
   Button,
   Text,
   ModalRoot,
···
   openModal
 } from "@moonlight-mod/wp/discord/components/common/index";
 import MarkupClasses from "@moonlight-mod/wp/discord/modules/messages/web/Markup.css";
+import ThemeDarkIcon from "@moonlight-mod/wp/moonbase_ThemeDarkIcon";
 
 const strings: Record<UpdateState, string> = {
   [UpdateState.Ready]: "A new version of moonlight is available.",

packages/core-extensions/src/moonbase/webpackModules/updates.tsx

···
 import Notices from "@moonlight-mod/wp/notices_notices";
 import { MoonlightBranch } from "@moonlight-mod/types";
 import React from "@moonlight-mod/wp/react";
-import { ThemeDarkIcon } from "@moonlight-mod/wp/discord/components/common/index";
+import ThemeDarkIcon from "@moonlight-mod/wp/moonbase_ThemeDarkIcon";
 
 function plural(str: string, num: number) {
   return `${str}${num > 1 ? "s" : ""}`;

packages/core-extensions/src/moonbase/wp.d.ts

···
 declare module "@moonlight-mod/wp/moonbase_stores" {
   export * from "core-extensions/src/moonbase/webpackModules/stores";
 }
+
+declare module "@moonlight-mod/wp/moonbase_ThemeDarkIcon" {
+  import ThemeDarkIcon from "core-extensions/src/moonbase/webpackModules/ThemeDarkIcon";
+  export = ThemeDarkIcon;
+}

packages/types/src/coreExtensions/common.ts

···
+import type { IconProps, IconSize } from "@moonlight-mod/mappings/discord/components/common/index";
+
 export type ErrorBoundaryProps = React.PropsWithChildren<{
   noop?: boolean;
   fallback?: React.FC<any>;
···
   error?: Error;
   componentStack?: string;
 };
+
+export type ErrorBoundary = React.ComponentClass<ErrorBoundaryProps, ErrorBoundaryState>;
+
+export type ParsedIconProps = {
+  width: number;
+  height: number;
+  fill: string;
+  className: string;
+};
+
+export interface Icons {
+  /**
+   * Parse icon props into their actual width/height.
+   * @param props The icon props
+   */
+  parseProps(props?: IconProps): ParsedIconProps;
+}
+
+// Re-export so extension developers don't need to depend on mappings
+export type { IconProps, IconSize };

packages/types/src/discord/require.ts

···
 import { AppPanels } from "../coreExtensions/appPanels";
 import { Commands } from "../coreExtensions/commands";
+import { ErrorBoundary, Icons } from "../coreExtensions/common";
 import { DMList, MemberList, Messages } from "../coreExtensions/componentEditor";
 import { ContextMenu, EvilItemParser } from "../coreExtensions/contextMenu";
 import { Markdown } from "../coreExtensions/markdown";
···
 declare function WebpackRequire(id: "appPanels_appPanels"): AppPanels;
 
 declare function WebpackRequire(id: "commands_commands"): Commands;
+
+declare function WebpackRequire(id: "common_ErrorBoundary"): ErrorBoundary;
+declare function WebpackRequire(id: "common_icons"): Icons;
 
 declare function WebpackRequire(id: "componentEditor_dmList"): DMList;
 declare function WebpackRequire(id: "componentEditor_memberList"): MemberList;

packages/types/src/import.d.ts

···
   export default commands;
 }
 
-declare module "@moonlight-mod/wp/common_ErrorBoundary";
+declare module "@moonlight-mod/wp/common_ErrorBoundary" {
+  import { CoreExtensions } from "@moonlight-mod/types";
+  const ErrorBoundary: CoreExtensions.Common.ErrorBoundary;
+  export = ErrorBoundary;
+}
+declare module "@moonlight-mod/wp/common_icons" {
+  import { CoreExtensions } from "@moonlight-mod/types";
+  export const icons: CoreExtensions.Common.Icons;
+  export default icons;
+}
 declare module "@moonlight-mod/wp/common_stores";
 
 declare module "@moonlight-mod/wp/componentEditor_dmList" {