我的GitHub
0%

无星的electron之旅(七)——electron 图标资源

图标使用的地方非常多,打包生成exe的图标,运行时的图标,系统托盘的图标等等

这里我们先介绍几种格式:

png,jpg,icns,ico

1
2
3
4
5
6
7
png:是一种采用无损压缩算法的位图格式,兼容性好。

jpg:JPG一般指JPEG格式。JPEG(Joint Photographic Experts Group)是JPEG标准的产物,该标准由国际标准化组织(ISO)制订,是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式,后缀名为.jpg或.jpeg。

icns:一般是用来给application做resource的icon文件,也是macintosh系统里独特支持的格式。

ico:ICO是Windows的图标文件格式,图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。

所以换句话说,icns是mac用的(有些时候linux也可以使用),ico是windows用的

怎么制作这些图标?

1.首先,准备问美工要一个1024x1024的png图标

2.有两个库可以帮助我们

electron-icon-maker

electron-icon-builder
具体使用说明请查看readme

  • 吐槽:这两个玩意都依赖PhantomJS这个无头浏览器,让我很是烦躁,这玩意一方面是不好用,另一方面下载贼麻烦,搞得我在Linux环境下使用Jenkins做持续集成,下载总下不下来,气死我了。

    各种情况的使用

    1.打包以后的图标

    我这里使用的是vue+electron-builder打包。

1

windows使用ico,mac使用icns,linux使用png或者icns

打包图标参考资料

2.默认标题的图标

2

这里的图标,设置来自创建window时的icon属性设置

1
2
3
4
new BrowserWindow({
******
icon: path.join(__static, 'logo.png');
});

但是这里在不同版本的electron上可能存在bug,因此建议使用nativeimage引入。建议此处引入区分不同系统,windows使用ico图标,其他系统使用png图标

1
2
3
4
5
6
7
8
9
10
11
12
function getTrayIcon() {
if (process.platform !== 'darwin') {
// windows
return path.join(__static, 'icon.ico');
}
return path.join(__static, 'icon.png');
}
******
new BrowserWindow({
******
icon: nativeImage.createFromPath(getTrayIcon()),
});

托盘图标

同理,建议区分系统,另外mac上建议使用生成的16x16的图标(个人建议,没有资料引用)

1
tray = new Tray(nativeImage.createFromPath(getTrayIcon()));

参考资料

打包图标