[icons] 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응용 프로그램 의 루트 디렉토리 (와 동일한 디렉토리 )를 가리 킵니다 .


답변

아이콘 파일 경로의 예제는 main.js가 기본 디렉토리 아래에 있다고 가정하는 경향이 있습니다. 파일이 앱의 기본 디렉토리에 없으면 경로 스펙이 해당 사실을 설명해야합니다.

예를 들어 main.js가 src / 서브 디렉토리에 있고 아이콘이 asset / icons /에 있으면이 아이콘 경로 스펙이 작동합니다.

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