Electron 更换图标

[yizihan]

Electron在 package.json 里面设置了生成应用后引用的icon地址，使用 electron-icon-maker 快速生成多尺寸自定义icon，并替换到 ./build/icons/ 文件夹内

// package.json
"mac": {
  "icon": "build/icons/icon.icns"
},
"win": {
  "icon": "build/icons/icon.ico"
},
"linux": {
  "icon": "build/icons"
}

安装

electron-icon-maker 会用到 Phantom。 Phantom 一个提供浏览器环境的命令行接口，可以看作是一个虚拟浏览器。

sudo npm install -g electron-icon-maker 

# 诡异的权限问题
Phantom installation failed { Error: EACCES: permission denied, link '/tmp/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1524228308175/phantomjs-2.1.1-macosx' -> '/usr/local/lib/node_modules/electron-icon-maker/node_modules/phantomjs-prebuilt/lib/phantom'
  errno: -13,
  code: 'EACCES',
  syscall: 'link',
  path: '/tmp/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1524228308175/phantomjs-2.1.1-macosx',
  dest: '/usr/local/lib/node_modules/electron-icon-maker/node_modules/phantomjs-prebuilt/lib/phantom' } Error: EACCES: permission denied, link '/tmp/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1524228308175/phantomjs-2.1.1-macosx' -> '/usr/local/lib/node_modules/electron-icon-maker/node_modules/phantomjs-prebuilt/lib/phantom'

查找原因：'/usr/local/lib/node_modules/electron-icon-maker/node_modules' 的用户权限是root

sudo npm install -g electron-icon-maker --unsafe-perm=true --allow-root
# —unsafe-perm:默认为false,如果为true则使用root用户安装，默认为非root用户安装
# —allow-root: 允许root

生成多尺寸图标

准备一个1024px X 1024px（或者更大）尺寸的png格式图片。

~/yizihan/icon-maker guosk $ ls
icon.png
~/yizihan/icon-maker guosk $ electron-icon-maker
{ i: './icon.png', input: './icon.png', o: './', output: './' }
Created /Users/guosk/yizihan/icon-maker/icons/png/16.png
Created /Users/guosk/yizihan/icon-maker/icons/png/24.png
Created /Users/guosk/yizihan/icon-maker/icons/png/32.png
Created /Users/guosk/yizihan/icon-maker/icons/png/48.png
Created /Users/guosk/yizihan/icon-maker/icons/png/64.png
Created /Users/guosk/yizihan/icon-maker/icons/png/128.png
Created /Users/guosk/yizihan/icon-maker/icons/png/256.png
Created /Users/guosk/yizihan/icon-maker/icons/png/512.png
Created /Users/guosk/yizihan/icon-maker/icons/png/1024.png
Icon generetor from PNG:
  src: /Users/guosk/yizihan/icon-maker/icons/png
  dir: /Users/guosk/yizihan/icon-maker/icons/mac
ICNS:
  Create: /Users/guosk/yizihan/icon-maker/icons/mac/icon.icns
Icon generetor from PNG:
  src: /Users/guosk/yizihan/icon-maker/icons/png
  dir: /Users/guosk/yizihan/icon-maker/icons/win
ICO:
  Create: /Users/guosk/yizihan/icon-maker/icons/win/icon.ico
Renaming PNGs to Electron Format
Renamed 16.png to 16x16.png
Renamed 24.png to 24x24.png
Renamed 32.png to 32x32.png
Renamed 48.png to 48x48.png
Renamed 64.png to 64x64.png
Renamed 128.png to 128x128.png
Renamed 256.png to 256x256.png
Renamed 512.png to 512x512.png
Renamed 1024.png to 1024x1024.png

 ALL DONE

彩蛋：生成的icns和ico 为多尺寸合成格式

.icns

.ico

[LiuGuoGY]

赞一个