electron-vue 图标
提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。
1. 启动项目默认图标与窗口左上角图标
这两个图标均由 mainWindow 的 icon 属性决定：
代码如下（示例）：
mainWindow = new BrowserWindow({
height: 620,
width: 400,
useContentSize: true,
icon: path.join(__static,"./zero.ico"),
webPreferences:{
nodeIntegration:true,
contextIsolation: false,
webSecurity: false,
},
})
效果如下：
另外，窗口左上角 标题 也可以自定义，修改位置如下（注意：修改完成后需重新启动运行代码才可生效）：
2. 菜单栏图标
可在菜单文字表达前添加图标
代码如下（示例）：
{
label: "显示主窗口",
icon: path.join(__static,"./logo.png"),
click: function() {
mainWindow.show();
} //打开相应页面
},
{//打开相应页面
label: "检查更新",
type:'checkbox',
checked: true,
click: function() { }
},
效果如下：
3. 系统托盘图标
系统托盘图标可自定义设置：
代码如下（示例）：
let iconPath = path.join(__static, "./zero.ico");
let appTray = new Tray(iconPath);
效果如下
4. 打包安装包图标
在 package.json 中配置：
代码如下（示例）：
"win": {
"icon": "build/icons/zero.ico",
"artifactName": "${productName}_setup_${version}.${ext}",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
效果如下：
5. 开始菜单图标和快捷方式图标
在 package.json 中配置 ：
其中
createDesktopShortcut表示创建快捷方式图标
createStartMenuShortcut 表示开始菜单图标
代码如下（示例）：
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./build/icons/zero.ico",
"uninstallerIcon": "./build/icons/zero.ico",
"installerHeaderIcon": "./build/icons/zero.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "xxxx"
}
6、dialog 弹框图标
ipcMain.on('logout',(e)=>{
dialog.showMessageBox({
type: 'info',
noLink:true, // windows 下的传统样式
title: '提示信息',
icon:path.join(__static,"./zero.ico"),
defaultId: 0,
message:"确定要退出登录吗？",
buttons:['确定','取消']
},(index) => {
if(index === 1){
// 什么都不做
e.preventDefault(); // 阻止默认行为
}else{
mainWindow.loadURL(winURL)
mainWindow.setSize(400,400);
}
});
})
实现效果：
总结
以上是我个人项目中使用到的图标，欢迎大家补充
