It explains how to add a menu to your app. If you want to set a custom icon to your electron app, perform the following 2 simple steps. The next tutorial in this series is Electron menu. Now you can run: npm run package-mac npm run package-win npm run package-linux Installer tutorialsĬoming soon: Red-hat package. Now when that is done open up package.json and add a productname: Did you do anything with the 3 Apple/Windows/Linux icons in ‘src-electron/icons’ That was my focus before your suggestions. We’ll add that from the terminal with this command: npm install -save-dev electron If you cd inside out/mac/Electron File IO. app file inside macOS is just a directory so you can cd into it and see the contents of the application. We also need to add what version of electron to package the app with. (Running Application) Application Contents. Setting productname and electron versionĮlectron packager looks for a product name in package.json, so lets go ahead and add one. This is confirmed to work on both Windows and Mac. Given that, set the value without extension: 'icon': './assets/icon'. Npm install electron-packager -save-dev # for use from cli Per the Options.icon documentation: If the file extension is omitted, it is auto-completed to the correct extension based on the platform, including when platform: 'all' is in effect. Run these commands in the terminal in the app folder: # for use in npm scripts Install Electron packagerĮlectron packager is created by electron-userland and this is what they say about it: "Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution." There are some information about building Windows apps from non-Windows platforms in the Electron packager readme. In this tutorial I package the application on Windows, macOS and Ubuntu Linux. I added the mac->icon part of the config to package.json under the build key, which did the trick. To get started, we first need to add both dependencies to our brand-new npm package: yarn. This meant that part of my config from electron-builder.yml was ignored. js module that makes it easier to bind native modules to JavaScript. This process made me add some build config in my package.json for distribution. To make your menu a standard menu, you should set your menu's role to one of the following and Electron will recognize them and make them become standard menus: window. Just look at that repo if you want to see all the code. It was working just fine until I added electron-updater. On macOS there are many system-defined standard menus, like the Services and Windows menus. I add this code to the Electron tutorial app on github. This is also a continuation of the Electron app icon post, so start there if you haven’t read it (It’s short, i promise). The icon should be called icons.icns or icon.png at it should be at least 515x512 in macOS. For Electron Forge, the command is npm run make or yarn make.In this electron packager tutorial we will look at how to create MacOS, Windows and Linux executables with an app icon. Run the command to generate the appropriate build for your OS. I haven't figured out if there's a way to do this across platforms without modifying package.json manually before building, but this works well enough and barely adds any overhead. electron-icon-maker -input=svgx-logo-v3-1024.png -output=./appicons Step 3īack in the Electron app directory, add the appropriate icon path to package.json, before running the build command. In my case, I ran this in the folder where my source image svgx-logo-v3-1024.png is located, and outputted it to another folder called appicons. The source image should be at least 1024x1024 in size. Next you'll run the command to generate a set of Mac/Windows/Linux icons from a single png image. Step 1įirst, install the electron-icon-builder utility which generates the icons for you. I'm also using this template as a starter. Additionally, in Chrome-based browsers, weve made the browser spawned by. SVGX is an Electron app built with Svelte, as well as Forge which is a helpful tool for creating and publishing such apps. You can also use the bundled Electron browser, which does not have a dock icon. It took me a while to figure out, but eventually I got it. Unfortunately there don't seem to be a lot of resources out there for how to actually create proper Mac and Windows (and Linux) icons for the final build. The application icon may seem like a minor detail, yet I consider it very important, not just for branding, but also as a sign that the app is complete. Part of that is building platform-specific executables. As I'm wrapping things up on SVGX.app, a desktop app for managing SVG icon libraries, I find myself slogging through the most tedious 10% of the work.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |