feat: choose icon from .svg

src/main/ipc.ts

@@ -163,8 +163,8 @@ handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
 handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath));
 handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath));
 handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => getAccentColor());
-handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon) =>
+handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon, isSvg) =>
-    createTrayIcon(iconName, dataURL, isCustomIcon)
+    createTrayIcon(iconName, dataURL, isCustomIcon, isSvg)
 );
 handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons());
 handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName));

src/main/tray.ts

@@ -112,14 +112,19 @@ export function getTrayIconFileSync(iconName: string) {
     }
 }
 
-export async function createTrayIcon(iconName: string, iconDataURL: string, isCustomIcon: boolean = false) {
+export async function createTrayIcon(
+    iconName: string,
+    iconDataURL: string,
+    isCustomIcon: boolean = false,
+    isSvg: boolean = false
+) {
     // creates .png at config/TrayIcons/iconName.png from given iconDataURL
     // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call
     iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, "");
     if (isCustomIcon) {
         const img = nativeImage.createFromDataURL(iconDataURL).resize({ width: 128, height: 128 });
-        // writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toDataURL(), "base64");
+        if (isSvg) writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), iconDataURL, "base64");
-        writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
+        else writeFileSync(join(ICONS_DIR, iconName + "_custom.png"), img.toPNG());
     } else {
         writeFileSync(join(ICONS_DIR, iconName + ".png"), iconDataURL, "base64");
     }
@@ -144,11 +149,15 @@ export async function pickTrayIcon(iconName: string) {
 
     const res = await dialog.showOpenDialog(mainWin!, {
         properties: ["openFile"],
-        filters: [{ name: "Image", extensions: ["png", "jpg"] }]
+        filters: [{ name: "Image", extensions: ["png", "jpg", "svg"] }]
     });
     if (!res.filePaths.length) return "cancelled";
     const dir = res.filePaths[0];
     // add .svg !!
+    if (dir.split(".").pop() === "svg") {
+        mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, iconName, readFileSync(dir, "utf-8"));
+        return "svg";
+    }
     const image = nativeImage.createFromPath(dir);
     if (image.isEmpty()) return "invalid";
     const img = nativeImage.createFromPath(dir).resize({ width: 128, height: 128 });

src/preload/VesktopNative.ts

