Putting Icons in Electron{{Vue}} application

This is the next step once there is a basic Electron application in place.

• Basics of Vue
• Desktop Application in Vue
• Vue CLI Plugin Electron Builder

Setting Icons

Install electron-icon-builder, which creates all the icons for all the platforms from a single file. Here is the documentation of electron-icon-builder at Vue ClI Plugin Electron Builder

• Install electron-icon-builder

  npm install --save-dev electron-icon-builder

• Place an image file with name ‘icon.png’ inside ‘public’ folder (public/icon.png). This file should be 1024px x 1024px or larger and 1 to 1 aspect ratio on width to height.
• Add the ‘npm’ script

  "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

• Run the script

  npm run electron:generate-icons

• That is all to create the icons. The icons will be put inside the folder named ‘build’
• Next is to build the project

  npm run electron:build

• That is all

Read more about it at the Vue CLI Plugin Electron Builder documentation.

Happy coding.