Quasar图标集

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

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

Quasar当前支持: Material IconsMaterial SymbolsFont AwesomeIoniconsMDIEva IconsThemify IconsLine AwesomeBootstrap Icons.。

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

TIP

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

配置默认图标集

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

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

硬编码

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

Quasar CLI方式

再次编辑/quasar.config.js:

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

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

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

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

这将使您能够在您的应用程序中同时使用MDI和Fontawesome webfonts,并且所有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/Standalone页面上检查需要在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
})

动态的(non-SSR)

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

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

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

  try {
    iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
      Quasar.iconSet.set(setDefinition.default)
    })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

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

  try {
    await import(
      /* webpackInclude: /(mdi-v6|fontawesome-v6)\.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.config.js中:

boot: [
  'quasar-icon-set'
]

始终限制动态导入

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

动态的 (SSR)

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

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

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

  try {
    iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
      Quasar.iconSet.set(setDefinition.default, ssrContext)
    })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

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

  try {
    await import(
      /* webpackInclude: /(mdi-v6|fontawesome-v6)\.js$/ */
      'quasar/icon-set/' + iconSetName
    ).then(setDefinition => {
      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对象,所有组件都将正确更新。 这是一个例子:

// Composition API variant
import { useQuasar } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v6.js'

setup () {
  const $q = useQuasar()

  function changeIconSetToMdiIconSet () {
    $q.iconSet.set(mdiIconSet)
  }

  return {
    changeIconSetToMdiIconSet
  }
}
// Options API variant
import mdiIconSet from 'quasar/icon-set/mdi-v6.js'

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

动态更改特定图标

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

// Composition API variant
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

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