Skip to page content

Icon Genie 配置文件

如果您需要自动创建应用程序的图标和启动页图片,Icon Genie 提供了用于批量运行的配置文件。

这些配置文件被称为“profile files”。它们是 JSON 格式的,告诉 Icon Genie 要生成哪些图像以及如何生成它们。您就可以不用记忆 Icon Genie CLI 的命令和参数了。

文件结构

JSON 配置文件的一般形式是:

{
  "params": {},
  "assets": []
}

我们将在下一节中逐一讨论。

参数

JSON 配置文件中的 params 对象与 generate 命令参数使用相同的名称(但使用驼峰式大小写,而不是 CLI 的 kebab-case)。有一个关键的区别:不是使用 mode(例如 “spa,pwa”,“all”),而是使用 include(例如 [“spa”,“pwa”],[“all”])。

params 对象的选项列表:

选项名称数据类型说明举例
includeArrayIcon Genie 给哪些 Quasar 模式生成图标?[ "spa", "pwa" ] / [ "all" ]
iconString图标的源文件路径;可以是绝对路径,也可以相对于 Quasar 项目的根文件夹my-icon.png
iconMonochromeString可选,Android 自适应图标单色图层(Android 13+ 主题化图标)的源文件路径;只会用到它的形状;默认取图标源文件的形状my-icon-mono.png
backgroundString可选,背景源文件的路径(用于启动页图片以及 Android 自适应图标的背景图层);可以是绝对路径,或相对于 Quasar 项目的根文件夹的路径my-bg.png
backgroundDarkString可选,启动页图片深色变体所用背景源文件的路径;默认取(浅色)背景源文件my-bg-dark.png
filterString可选,过滤资源文件;在使用时,它只能生成一种类型的资源文件,而不是所有类型ico
qualityNumber [1-12]生成文件的质量;质量越高,文件越大,速度越慢;较低的质量意味着更小的文件,更快的速度12
paddingArray(v2.1+) 裁剪完图标图片后,添加内边距;语法: [ <水平>, <竖直> ],每个值可以是像素数,也可以是相对于生成图片尺寸的百分比字符串(这样它会随每个生成尺寸自动缩放);默认是: [0, 0][10, 0] / ["8%", "4%"]
skipTrimBoolean(v2.2+) 不要裁剪图片。
themeColorString [hex]为所有需要颜色的生成器使用的默认主题颜色;如果生成器指定了颜色,就会覆盖这个默认值。ccc / e2b399
pngColorString [hex]当资源文件定义了 “Background: true”时,png 生成器使用的背景颜色(类似于 cordova/capacitor iOS 图标),也用于 Android 自适应图标的背景图层ccc / e2b399
splashscreenColorString [hex]启动页图片的背景颜色。ccc / e2b399
splashscreenDarkColorString [hex]启动页图片深色变体的背景颜色(Capacitor 模式:Android “night” 资源与 iOS 深色外观);未指定时不会生成深色变体,且之前生成的深色变体会被移除121212
svgColorString [hex]单色 SVG 图片的颜色。ccc / e2b399
splashscreenIconRatioNumber [0-100]图标大小相对于生成的启动页图片的宽度或高度(以较小的那个为准)的比率;数字是百分比;0 表示不会添加背景顶部的图标40

Assets

如果您需要,assets 数组可以包含自定义的 额外资源 。当 Icon Genie 的每个模式的默认列表不足以满足您的需要时,可以使用此方法。如果您没有在 params 中指定 include 属性,您只能生成自定义资源文件。

在 99% 的情况下,您不需要指定 assets 数组,但是 Icon Genie 被设计得非常灵活,所以它也包含了这个功能。

资源的 folder 和 name 值相对于 Quasar 项目文件夹解析。它们不能(无论直接还是通过符号链接)指向项目文件夹之外的位置。

有些资源属性只对特定的生成器或平台生效:

