Quasar图标集

Quasar组件有自己的图标。 Quasar并不强迫您特别使用一个图标库(以便它们可以正确显示),而允许您选择应该用于其组件的图标。 这被称为“Quasar图标集”。

您可以安装多个图标库,但必须只选择一个用于Quasar组件的图标库。

Quasar当前支持: Material IconsFont AwesomeIoniconsMDIEva IconsThemify Icons

也可以将自己的图标(作为自定义svg或任何格式的图像)与任何Quasar组件一起使用,有关更多信息,请参见QIcon页面。

TIP

相关页面: 安装图标库 and QIcon组件.

安装一个Quasar图标集

Quasar图标集有两种类型:基于webfont和基于svg。

除非另有配置,否则Quasar使用Material Icons webfont作为其组件的图标集。 但是,您可以告诉Quasar使用其他图标集,但是如果它是基于Webfont的图标集,请确保将其图标库包含在您的网站/应用中(请参阅安装图标库)。

所以我们假设我们包含Ionicons,我们希望Quasar将它用于其组件。

Quasar CLI方式

再次编辑/quasar.conf.js:

framework: {
  //基于webfont的示例
  iconSet: 'fontawesome-v5'
}
framework: {
  //基于svg的示例
  iconSet: 'svg-mdi-v4'
}

有关所有可用选项,请访问GitHub 存储库。

完整的例子

以下是包含Ionicons&Fontawesome并告诉Quasar使用Fontawesome作为其组件的例子。

extras: [
  'ionicons-v4',
  'fontawesome-v5'
],
framework: {
  iconSet: 'fontawesome-v5'
}

这将使您能够在您的应用程序中同时使用Ionicons和Fontawesome webfonts,并且所有Quasar组件都将显示Fontawesome图标。

动态更改图标集

Quasar图标集是响应式的,因此如果更改$ q.iconSet对象,所有组件都将正确更新。 这是一个例子:

methods: {
  changeIconSetToFontAwesome () {
    this.$q.iconSet = require('quasar/icon-set/fontawesome-v5.js').default
  }
}

动态更改特定图标

如果要将特定图标更改为另一个图标,可以的。 这是一个例子:

methods: {
  changeQEditorHeaderIcon () {
    this.$q.iconSet.editor.header1 = 'fas fa-font'
  }
}

UMD方式

包含你的Quasar版本的Quasar图标集标签,并告诉Quasar使用它。 例:

<!-- include this after Quasar JS tag -->
<script src="https://cdn.jsdelivr.net/npm/quasar@v1.0.0/dist/icon-set/fontawesome-v5.umd.min.js"></script>
<script>
  Quasar.iconSet.set(Quasar.iconSet.fontawesomeV5)
</script>

UMD/Standalone页面上检查需要在HTML文件中包含哪些标签。

Vue CLI方式

编辑main.js:

import iconSet from 'quasar/icon-set/fontawesome-v5'
// ...
import { Quasar } from 'quasar'
// ...
Vue.use(Quasar, {
  // ...,
  iconSet: iconSet
})