Electron-开发实践：制作icns图标

【省流】

封装了一个mac上将png转为icns的应用，

欢迎大家使用： https://electron-icns.com/

【前言】

将Electron应用打包为Mac应用包的时候，

这里以electron-packager打包为例，

默认打包运行后的应用图标是这样，

【icns】

按electron-packager的文档描述传入icon字段即可，

但是在mac端需要传入icns格式， https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html#icon

icns是苹果专用的一种格式，将各种尺寸的图片集合在一起，

【制作icns】

可以在mac上手动制作icns图标

1. 准备一个1024x1024的png透明底图标，例如pic.png放到一个文件夹下

2. 创建一个tmp.iconset文件夹，然后执行下列命令

sips -z 16 16      pic.png --out tmp.iconset/icon_16x16.png
sips -z 32 32      pic.png --out tmp.iconset/icon_16x16@2x.png
sips -z 32 32      pic.png --out tmp.iconset/icon_32x32.png
sips -z 64 64      pic.png --out tmp.iconset/icon_32x32@2x.png
sips -z 128 128    pic.png --out tmp.iconset/icon_128x128.png
sips -z 256 256    pic.png --out tmp.iconset/icon_128x128@2x.png
sips -z 256 256    pic.png --out tmp.iconset/icon_256x256.png
sips -z 512 512    pic.png --out tmp.iconset/icon_256x256@2x.png
sips -z 512 512    pic.png --out tmp.iconset/icon_512x512.png
sips -z 1024 1024  pic.png --out tmp.iconset/icon_512x512@2x.png

执行后就会得到各种尺寸的图片

3. 执行iconutil命令制作icns图标

iconutil -c icns tmp.iconset -o icon.icns

执行后就生成了一个icns图标

4. 将这个icns图标传入到electron-packager的icon处再次打包

可以看到mac下已经显示自己定制的图标了

【electron-icns】

上面的方法比较麻烦，封装了一个库，欢迎使用：https://code.insistime.com/#/electron-icns

通过npx使用

npx electron-icns /path/to/your/png/icon

通过npm全局使用

npm i -g electron-icns

electron-icns /path/to/your/png/icon

通过devDependencies使用

安装

npm i -D electron-icns

在package.json中添加命令

{
  "scripts": {
    "icns": "electron-icns /path/to/your/png/icon"
  },
}

通过jsapi使用

// cjs
const { icns } = require('electron-icns');

// mjs
import { icns } from 'electron-icns';

// icns
const icnsPath = await icns(pngPath);

效果

【图标很大】

制作好mac的icns图标后，

有时候会发现图标比其他应用的图标大一些，

例如这种效果：

原因其实很简单，

就是设计图标的时候没有留白，

随便找一个正常的图标打开查看，

这里大概看了下，

如果png的尺寸是1024x1024，

那么留白的尺寸是98px，

可以参考这个设计png，

然后转为icns就可以了。

【总结】

1. icns介绍

2. 手动通过sips和iconutil命令生成icns图标

3. 使用electron-icns库生成icns图标，https://code.insistime.com/#/electron-icns