App icon update issue #13
Conversation
Adds a script to generate PNG icons from SVG and configures the app to use them. Co-authored-by: sumitduster <[email protected]>
|
Cursor Agent can help with this pull request. Just |
There was a problem hiding this comment.
Pull request overview
This PR establishes a deterministic icon generation pipeline to ensure the custom gradient-heart icon displays consistently across development, built applications, and DMGs. It addresses an issue where the default Electron icon was being shown instead of the intended custom icon.
- Adds automated SVG-to-PNG icon generation using @resvg/resvg-js
- Configures electron-builder with explicit icon paths for macOS builds and DMGs
- Sets runtime dock icon on macOS to ensure proper icon display during development
Reviewed changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| scripts/generate-icons.mjs | New script that converts the SVG icon to a 1024x1024 PNG format |
| package.json | Adds pre-hooks to auto-generate icons, configures electron-builder icon paths, and adds @resvg/resvg-js dependency |
| package-lock.json | Locks @resvg/resvg-js and its platform-specific optional dependencies |
| main.js | Adds icon path configuration for the BrowserWindow and sets the macOS dock icon at runtime |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "directories": { | ||
| "buildResources": "assets" | ||
| }, | ||
| "icon": "assets/icon.png", |
There was a problem hiding this comment.
For macOS applications, electron-builder expects .icns format for the icon, not .png. While electron-builder can auto-convert PNG to ICNS in some cases, explicitly providing an ICNS file ensures better quality and reliability. Consider generating an .icns file from the PNG or using electron-builder's icon conversion capabilities by removing the extension and letting it auto-detect the correct format based on platform.
| app.whenReady().then(() => { | ||
| // Ensure dock icon is correct in development builds on macOS. | ||
| if (process.platform === 'darwin' && app.dock) { | ||
| const iconPath = path.join(__dirname, 'assets', 'icon.png'); |
There was a problem hiding this comment.
The iconPath variable is declared twice - once at line 7 and again at line 56. Consider declaring it once before the conditional check to avoid code duplication and ensure consistency.
| const svg = await fs.readFile(svgPath, 'utf8'); | ||
|
|
||
| const resvg = new Resvg(svg, { | ||
| fitTo: { mode: 'width', value: SIZE }, |
There was a problem hiding this comment.
The fitTo configuration only constrains width but not height. If the SVG has a different aspect ratio, this could result in a non-square icon. For app icons, it's important to ensure both dimensions are SIZE x SIZE. Consider using fitTo mode 'original' with explicit width and height, or verify the SVG has a 1:1 aspect ratio.
|
|
||
| const SIZE = 1024; | ||
|
|
||
| async function main() { |
There was a problem hiding this comment.
The script doesn't verify that the input SVG file exists before attempting to read it. If assets/icon.svg is missing, the error message will be generic. Consider adding an explicit check with a helpful error message, such as checking if the file exists using fs.access() before reading.
| async function main() { | |
| async function main() { | |
| try { | |
| await fs.access(svgPath); | |
| } catch (err) { | |
| if (err && err.code === 'ENOENT') { | |
| const relativeSvgPath = path.relative(projectRoot, svgPath); | |
| throw new Error(`Input SVG file not found at ${relativeSvgPath}. Please ensure the file exists before running this script.`); | |
| } | |
| throw err; | |
| } |
| maybePromise.catch(() => {}); | ||
| } | ||
| } catch (_) { | ||
| // Ignore failures (e.g., missing icon in some dev setups). |
There was a problem hiding this comment.
The empty catch block silently ignores all errors from app.dock.setIcon(). While the comment mentions this is intentional for missing icons, it would be better to at least log the error in development mode (e.g., if app.isPackaged is false) to help with debugging icon-related issues during development.
| maybePromise.catch(() => {}); | |
| } | |
| } catch (_) { | |
| // Ignore failures (e.g., missing icon in some dev setups). | |
| maybePromise.catch((err) => { | |
| if (!app.isPackaged) { | |
| console.error('Failed to set dock icon (async):', err); | |
| } | |
| }); | |
| } | |
| } catch (err) { | |
| // Ignore failures in production (e.g., missing icon in some dev setups), | |
| // but log them in development for easier debugging. | |
| if (!app.isPackaged) { | |
| console.error('Failed to set dock icon (sync):', err); | |
| } |
| "icon": "assets/icon.png", | ||
| "identity": null | ||
| }, | ||
| "dmg": { | ||
| "icon": "assets/icon.png" |
There was a problem hiding this comment.
The icon path is specified three times: at the build level (line 36), in the mac configuration (line 45), and in the dmg configuration (line 49). The build-level icon should be sufficient as it's inherited by platform-specific configurations. This redundancy could lead to maintenance issues if the icon path needs to be updated. Consider removing the redundant specifications and keeping only the build-level icon configuration.
| "icon": "assets/icon.png", | |
| "identity": null | |
| }, | |
| "dmg": { | |
| "icon": "assets/icon.png" | |
| "identity": null | |
| }, | |
| "dmg": { |
Ensure the app icon consistently displays the new gradient-heart icon across development, built applications, and DMGs.
The previous setup lacked explicit icon configuration for
electron-builderand runtime, leading to default Electron icons being displayed instead of the intended custom icon. This PR establishes a deterministic pipeline to generate and apply the correct icon.Note
Ensures the custom icon is generated and consistently used at runtime and in macOS builds.
scripts/generate-icons.mjsusing@resvg/resvg-jsto renderassets/icon.pngfromassets/icon.svg; hooks intoprestart,prebuild, andprebuild-dmgiconand applies macOS dock icon at startup inmain.jselectron-builderto useassets/icon.pngfor app,mac, anddmg; setsdirectories.buildResources: assetsand includesassets/**/*infiles@resvg/resvg-jsdev dependencyWritten by Cursor Bugbot for commit e6a54dd. Configure here.