安裝圖示庫 | Quasar 框架

Installing Icon Libraries

TIP

本頁僅說明如何使用網頁字型圖示。 Svg 圖示無需任何安裝步驟。

您的網站/應用程式很可能需要圖示，而 Quasar 為以下圖示庫提供簡單的開箱即用方案： Material Icons、 Material Symbols、 Font Awesome、 Ionicons、 MDI、 Eva Icons、 Themify Icons、 Line Awesome 和 Bootstrap Icons。但您可以自行新增對其他圖示庫的支援。

TIP

關於網頁字型圖示，您可以選擇安裝一個或多個這些圖示庫。

安裝網頁字型

如果您僅建置網站，則可以使用 CDN（內容傳遞網路）方法。但是，當您建置行動或 Electron 應用程式時，您很可能不希望依賴網際網路連線，而 Quasar 提供了此問題的解決方案

編輯 /quasar.config 檔案

extras: [
  'material-icons'
]

網頁字型圖示可透過 @quasar/extras 套件取得。您無需在應用程式中匯入它，只需如上所示設定 /quasar.config 檔案即可。

新增多個圖示集

extras: [
  'material-icons',
  'mdi-v7',
  'ionicons-v4', // last webfont was available in v4.6.3
  'eva-icons',
  'fontawesome-v6',
  'themify',
  'line-awesome',
  'bootstrap-icons'
]

如需所有可用選項，請造訪 GitHub 儲存庫。

您現在可以開始使用 QIcon 元件了。

使用 CDN 作為替代方案

如果您想使用 CDN（內容傳遞網路），您只需在 /index.html 或 /src/index.template.html 檔案中加入指向 CDN URL 的樣式標籤即可。

如果您遵循此路徑，請勿在 /quasar.config 檔案 > extras 中加入您想要的圖示集。請參考 UMD 安裝指南，並依照說明編輯 /index.html 或 /src/index.template.html。

使用 Fontawesome-Pro

如果您擁有 Fontawesome v6 Pro 授權，並想使用它來取代 Fontawesome Free 版本，請依照下列指示操作

開啟 Fontawesome 使用者帳戶頁面中的連結帳戶區塊，抓取 npm TOKENID（必要時請登入）。
在 .npmrc 檔案中建立或附加 TOKENID（檔案路徑與 package.json 相同）

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID

安裝 Fontawesome 網頁字型

Yarn

NPM

PNPM

Bun

$ yarn add @fortawesome/fontawesome-pro

建立新的啟動檔案

$ quasar new boot fontawesome-pro [--format ts]

編輯 /quasar.config 檔案

boot: [
  ...
  'fontawesome-pro' // Add boot file
],
extras: [
  // 'fontawesome-v6' // Disable free version!
],
framework: {
  // if you want Quasar to use Fontawesome for its icons
  iconSet: 'fontawesome-v6-pro'
}

編輯 /src/boot/fontawesome-pro.js

// required
import '@fortawesome/fontawesome-pro/css/fontawesome.css'
import '@fortawesome/fontawesome-pro/css/light.css'
// do you want these too?
// import '@fortawesome/fontawesome-pro/css/thin.css'
// import '@fortawesome/fontawesome-pro/css/duotone.css'
// import '@fortawesome/fontawesome-pro/css/brands.css'
// import '@fortawesome/fontawesome-pro/css/solid.css'
// import '@fortawesome/fontawesome-pro/css/regular.css'

（選用）覆寫預設圖示

由於 fontawesome-pro 的預設 font-weight 為 light 或 fal，因此框架元件使用的一些圖示可能不盡理想。處理此問題的最佳方法是在您建立的啟動檔案中覆寫它。

例如，若要覆寫晶片關閉圖示的 fal 版本，請執行下列操作

首先，在 Quasar Fontawesome v6 Pro 圖示集來源中尋找用於晶片關閉的圖示。

（或者，您可以檢查您要覆寫的元件的 render 函式內部。）

chip: {
  remove: 'fal fa-times-circle'

然後，在您的 /src/boot/fontawesome-pro.js 中覆寫它

import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
import '@fortawesome/fontawesome-pro/css/solid.min.css'
import '@fortawesome/fontawesome-pro/css/light.min.css'

// example
export default ({ app }) => {
  app.config.globalProperties.$q.iconSet.chip.remove = 'fas fa-times-circle'
}

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. 安裝網頁字型

3. 使用 CDN 作為替代方案

4. 使用 Fontawesome-Pro