Electron + React = 💜

  • 11. Electron : Icons
  • 10. Electron : Build
  • 9. Electron : Native Node Module
  • 8. Electron : Shell
  • 7. React : 상태 관리
  • 6. React + Electron : 이벤트
  • 5. React + Electron : Example
  • 4. Electron : 이벤트
  • 3. Electron : 통신
  • 2. Electron : 기본 기능
  • 1. Electron : 구성

Electron : Icons

6개월 전
@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

아이콘 설정시 기존 자료들이 하라는대로 시도했지만 원활히 동작하지 않았다. 우선 여기서 사용중인 Electron + React 리포의 구조를 살펴보면 publicelectron의 코드가 포함되어 있다는 것을 감안했어야 하는데 그렇지 않아서 겪은 문제다.

- [D] public
  - [D] assets
    - [F] main.js
    - [F] favicon.png
    - [D] icons
      - [D] win
        - [F] icon.ico
      - [D] mac
        - [F] icon.icns

일단 앱 내에서 상단바나 상태바에 아이콘을 변경하는 건 PNG 파일로 가능하다. Main에서 윈도우를 생성할 때 아이콘의 경로를 알려주면 된다. Main의 경로를 바탕으로 말이다.

mainWindow = new BrowserWindow({
  resizable: false,
  width: 760,
  height: 600,
  webPreferences: {
    nodeIntegration: true
  },
  icon: __dirname + '/favicon.png'
});

앱 실행이나 설치 아이콘의 변경이 필요하다면 이 PNG 파일을 윈도우라면 ico 파일로 맥이라면 icns 파일로 변환이 필요하다. 그리고 package.json에서 build 옵션을 설정해주면 된다.

"build": {
  "win": { 
    "icon": "./public/assets/icons/win/icon.ico"
  },
  "mac": {
    "icon": "./public/assets/icons/mac/icon.icns"
  }
},
작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.