Configuración y generación de iconos de aplicaciones Electron

Selección de tecnología:

1, "electrón": "21.3.3",

2、"electrón-vitación": "1.0.17"

3、"vista": "3.2.45"

4、"elemento-plus": "2.2.32"

fondo:

Por defecto, hay cuatro tipos de iconos usados ​​por las aplicaciones que desarrollamos usando electron:

1. Icono de archivo de instalación de software:

2. El icono generado en el escritorio después de instalar el software:

3. El icono que se muestra en la barra de tareas después de abrir el software:

4. El icono que se muestra en la esquina superior izquierda después de abrir el software:

Entonces, ¿cómo configurar estos cuatro iconos en electrones?

De hecho, los cuatro íconos anteriores se pueden dividir en dos categorías, 1 y 2 se dividen en una categoría, llamados íconos de paquete de instalación, 3 y 4 se dividen en una categoría, los íconos que se muestran cuando el software se está ejecutando, llamados íconos de ventana

Modificación del icono de la ventana:

1. Archivo modificado: src\main\index.js

2. Para conocer el contenido del archivo modificado, consulte la octava línea del siguiente código y establezca la propiedad icon en BrowserWindow:

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 800,
    show: false,
    autoHideMenuBar: true,
    icon: join(__dirname,'../../resources/image/3.png'),
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      nodeIntegration: true
    }
  })

Modificación del icono del paquete de instalación.

1. La modificación del icono del paquete de instalación es mucho más difícil que la modificación del icono de la ventana.

2. Instalar generador de iconos de electrones

npm i electron-icon-builder

3. Agregue la siguiente línea de código 11 en los scripts de package.json:

  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config",
    "electron:generate-icons":"electron-icon-builder --input=./resources/icon.png --output=build --flatten"
  }

4. Copie la imagen icon.png que preparamos al directorio de recursos

5. Ejecute el comando generar icono:

npm run electron:generate-icons

6. Después de ejecutar el comando, se generan muchos iconos en el directorio build\icons del proyecto:

7. Configuración del archivo electron-builder.yml:

nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
  installerIcon: 'build/icon.ico'
  uninstallerIcon: 'build/icon.ico'

installerIcon: configurar el icono del paquete de instalación

uninstallerIcon: icono de comando de desinstalación

(Copie el ico en el paso 6 al directorio de compilación)

8. Compilar y empaquetar:

npm run build:win

9. El paquete de instalación correspondiente se genera en el directorio dist del proyecto: