Icon Genie CLI安装

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

WARNING

请勿使用不均衡的Node版本,例如13、15等。这些版本未经Quasar测试,并且由于其实验性质而经常引起问题。 我们强烈建议始终使用LTS版本的Node。

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

# Node.js >=12.22.1 is required.

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

这将安装icongenie命令行工具。

基于Windows的开发人员注意

如果出现类似"pngquant failed to build"的错误,则还需要全局安装Windows-build-tools(“yarn global add windows-build-tools” 或 “npm install --global windows-build-tools”)。 然后转到C:\Users\<windows_username>\.windows-build-tools并运行vs_BuildTools.exe。 从那里选择npm/yarn和python进行安装。 完成此步骤后,可能需要重新启动计算机,否则,您现在可以安装@quasar/icongeni。

安装提示

如果使用的是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, verifyprofile,每个命令都有自己的目的。
  • 现在,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)。