ui: Pyoncord icon

build.mjs

@@ -53,6 +53,7 @@ try {
         footer: {
             js: "//# sourceURL=pyoncord"
         },
+        loader: { ".png": "dataurl" },
         legalComments: "none",
         plugins: [
             {

src/core/metro/common.ts

@@ -10,3 +10,5 @@ export const Colors = requireMetroDefaultLazy("Colors");
 export const Constants = requireMetroLazy("Constants");
 export const FluxDispatcher = requireMetroDefaultLazy("FluxDispatcher");
 export const TabsNavigationRef = requireMetroLazy("TabsNavigationRef");
+export const SVG = requireMetroLazy("react-native-svg");
+export const Styles = requireMetroLazy("Styles");

src/core/patches/settings.tsx

@@ -1,6 +1,7 @@
 // Good luck reading this!
 import { Patcher } from "@api/Patcher";
 import { I18n, NavigationNative, TabsNavigationRef } from "@metro/common";
+import PyoncordIcon from "@ui/icons/PyoncordIcon64.png";
 import { lazyNavigate } from "@utils";
 import { resolveAssets } from "@utils/assets";
 
@@ -16,11 +17,11 @@ const icons = resolveAssets({
 // @ts-expect-error
 export const sections = window.__pyoncord_sections_patch = {
     [`Pyoncord (${commitHash})`]: [
-        ["PYONCORD", "Pyoncord", () => import("@ui/screens/General"), icons.Discord],
+        ["PYONCORD", "Pyoncord", () => import("@ui/screens/General"), { uri: PyoncordIcon }],
         ["PYONCORD_PLUGINS", "Plugins", () => import("@ui/screens/Plugins"), icons.Wrench]
     ]
 } as {
-    [key: string]: [key: string, title: string, getRender: () => Promise<any>, icon: number][];
+    [key: string]: [key: string, title: string, getRender: () => Promise<any>, icon: any][];
 };
 
 const CustomPageRenderer = React.memo(() => {
@@ -50,7 +51,7 @@ export function patchSettings() {
                 module.SETTING_RENDERER_CONFIG[key] = {
                     type: "pressable",
                     title: () => title,
-                    icon: icon,
+                    icon,
                     onPress: () => {
                         const ref = TabsNavigationRef.getRootNavigationRef();
                         lazyNavigate(ref, getRender(), title);

src/core/ui/icons/PyoncordIcon.tsx

@@ -0,0 +1,32 @@
+import { Colors, Styles, SVG } from "@metro/common";
+
+const useStyles = Styles.createStyles({
+    icon: {
+        color: Colors.colors.INTERACTIVE_NORMAL,
+        opacity: 0.9
+    }
+});
+
+export const PyoncordSVGIcon = props => (
+    <SVG.Svg
+        width={24}
+        height={24}
+        viewBox="0 0 597 566"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style={[useStyles().icon, props.style]}
+        {...props}
+    >
+        <SVG.Path
+            d="M33 528C257.476 318.342 390.169 321.497 593 409C596.655 409.908 597.949 409.762 594.5 404.5L528.5 329L91.4999 357.5C50.2688 428.527 29.9088 470.474 0.999917 551C-0.790804 560.283 29.3833 530.316 33 528Z"
+            fill="#D9D9D9"
+        />
+        <SVG.Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M90.3361 282.537C23.3361 293.537 44.8361 374.537 92.8361 363.037L528.836 335.037C569.561 309.533 546.836 269.037 427.336 192.537C427.497 62.0921 393.114 -1.77311 350.836 0.0374323C328.909 2.82884 323.811 24.3282 334.336 117.037C257.729 65.8557 219.24 44.1595 189.836 67.0375C171.487 93.5974 212.457 130.18 269.475 181.092C280.592 191.018 292.32 201.489 304.336 212.537C276.457 258.33 232.605 279.896 183.336 285.537C183.336 285.537 158.336 287.037 92.8361 282.136C92.0092 282.266 91.1759 282.4 90.3361 282.537ZM461.336 282.537C471.277 282.537 479.336 274.479 479.336 264.537C479.336 254.596 471.277 246.537 461.336 246.537C451.395 246.537 443.336 254.596 443.336 264.537C443.336 274.479 451.395 282.537 461.336 282.537Z"
+            fill="#D9D9D9"
+        />
+    </SVG.Svg>
+);
+

src/core/ui/screens/General.tsx

@@ -1,5 +1,6 @@
 import { Tables } from "@metro/common";
 import { removeFile } from "@native";
+import { PyoncordSVGIcon } from "@ui/icons/PyoncordIcon";
 import { resolveAssets } from "@utils/assets";
 
 const { ScrollView } = ReactNative;
@@ -27,7 +28,7 @@ export default function General() {
                 <TableRowGroup>
                     <TableRow
                         label={"Pyoncord"}
-                        icon={<TableRow.Icon source={icons.Wrench} />}
+                        icon={<TableRow.Icon IconComponent={PyoncordSVGIcon} />}
                         trailing={<TableRow.TrailingText text={commitHash} />}
                     />
                     <TableRow

src/internal/requireDef.ts

@@ -3,6 +3,8 @@ import { findByProps } from "@internal/metro";
 export const getRequireDefintion = () => ({
     "react": findByProps("createElement"),
     "react-native": findByProps("PlatformColor"),
+    "react-native-svg": findByProps("Svg"),
+    "Styles": findByProps("createStyles"),
     "AssetManager": findByProps("getAssetByID"),
     "I18n": findByProps("Messages"),
     "Tables": findByProps("TableRow"),

src/modules.d.ts

@@ -12,3 +12,7 @@ declare module "~plugins-def" {
         definer: () => ({ default: any; }),
     }>;
 }
+
+declare module "*.png" {
+    export default string;
+}