Quasar 元件有自己的圖示。Quasar 並非強迫您使用特定的圖示庫（以便正確顯示），而是讓您選擇其元件應使用的圖示。這稱為 Quasar 圖示集。
您可以安裝多個圖示庫，但您必須只選擇一個用於 Quasar 的元件。
Quasar 目前支援：Material Icons、 Material Symbols、 Font Awesome、 Ionicons、 MDI、 Eva Icons、 Themify Icons、 Line Awesome 和 Bootstrap Icons。
也可以將您自己的圖示檔案（SVG 或任何圖片格式）與任何 Quasar 元件搭配使用，詳情請參閱 QIcon | 圖片圖示 頁面。
您也可以提供圖示對應函式，以新增對任何其他圖示庫的支援，或重新對應一些現有的圖示庫以符合您的喜好，詳情請參閱 QIcon | 自訂對應。例如，如果使用圖片圖示，您可以使用此功能將長圖片檔案路徑重新對應為簡短且易於理解的名稱。
設定預設圖示集
Quasar 圖示集有兩種型別：基於網頁字型的和基於 SVG 的。
除非另行設定，否則 Quasar 使用 Material Icons 網頁字型作為其元件的圖示集。但是，您可以告訴 Quasar 使用其他圖示集，但如果是基於網頁字型的圖示集，請務必在您的網站/應用程式中包含其圖示庫（請參閱 安裝圖示庫）。
硬式編碼
如果預設的 Quasar 圖示集不是動態決定的（例如不依賴 Cookie），則您可以
Quasar CLI 方式
我們再次編輯 /quasar.config 檔案
framework: {
// webfont-based example
iconSet: 'mdi-v7'
}framework: {
// svg-based example
iconSet: 'svg-mdi-v7'
}如需所有可用選項，請造訪 GitHub 儲存庫。
包含 MDI 和 Fontawesome 並告訴 Quasar 為其元件使用 Fontawesome 的完整範例。
extras: [
'mdi-v7',
'fontawesome-v6'
],
framework: {
iconSet: 'fontawesome-v6'
}這將使您能夠在您的應用程式中使用 MDI 和 Fontawesome 網頁字型，並且所有 Quasar 元件都將顯示 Fontawesome 圖示。
UMD 方式
包含適用於您的 Quasar 版本的 Quasar 圖示集標籤，並告訴 Quasar 使用它。範例
<!-- include this after Quasar JS tag -->
<script src="https://cdn.jsdelivr.net/npm/quasar@v2/dist/icon-set/fontawesome-v6.umd.prod.js"></script>
<script>
Quasar.IconSet.set(Quasar.IconSet.fontawesomeV6)
</script>查看您需要在 UMD / 獨立 頁面上的 HTML 檔案中包含哪些標籤。
Quasar Vite 插件方式
我們編輯您的 main.js
// ...
import { Quasar } from 'quasar'
// ...
import iconSet from 'quasar/icon-set/fontawesome-v6'
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
// ...
app.use(Quasar, {
// ...,
iconSet: iconSet
})Vue CLI 方式
我們編輯您的 main.js
import iconSet from 'quasar/icon-set/fontawesome-v6'
// ...
import { Quasar } from 'quasar'
// ...
app.use(Quasar, {
// ...,
iconSet: iconSet
})動態（在非 SSR 上）
Quasar CLI：如果您的所需 Quasar 圖示集必須動態選取（範例：依賴 Cookie），則您需要建立一個啟動檔案：$ quasar new boot quasar-icon-set [--format ts]。這將建立 /src/boot/quasar-icon-set.js 檔案。將其編輯為
import { IconSet } from 'quasar'
// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js')
// or just a select few (example below with only mdi-v7 and fontawesome-v6):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v7|fontawesome-v6).js')
export default async () => {
const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?)
try {
iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.js` ]().then(lang => {
IconSet.set(setDefinition.default)
})
}
catch (err) {
console.error(err)
// Requested Quasar Icon Set does not exist,
// let's not break the app, so catching error
}
}然後將此啟動檔案註冊到 /quasar.config 檔案中
boot: [
'quasar-icon-set'
]始終限制動態匯入
請注意使用 Webpack magic comment - webpackInclude。否則，所有可用的圖示集檔案都將被捆綁，從而導致編譯時間和捆綁大小增加。請參閱 動態匯入的注意事項
動態（在 SSR 上）
在處理 SSR 時，我們不能使用單例物件，因為這會污染會話。因此，與上面的動態範例相反（先閱讀它！），您還必須從您的啟動檔案中指定 ssrContext
import { IconSet } from 'quasar'
// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.js')
// or just a select few (example below with only mdi-v7 and fontawesome-v6):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v7|fontawesome-v6).js')
// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
const iconSetName = 'mdi-v7' // ... some logic to determine it (use Cookies Plugin?)
try {
iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.js` ]().then(lang => {
IconSet.set(setDefinition.default, ssrContext)
})
}
catch (err) {
console.error(err)
// Requested Quasar Icon Set does not exist,
// let's not break the app, so catching error
}
}在執行階段變更 Quasar 圖示集
變更圖示集
Quasar 圖示集是響應式的，因此如果您變更 $q.iconSet 物件，所有元件都將正確更新。這是一個範例
import { useQuasar } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v7.js'
setup () {
const $q = useQuasar()
function changeIconSetToMdiIconSet () {
$q.iconSet.set(mdiIconSet)
}
return {
changeIconSetToMdiIconSet
}
}如果您想在 .vue 檔案外部執行此操作（並且您不在 SSR 模式下），則您可以
import { IconSet } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v7.js'
export default () {
IconSet.set(mdiIconSet)
}變更特定圖示
如果您想將特定圖示變更為另一個圖示，您可以。這是一個範例
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
function changeQEditorHeaderIcon () {
$q.iconSet.editor.header1 = 'fas fa-font'
}
return { changeQEditorHeaderIcon }
}如果您想在 .vue 檔案外部執行此操作（並且您不在 SSR 模式下），則您可以
import { IconSet } from 'quasar'
export default () {
IconSet.props.editor.header1 = 'fas fa-font'
}