請確定您的機器上已安裝 Node >=16。
警告
請勿使用 Node 的奇數版本，例如 19、21、23 等。 這些版本未經 Quasar 測試，且通常因其實驗性質而導致問題。我們強烈建議始終使用 Node 的 LTS 版本。
您將全域安裝 Icon Genie CLI。您無需將其安裝在專案資料夾中。
# Node.js >=18 is required.
$ yarn global add @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/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 App Extension，因此您將其安裝到專案資料夾中。新版本 (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 不再是這種情況。您現在只需要一個具有透明度的 png 檔案（其名稱可以是任何名稱），且最小為 64x64 像素（但越高越好！– 建議最小尺寸：1024x1024），用於圖示，然後另一個用於啟動畫面背景的可選 png（任何名稱）（最小 128x128 像素，但建議最小尺寸為 1024x1024 像素）。
啟動畫面也以完全不同的方式運作。它們將在可選背景上方的圖示產生。圖示與寬度或高度（以較小者為準）的尺寸比例可以使用 CLI 參數 (--splashscreen-icon-ratio) 調整。您甚至可以告訴 Icon Genie 比例為 0，這樣它就不會在背景上方新增圖示。
輸出檔案
我們已經優化了所產生的圖示和啟動畫面列表，使其符合最新的標準，並避免重複。因此，您會注意到一些舊檔案不再產生，而有些則是全新的。Icon Genie 現在會告訴您需要添加到您的 /index.html 或 /src/index.template.html 中的標籤 (如果有的話) (您可以複製貼上這些標籤並替換掉舊的標籤) – 所以請留意標籤列表。
刪除您目前所有的圖示/啟動畫面檔案，然後讓 Icon Genie 再次執行，這可能會是個好主意。這樣一來，您就可以確定您留下的檔案實際上已在您的 Quasar 應用程式中使用。
Icon Genie v2 的新功能
Icon Genie v2 是從頭到尾完全重寫的版本。
- Icon Genie 現在是一個獨立的 CLI，不再是 Quasar 應用程式擴展。
- 輸入檔案（用於圖示和背景）可以有任何名稱、放置在任何位置，並且它們不需要具有固定的寬度 + 高度。從 v2.1 開始，圖示輸入檔案不需要具有相同的寬度和高度。此外，圖示輸入檔案現在會自動修剪。
- 您現在可以為圖示輸入檔案設定邊距。(v2.1+)
- 我們已經優化了產生的圖示和啟動畫面列表，使其符合最新的標準並避免重複。
- 啟動畫面的創建方式更佳，圖示位於背景之上 (圖示可以具有您想要的任何尺寸比例，包括 0，這表示：「我只想要背景圖像，頂部沒有圖示」)
- 新指令：generate、verify 和 profile，每個指令都有其各自的用途。
generate指令現在也會顯示您在/index.html或/src/index.template.html檔案中需要的標籤。verify指令甚至可以檢查每個檔案是否在正確的位置，並且具有正確的寬度和高度。- 許多新的參數：quality、svg-color、png-color、splashscreen-color、splashscreen-icon-ratio 等等。請查看指令列表頁面。
- 您現在可以個別控制每個 Quasar 模式的每種類型資源 (ico、png、splashscreen、…)，每個資源都有其自己的設定/參數。請查看
--filter、--quality和所有顏色參數。一個好的用例是.ico檔案。 - 現在可以透過 Icon Genie 設定檔實現自動化。
- 您現在可以透過 設定檔，使用 Icon Genie API 產生您自己的自訂圖像檔案。
最後，我們需要再次強調 quality 參數，它將決定您的圖像看起來有多好以及有多大 (KB)。