Quasar图标集

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

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

Quasar当前支持: Material IconsFont AwesomeLine AwesomeIoniconsMDIEva IconsThemify Icons

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

TIP

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

配置默认图标集

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

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

硬编码

如果未动态确定默认的Quasar图标集(例如,不依赖于Cookie),则可以:

Quasar CLI方式

再次编辑/quasar.conf.js:

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

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

包含MDI和Fontawesome并告诉Quasar使用Fontawesome作为其组件的完整示例。

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

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

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
})

动态的(non-SSR)

Quasar CLI:如果必须动态选择所需的Quasar图标集(例如:取决于cookie),则需要创建一个启动文件:$ quasar new boot quasar-icon-set。 这将创建/src/boot/quasar-icon-set.js文件。 编辑它为:

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

export default async () => {
  const iconSetName = 'mdi-v5' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(mdi-v5|fontawesome-v5)\.js$/ */
      'quasar/icon-set/' + iconSetName
      )
      .then(setDefinition => {
        Quasar.iconSet.set(setDefinition.default)
      })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

然后将此启动文件注册到/quasar.conf.js中:

boot: [
  'quasar-icon-set'
]

始终限制动态导入

请注意Webpack魔法注释-webpackInclude的使用。 否则,所有可用的图标集文件都将被捆绑在一起,从而导致编译时间和捆绑包大小增加。 请参阅动态导入注意事项

动态的(SSR)

在处理SSR时,我们不能使用单例对象,因为这会污染会话。 结果,与上面的动态示例相反(首先阅读它!),您还必须从启动文件中指定ssrContext

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
  const iconSetName = 'mdi-v5' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(mdi-v5|fontawesome-v5)\.js$/ */
      'quasar/icon-set/' + iconSetName
      )
      .then(setDefinition => {
        // ! NOTICE ssrContext param:
        Quasar.iconSet.set(setDefinition.default, ssrContext)
      })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

在运行时更改Quasar图标集

动态更改图标集

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

import mdiIconSet from 'quasar/icon-set/mdi-v5.js'

methods: {
  changeIconSetToMdiIconSet () {
    this.$q.iconSet.set(mdiIconSet)
  }
}

动态更改特定图标

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

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