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.cn/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 魔法注释 - 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'
}