@@ -86,10 +86,16 @@ export const VesktopNative = {
         setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
         getIcon: (iconName: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconName),
         getIconSync: (iconName: string) => sendSync<string>(IpcEvents.GET_TRAY_ICON_SYNC, iconName),
-        createIconResponse: (iconName: string, iconDataURL: string, isCustomIcon: boolean = true) =>
+        createIconResponse: (
-            invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL, isCustomIcon),
+            iconName: string,
-        createIconRequest: (listener: (iconName: string) => void) => {
+            iconDataURL: string,
-            ipcRenderer.on(IpcEvents.CREATE_TRAY_ICON_REQUEST, (_, iconPath: string) => listener(iconPath));
+            isCustomIcon: boolean = true,
+            isSvg: boolean = true
+        ) => invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL, isCustomIcon, isSvg),
+        createIconRequest: (listener: (iconName: string, svg: string) => void) => {
+            ipcRenderer.on(IpcEvents.CREATE_TRAY_ICON_REQUEST, (_, iconPath: string, svg: string) =>
+                listener(iconPath, svg)
+            );
         },
         generateTrayIcons: () => invoke<void>(IpcEvents.GENERATE_TRAY_ICONS),
         setCurrentVoiceIcon: (listener: (...args: any[]) => void) => {

src/renderer/components/settings/TraySettings.tsx

@@ -41,6 +41,36 @@ const statusToSettingsKey = {
     deafened: { key: "trayDeafenedOverride", label: "Deafened Icon" }
 };
 
+async function changeIcon(iconName, settings) {
+    const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
+    switch (choice) {
+        case "cancelled":
+            return;
+        case "invalid":
+            Toasts.show({
+                message: "Please select a valid .png or .jpg image!",
+                id: Toasts.genId(),
+                type: Toasts.Type.FAILURE
+            });
+            return;
+    }
+
+    const updateIcon = () => {
+        const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey].key;
+        settings[iconKey] = true;
+        const iconDataURL = VesktopNative.tray.getIconSync(iconName);
+        const img = document.getElementById(iconName) as HTMLImageElement;
+        if (img) {
+            img.src = iconDataURL;
+        }
+        setCurrentTrayIcon();
+    };
+
+    // sometimes new icon may not be generated in time and will be used old icon :c
+    if (choice === "svg") setTimeout(updateIcon, 50);
+    else updateIcon();
+}
+
 function trayEditButton(iconName: string) {
     const Settings = useSettings();
     return (
@@ -58,27 +88,7 @@ function trayEditButton(iconName: string) {
                 width="40"
                 height="40"
                 onClick={async () => {
-                    const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
+                    changeIcon(iconName, Settings);
-                    switch (choice) {
-                        case "cancelled":
-                            return;
-                        case "invalid":
-                            Toasts.show({
-                                message: "Please select a valid .png or .jpg image!",
-                                id: Toasts.genId(),
-                                type: Toasts.Type.FAILURE
-                            });
-                            return;
-                    }
-
-                    const iconKey = statusToSettingsKey[iconName as keyof typeof statusToSettingsKey].key;
-                    Settings[iconKey] = true;
-                    const iconDataURL = VesktopNative.tray.getIconSync(iconName);
-                    const img = document.getElementById(iconName) as HTMLImageElement;
-                    if (img) {
-                        img.src = iconDataURL;
-                    }
-                    setCurrentTrayIcon();
                 }}
             />
         </div>
@@ -102,26 +112,7 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
                                 {trayEditButton(iconName)}
                                 <Button
                                     onClick={async () => {
-                                        const choice = await VesktopNative.fileManager.selectTrayIcon(iconName);
+                                        changeIcon(iconName, Settings);
-                                        switch (choice) {
-                                            case "cancelled":
-                                                return;
-                                            case "invalid":
-                                                Toasts.show({
-                                                    message: "Please select a valid .png or .jpg image!",
-                                                    id: Toasts.genId(),
-                                                    type: Toasts.Type.FAILURE
-                                                });
-                                                return;
-                                        }
-
-                                        Settings[key] = true;
-                                        const iconDataURL = VesktopNative.tray.getIconSync(iconName);
-                                        const img = document.getElementById(iconName) as HTMLImageElement;
-                                        if (img) {
-                                            img.src = iconDataURL;
-                                        }
-                                        setCurrentTrayIcon();
                                     }}
                                     look={Button.Looks.OUTLINED}
                                 >

src/renderer/patches/tray.ts

@@ -39,9 +39,9 @@ function changeColorsInSvg(svg: string, stockColor: string) {
     return svg;
 }
 
-VesktopNative.tray.createIconRequest(async (iconName: string) => {
+VesktopNative.tray.createIconRequest(async (iconName: string, svgIcon: string = "") => {
     try {
-        var svg = await VesktopNative.tray.getIcon(iconName);
+        var svg = svgIcon || (await VesktopNative.tray.getIcon(iconName));
         svg = changeColorsInSvg(svg, "#f6bfac");
         const canvas = document.createElement("canvas");
         canvas.width = 128;
@@ -54,7 +54,8 @@ VesktopNative.tray.createIconRequest(async (iconName: string) => {
             if (ctx) {
                 ctx.drawImage(img, 0, 0);
                 const dataURL = canvas.toDataURL("image/png");
-                VesktopNative.tray.createIconResponse(iconName, dataURL, false);
+                const isSvg = svgIcon !== "";
+                VesktopNative.tray.createIconResponse(iconName, dataURL, isSvg, isSvg); // custom if svgIcon is provided
             }
         };
         img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;