如果你需要自动创建所有应用的图标和启动画面,Icon Genie 提供了可批量运行的配置文件。
¥If you need to automate the creation of all your app’s icons and splash screens, Icon Genie offers configuration files which can be run in batch.
这些配置文件名为 “profile 文件”。这些文件采用 JSON 格式,用于指示 Icon Genie 生成哪些图片以及如何生成它们。它们还能让你无需记住生成资源所需的整套 Icon Genie 命令和参数。
¥These configuration files are called “profile files”. The files are in JSON format and tell Icon Genie which images to generate and how to generate them. They also spare you from having to remember the whole set of Icon Genie commands and parameters to generate your assets.
文件结构(File structure)
¥File structure
JSON 配置文件的通用格式如下:
¥The generic form of a JSON profile file is:
{
"params": { },
"assets": [ ]
}
我们将在接下来的章节中逐一讨论。
¥We will be discussing each in the next sections.
参数(Params)
¥Params
JSON 配置文件中的 params
对象采用与 generate 命令参数相同的属性名称(但采用驼峰命名法,而非 CLI 的短横线命名法)。有一个关键区别:不要使用 mode
(例如:“spa,pwa”、“all”),而是使用 include
(例如:[ “spa”, “pwa” ], [ “all” ]).
¥The params
object from a JSON profile file takes the same prop names as the generate command parameters (but camelCased instead of the CLI’s kebab-case). There is one key difference: instead of using mode
(examples: “spa,pwa”, “all”) you will be writing include
(examples: [ “spa”, “pwa” ], [ “all” ]).
你可以为 params
对象编写的完整 prop 列表:
¥Full list of props that you can write for the params
object:
属性名称 | 类型 | 描述 | 示例 |
---|---|---|---|
include | 数组 | 包含 Icon Genie 为特定 Quasar 模式硬编码的资源集 | [ "spa", "pwa" ] / [ "all" ] |
icon | 字符串 | 图标源文件路径;可以是绝对路径,也可以是相对于 Quasar 项目文件夹根目录的相对路径。 | my-icon.png |
background | 字符串 | 可选背景源文件路径(用于启动画面);可以是绝对路径,也可以是相对于 Quasar 项目文件夹根目录的相对路径。 | my-bg.png |
filter | 字符串 | 可选择通过生成器过滤资源;使用箭头键导航时,它只能生成一种类型的资源,而不是所有类型的资源。 | ico |
quality | 数字 [1-12] | 生成文件的质量;更高的质量意味着更大的文件大小,更慢;质量较低意味着文件更小,速度更快 | 12 |
padding | 数组 [数字] | (v2.1+)修剪图标图片后,应用固定内边距;语法:[ <horiz_px>, <vert_px> ];默认值:[0, 0] | [10, 0] / [5,5] |
skipTrim | 布尔值 | (v2.2+)不要修剪图标源文件 | |
themeColor | 字符串 [十六进制] | 所有需要颜色的生成器使用的主题颜色;如果同时指定了任何生成器颜色,它将被覆盖 | ccc / e2b399 |
pngColor | 字符串 [十六进制] | png 生成器使用的背景颜色,当“background:在资源定义中设置为 true(例如 cordova/capacitor iOS 图标) | ccc / e2b399 |
splashscreenColor | 字符串 [十六进制] | 启动画面生成器使用的背景颜色 | ccc / e2b399 |
svgColor | 字符串 [十六进制] | 用于生成的单色 SVG 的颜色 | ccc / e2b399 |
splashscreenIconRatio | 数字 [0-100] | 图标大小与生成的启动画面的宽度或高度(以较小者为准)的比例;表示百分比;0 表示不会添加背景顶部的图标 | 40 |
资源(Assets)
¥Assets
如果你需要,assets
数组可以包含额外资源的自定义定义。当 Icon Genie 为每个模式提供的默认列表不足以满足你的用例时,可以使用此功能。如果你未在 params
中指定 include
属性,则只能生成自定义资源。
¥The assets
array can contain custom definitions for extra assets, should you need them. This can be used when Icon Genie’s default list for each mode is not sufficient for your use case. If you don’t specify the include
prop in params
you can only generate your custom assets.
99% 的情况下,你不需要指定 assets
数组,但 Icon Genie 的设计非常灵活,因此它也包含此功能。
¥In 99% of the cases you won’t need to specify the assets
array, but Icon Genie is designed to be very flexible, so it includes this feature too.
以下是一些 assets
的示例,你可以从中提取 Icon Genie 可以生成的每种资源类型的语法:
¥Some examples for assets
from which you can extract the syntax for every type of possible asset that Icon Genie can generate:
"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/icons"
},
{
"generator": "ico",
"name": "icon.ico",
"folder": "src-electron/icons"
},
{
"generator": "splashscreen",
"name": "Default-Landscape-2436h.png",
"folder": "src-cordova/res/screen/ios",
"sizes": [
[ 2436, 1125 ]
]
},
{
"generator": "png",
"name": "icon-29@2x.png",
"folder": "src-cordova/res/ios",
"sizes": [ 58 ],
"platform": "cordova-ios",
"background": true
},
{
"generator": "png",
"name": "icon-29@2x.png",
"folder": "src-cordova/res/ios",
"sizes": [ 58 ],
"platform": "cordova-ios",
"background": true
},
{
"generator": "png",
"name": "xxxhdpi.png",
"folder": "src-cordova/res/android",
"sizes": [ 192 ],
"platform": "cordova-android",
"density": "xxxhdpi"
},
{
"generator": "splashscreen",
"name": "Default@2x~ipad~comany.png",
"folder": "src-cordova/res/screen/ios",
"sizes": [
[ 1278, 2732 ]
],
"platform": "cordova-ios"
},
{
"generator": "splashscreen",
"name": "splash-land-xxxhdpi.png",
"folder": "src-cordova/res/screen/android",
"sizes": [
[ 1920, 1280 ]
],
"platform": "cordova-android",
"density": "land-xxxhdpi"
}
]
Bootstrap 配置文件(Bootstrap profiles)
¥Bootstrap profiles
Icon Genie 还提供了 profile 命令,它可以为你引导 JSON 配置文件。它可以帮助你创建一个或多个这样的文件,然后你可以使用 --profile
参数(或短 -p
)通过 生成命令 批量运行这些文件。
¥Icon Genie also offers the profile command which can bootstrap JSON profile files for you. It can help you create one or more such files that you can then run in batch through the generate command with --profile
param (or short -p
).
最方便的用例是将多个配置文件生成到一个特定的文件夹中,每个文件都有各自的参数,然后通过 $ icongenie generate -p /path/to/folder
运行所有这些文件。
¥The most handy use case is to generate multiple profile files into one specific folder, each with their own parameters, and then run all of them through $ icongenie generate -p /path/to/folder
.