Electron / Atom Shell 앱의 앱 아이콘을 설정하는 방법

Electron / Atom Shell 앱의 앱 아이콘을 설정하는 방법

---

Electron 앱의 앱 아이콘을 어떻게 설정합니까?

노력하고 BrowserWindow({icon:'path/to/image.png'});있지만 작동하지 않습니다.

효과를 보려면 앱을 포장해야합니까?

---

icon작성시 특성을 설정하면 BrowserWindowWindows 및 Linux에만 영향을줍니다.

OS X에서 아이콘을 설정하려면 전자 패키지를 사용하고 --icon스위치를 사용하여 아이콘을 설정할 수 있습니다 .

OS X의 경우 .icns 형식 이어야합니다. .png에서이 파일을 만들 수 있는 온라인 아이콘 변환기 가 있습니다.

---

아래는 내가 가진 솔루션입니다.

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});

---

macOS에서도 가능합니다. 코드를 통하지 않고 몇 가지 간단한 단계를 수행하십시오.

1. 사용하려는 .icns 파일을 찾아서 편집 메뉴를 통해 복사하십시오.
2. 일반적으로 node_modules / electron / dist에서 electron.app를 찾으십시오.
3. 정보 창을 엽니 다
4. 왼쪽 상단에서 아이콘을 선택하십시오 (주변의 회색 테두리).
5. cmd + v를 통해 아이콘 붙여 넣기
6. 개발 중 아이콘을 즐기십시오 :-)

실제로 그것은 전자에 국한되지 않는 일반적인 것입니다. 이와 같은 많은 macOS 응용 프로그램의 아이콘을 변경할 수 있습니다.

---

package.json이 업데이트되었습니다 .

"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "icon": "./public/icons/mac/icon.icns",     <---------- set Mac Icons
    "category": "public.app-category.utilities"
  },
  "win": {
    "icon": "./public/icons/png/256x256.png" <---------- set Win Icon
  },
  "files": [
    "./build/**/*",
    "./dist/**/*",
    "./node_modules/**/*",
    "./public/**/*",       <---------- need for get access to icons
    "*.js"
  ],
  "directories": {
    "buildResources": "public" <---------- folder where placed icons
  }
},

응용 프로그램을 빌드 한 후 아이콘을 볼 수 있습니다. 이 솔루션은 개발자 모드에서 아이콘을 표시하지 않습니다. 에 아이콘을 설정하지 않았습니다 new BrowserWindow().

---

전자 빌더 는 아이콘을 지원합니다

---

작업 표시 줄에서 앱 아이콘을 업데이트하려면 main.js에서 다음을 업데이트하십시오 (typescript를 사용하는 경우 main.ts).

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirnamepackage.json응용 프로그램 의 루트 디렉토리 (와 동일한 디렉토리 )를 가리 킵니다 .

---

Please be aware that the examples for icon file path tend to assume that main.js is under the base directory. If the file is not in the base directory of the app, the path specification must account for that fact.

For example, if the main.js is under the src/ subdirectory, and the icon is under assets/icons/, this icon path specification will work:

icon: __dirname + "../assets/icons/icon.png"

---

As a most recent solution, I found an alternative of using --icon switch. Here is what you can do.

1. Create a directory named build in your project directory and put the .icns the icon in the directory as named icon.icns.
2. run builder by executing command electron-builder --dir.

You will find your application icon will be automatically picked up from that directory location and used for an application.

참고 : 주어진 답변은 최신 버전의 electron-builder전자 빌드 v21.2.0에 대한 것이며

참고 URL : https://stackoverflow.com/questions/31529772/how-to-set-app-icon-for-electron-atom-shell-app