属性名作用于说明
backgroundpng用 pngColor 填充透明区域
platformpng、splashscreen、launcher把资源注册到原生工程:cordova-android / cordova-ios(config.xml),capacitor-android(自适应图标 XML)/ capacitor-ios(Contents.json)
densitycordova-androidconfig.xml 中 <icon> 条目的 density 属性(maskable 启动页图标不需要)
variantlauncher要合成哪个 Android 启动器图标:foreground / background / monochrome(自适应图标图层,108dp 画布)、maskable(分层画布,用于 Web App Manifest 的 maskable 图标以及 Android 12 启动页图标)、legacy / round(Android 8 之前的图标,48dp)
scalecapacitor-ios 启动页Contents.json 条目的缩放比例:1x、2x 或 3x
appearancepngiOS 18+ 的应用图标变体,用于 cordova-ios / capacitor-ios:dark(透明背景上的图标)或 tinted(灰度)
darksplashscreen深色变体:以 backgroundDark 和 splashscreenDarkColor 作为背景,仅在设置了后者时才生成
tag任意结束时打印的标签,供你添加到自己的 /index.html;可使用 {size} 和 {name} 占位符

一些示例,示范了每种 assets 类型的语法:

"assets": [
  {
    "generator": "png",
    "name": "icon-{size}x{size}.png",
    "folder": "src-bex/icons",
    "sizes": [ 16, 48, 128 ]
  },

  {
    "generator": "svg",
    "name": "safari-pinned-tab.svg",
    "folder": "public/icons"
  },

  {
    "generator": "splashscreen",
    "name": "apple-launch-{size}.png",
    "folder": "public/icons",
    "sizes": [
      [ 1668, 2388 ]
    ],
    "tag": "<link rel=\"apple-touch-startup-image\" media=\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons/{name}\">"
  },

  {
    "generator": "icns",
    "name": "icon.icns",
    "folder": "src-electron/electron-assets/icons"
  },

  {
    "generator": "ico",
    "name": "icon.ico",
    "folder": "src-electron/electron-assets/icons"
  },

  {
    "generator": "launcher",
    "name": "icon-maskable-512x512.png",
    "folder": "public/icons",
    "sizes": [ 512 ],
    "variant": "maskable"
  },

  {
    "generator": "png",
    "name": "icon.png",
    "folder": "src-cordova/res/ios",
    "sizes": [ 1024 ],
    "platform": "cordova-ios",
    "background": true
  },

  {
    "generator": "launcher",
    "name": "xxxhdpi-foreground.png",
    "folder": "src-cordova/res/android",
    "sizes": [ 432 ],
    "platform": "cordova-android",
    "density": "xxxhdpi",
    "variant": "foreground"
  },

  {
    "generator": "launcher",
    "name": "splashscreen.png",
    "folder": "src-cordova/res/screen/android",
    "sizes": [ 960 ],
    "platform": "cordova-android",
    "variant": "maskable"
  },

  {
    "generator": "png",
    "name": "icon-dark.png",
    "folder": "src-cordova/res/ios",
    "sizes": [ 1024 ],
    "platform": "cordova-ios",
    "appearance": "dark"
  },

  {
    "generator": "splashscreen",
    "name": "Default@2x~universal~comany.png",
    "folder": "src-cordova/res/screen/ios",
    "sizes": [
      [ 1278, 2732 ]
    ],
    "platform": "cordova-ios"
  },

  {
    "generator": "launcher",
    "name": "ic_launcher_foreground.png",
    "folder": "src-capacitor/android/app/src/main/res/mipmap-xxxhdpi",
    "sizes": [ 432 ],
    "platform": "capacitor-android",
    "variant": "foreground"
  },

  {
    "generator": "splashscreen",
    "name": "splash.png",
    "folder": "src-capacitor/android/app/src/main/res/drawable-port-night-xxxhdpi",
    "sizes": [
      [ 1280, 1920 ]
    ],
    "platform": "capacitor-android",
    "dark": true
  },

  {
    "generator": "png",
    "name": "AppIcon-512@2x.png",
    "folder": "src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset",
    "sizes": [ 1024 ],
    "platform": "capacitor-ios",
    "background": true
  },

  {
    "generator": "splashscreen",
    "name": "splash-2732x2732-dark.png",
    "folder": "src-capacitor/ios/App/App/Assets.xcassets/Splash.imageset",
    "sizes": [ 2732 ],
    "platform": "capacitor-ios",
    "scale": "3x",
    "dark": true
  }
]

自动制作配置文件

Icon Genie 还提供了 profile 命令,它可以为您生成 JSON 配置文件。它可以帮助您创建一个或多个这样的文件,然后您可以通过带有 --profile 参数(或简短的 -p)的 generate 命令 批量运行这些文件。

最方便的例子是在一个特定的文件夹中生成多个配置文件,每个文件都有自己的参数,然后通过 icongenie generate -p /path/to/folder 运行所有文件。