确保在计算机上安装了Node>=10和NPM>=5。

您将在全局安装Icon Genie CLI。 您无需将其安装在项目文件夹中。

# Node.js >=10 is required.

$ yarn global add @quasar/icongenie
# or
$ npm install -g @quasar/icongenie

这将安装icongenie命令行工具。

安装提示

如果使用的是Yarn，请确保Yarn 全局安装位置位于PATH中：

# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"

在Windows下，修改用户的PATH环境变量。 如果您使用的是yarn，则添加%LOCALAPPDATA%\yarn\bin；否则，如果使用的是npm，则添加%APPDATA%\npm。

升级到Icon Genie v2

本节适用于一直使用Icon Genie v1并现在升级到Icon Genie v2的用户。

NPM包名更改

版本1是Quasar应用扩展 ，因此您将其安装到项目文件夹中。 新版本（v2）不需要在本地安装，因为它是全局安装的。 CI/CD不需要它，因为它是一次性过程，并且输出的文件（图像）将直接添加到项目文件夹中。

因此，请从您的项目文件夹中卸载Icon Genie v1：

# from your Quasar CLI project folder:
$ quasar ext remove @quasar/icon-genie

输入文件

对于版本1，您需要具有app-icon.png和app-splashscreen.png（具有固定的宽度和高度）。版本2不再是这种情况。现在，您只需要一个作为图标的透明且最小64x64像素（但越高越好！——建议的最小大小：1024x1024）的png文件（任何名称），然后是作为启动画面（最小128x128像素，但建议最小为1024x1024像素）背景的另一个可选png（任何名称）。

启动画面的工作方式也完全不同。它们将通过可选背景顶部的图标生成。可以使用CLI参数（--splashscreen-icon-ratio）来调整图标与宽度或高度的大小比例（以较低者为准）。您甚至可以告诉Icon Genie，该比例为0，因此不会在背景顶部添加图标。

输出文件

我们优化了生成的图标和启动画面的列表，以匹配最新标准并避免重复。因此，您会注意到一些较旧的文件不再生成，而有些则是全新的。 Icon Genie现在会告诉您需要在/src/index.template.html中添加哪些标签（如果有的话）（您可以复制粘贴标签并替换旧的标签）——请注意标签列表。

最好删除所有当前的图标/启动画面文件，然后让Icon Genie再次执行其工作。这样，您将确保剩下的一切已在Quasar应用程序中实际使用。

Icon Genie v2的新增功能

Icon Genie v2是从上到下的完整重写。

• Icon Genie现在本身就是一个CLI，不再是Quasar App Extension。
• 输入文件（用于图标和背景）可以具有任何名称，可以放置在任何位置，并且它们不需要具有固定的宽度+高度。从v2.1开始，图标输入文件不需要具有相同的宽度和高度。此外，图标输入文件现在会自动修剪。
• 现在，您可以为图标输入文件配置padding。 （v2.1 +）
• 我们优化了生成的图标和启动画面的列表，以匹配最新标准并避免重复。
• 启动画面的创建方式更好，图标位于背景顶部（图标具有所需的任意大小比例，包括表示“我只希望背景图像位于顶部”意思的0）
• 新命令：generate, verify和profile，每个命令都有自己的目的。
• 现在，generate命令还会向您显示/src/index.template.html文件中所需的标签。
• verify命令甚至可以检查每个文件是否位于正确的位置，并且按高度具有正确的宽度。
• 许多新参数：quality, svg-color, png-color, splashscreen-color, splashscreen-icon-ratio等。请检查命令列表 页面。
• 现在，您可以分别控制每种Quasar模式的每种资产类型（ico、png、启动画面…）。每种类型都有自己的设置/参数。检查--filter，--quality和所有颜色参数。一个好的用例是使用.ico文件。
• 现在可以通过Icon Genie 配置文件进行自动化。
• 您现在可以通过配置文件使用Icon Genie API生成自己的自定义图像文件。

最后，我们需要再次强调quality参数，该参数决定了图像的美观程度和大小（KB）。