确保你的计算机上安装了 Node >=16。

¥Make sure that you have Node >=16 installed on your machine.

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

¥You will be installing the Icon Genie CLI globally. You don’t need to install it in your project folder.

# Node.js >=18 is required.
$ yarn global add @quasar/icongenie

这将安装 icongenie 命令行工具。

¥This will install the icongenie command line tool.

安装技巧(Installation tips)

¥Installation tips

如果你正在使用 Yarn，请确保 Yarn 全局安装位置 在你的 PATH 中：

¥If you are using Yarn, make sure that the Yarn global install location is in your PATH:

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

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

¥Under Windows, modify user’s PATH environment variable. If you are using yarn then add %LOCALAPPDATA%\yarn\bin, otherwise if you’re using npm then add %APPDATA%\npm.

升级到 Icon Genie v2(Upgrading to Icon Genie v2)

¥Upgrading to Icon Genie v2

本节适用于已使用 Icon Genie v1 并正在升级到 Icon Genie v2 的用户。

¥This section applies to those that have been using Icon Genie v1 and are now upgrading to Icon Genie v2.

NPM 包名称更改(NPM package name change)

¥NPM package name change

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

¥Version 1 was a Quasar App Extension and so you installed it into your project folder. The new version (v2) does NOT need to be installed locally as it is installed globally. Your CI/CD will not need it as it is a one-time process and the output files (images) will be added directly to your project folder.

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

¥As a consequence, please uninstall Icon Genie v1 from your project folder:

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

输入文件(Input files)

¥Input files

在版本 1 中，你需要一个 app-icon.png 和一个 app-splashscreen.png（宽度和高度固定）。版本 2 不再存在这种情况。现在你只需要一个 png 文件（名称任意），并设置透明度，尺寸至少为 64x64 像素（但像素越高越好！）。-- 建议最小尺寸:1024x1024）用于图标，然后另一个可选的 png（任意名称）用于启动画面的背景（最小 128x128 像素，但建议最小为 1024x1024 像素）。

¥With version 1 you required to have an app-icon.png and an app-splashscreen.png (at a fixed width and height). This is no longer the case with version 2. You will now just need a png file (its name can be anything) with transparency and with minimum of 64x64 px (but the higher, the better! – recommended min size: 1024x1024) for the icon, and then another optional png (any name) for the background of the splash screens (min 128x128 px, but recommended minimum is 1024x1024 px).

启动画面的工作方式也完全不同。它们将在可选背景上方生成图标。可以使用 CLI 参数 (--splashscreen-icon-ratio) 调整图标与宽度或高度（以较小者为准）的尺寸比。你甚至可以告诉 Icon Genie 比例为 0，这样它就不会将图标添加到背景之上。

¥The splash screens work in a completely different manner too. They will get generated with the icon on top of the optional background. The size ratio of the icon to width or height (whichever is lower) can be adjusted with the CLI params (--splashscreen-icon-ratio). You can even tell Icon Genie that the ratio is 0 so it won’t add the icon on top of the background.

输出文件(Output files)

¥Output files

我们优化了生成的图标和启动画面列表，以符合最新标准并避免重复。因此，你会注意到一些旧文件不再生成，而有些文件则是全新的。图标精灵现在会告诉你需要在 /index.html 中添加哪些标签（如果有）（你可以复制粘贴标签并替换旧标签） - 因此请仔细查看标签列表。

¥We have refined the list of icons and splash screens that are generated to match the latest standards and to also avoid duplication. So you will notice that some of the older files don’t get generated anymore and some are completely new. Icon Genie will now tell you what tags you need to add (if any) to your /index.html (you can copy paste the tags and replace your old ones) – so be mindful about the list of tags.

删除所有当前的图标/启动画面文件，然后让 Icon Genie 重新运行，或许是个好主意。这样，你就可以确保剩余的内容确实会在你的 Quasar 应用中使用。

¥It might be a good idea to delete all your current icon/splashscreen files and let Icon Genie do its job again. This way you will be sure that what you’re left with is actually used in your Quasar App.

Icon Genie v2 的新功能(What’s new in Icon Genie v2)

¥What’s new in Icon Genie v2

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

¥Icon Genie v2 is a complete rewrite from top to bottom.

• Icon Genie 现在是一个独立的 CLI，不再是 Quasar 应用扩展。

  ¥Icon Genie is now a CLI on its own, not a Quasar App Extension any more.

• 输入文件（用于图标和背景）可以使用任意名称，放置在任何位置，并且它们不需要具有固定的宽度和高度。从 v2.1 开始，图标输入文件的宽度和高度不再需要相同。此外，图标输入文件现在会自动修剪。

  ¥The input files (for the icon and the background) can have any name, be placed anywhere, and they don’t need to have a fixed width + height. Starting with v2.1, the icon input file does not needs to have same width and height. Also, the icon input file is now automatically trimmed.

• 现在，你可以为图标输入文件配置填充。(v2.1+)

  ¥You can now configure a padding for the icon input file. (v2.1+)

• 我们优化了生成的图标和启动画面列表，以符合最新标准并避免重复。

  ¥We have refined the list of icons and splash screens that get generated to match the latest standards and to also avoid duplication.

• 启动画面的创建方式更佳，图标位于背景上方（图标尺寸比例可由你选择，包括 0，即 “我只想要背景图片，顶部没有图标”）。

  ¥Splash screens are created in a better manner, with the icon on top of the background (with the icon having any size ratio that you want, including 0 which means: “I only want the background image with no icon on top”)

• 新命令：generate、verify 和 profile 各有其用途。

  ¥New commands: generate, verify, and profile, each with its own purpose.

• generate 命令现在还会显示你在 /index.html 文件中需要哪些标签。

  ¥The generate command now also shows you what tags you need in your /index.html file.

• verify 命令甚至可以检查每个文件是否位于正确的位置，以及其宽度和高度是否正确。

  ¥The verify command can even check if every file is in the right place and it has the right width by height.

• 许多新参数：质量、svg 颜色、png 颜色、启动画面颜色、启动画面图标比例等。请查看 命令列表 页面。

  ¥A lot of new parameters: quality, svg-color, png-color, splashscreen-color, splashscreen-icon-ratio, etc etc. Check the command list page.

• 现在，你可以单独控制每个 Quasar 模式的每种资源类型（ico、png、启动画面等），每种资源都有各自的设置/参数。检查 --filter、--quality 和所有颜色参数。一个很好的用例是使用 .ico 文件。

  ¥You can now control each type of asset (ico, png, splashscreen, …) for each Quasar mode individually, each with its own settings/parameters. Check the --filter, --quality and all the color parameters. One good use case is with the .ico files.

• 现在可以通过 Icon Genie profile 文件 实现自动化。

  ¥Automation is now possible through Icon Genie profile files.

• 现在，你可以通过 profile 文件 使用 Icon Genie API 生成你自己的自定义图片文件。

  ¥You can now generate your own custom image files using the Icon Genie API through the profile files.

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

¥Finally, we need to emphasize again on the quality parameter, which will dictate how good-looking and how big (KB) your images will be.