[Electron] electron-buider 아이콘 적용하기

chatGPT한테 물어보고 나온 내용을 죽어라 적용해도 안되다가 결국 한 블로그를 보고 찾은 방법이다.

출처 : https://velog.io/@yijaee/Electron-build

Electron 앱 build부터 자동업데이트까지

 

환경

크게 상관은 없을 것 같지만 적어놓는다.
- OS : Window, Ubuntu 둘 다 사용
- NodeJS : 16.20.1
- electon : ^25.3.1
- electron-buider : ^24.6.3

방법

1. 256x256 또는 512x512 크기의 png 파일을 준비한다.
2. assets 폴더를 만든다
3. assets 안에 icons폴더를 만들어서 사진을 넣어준다.
4. assets/icon.png 폴더로 아이콘으로 원하는 png파일을 복사해준다.
   

   

   
   
   
5. package.json을 수정해준다.
   

    ...
    "build": {
       "linux": {
         "target": [
           "deb"
         ],
         "category": "Application"
       },
       "directories": {
         "output": "dist",
         "buildResources": "assets"
       }
     },
     ...

   
   
   
6. 환경에 맞게 build 해준다.
   - window
   

   npx electron-buider -w

    - ubuntu
   

   npx electron-buider -l

   
   
   
7. dist 폴더에 만들어진 파일을 설치하면 끝

package.json 설명

- directories.output : 빌드한 결과물이 나올 폴더 위치
- drectories.buidResources : icon으로 사용할 resource의 위치, icon.png파일이 icon이 되는것 같다.