图标

QIcon组件使您可以轻松地在其他组件或页面的任何其他区域内插入图标。 Quasar当前支持:Material IconsFont AwesomeIoniconsMDIEva IconsThemify Icons

Quasar中有多种图标类型:基于Webfont,基于svg(v1.7 +)和基于图像。 您不必在网站/应用中仅使用一种类型。

TIP

相关页面:安装图标库Quasar图标集.

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

如果您使用的是基于Webfont的图标,确保您正在使用安装图标库,否则它将不会显示!

Webfont图标

<q-icon name="..." />
Quasar图标集名称名称前缀例子注意事项
material-iconsthumb_up注意下划线字符,而不是破折号或空格。
material-icons-outlinedo_o_thumb_up注意下划线字符,而不是破折号或空格; 需要Quasar 1.0.5+
material-icons-roundr_r_thumb_up注意下划线字符,而不是破折号或空格; 需要Quasar 1.0.5+
material-icons-sharps_s_thumb_up注意下划线字符,而不是破折号或空格; 需要Quasar 1.0.5+
ionicons-v4ion-, ion-md-, ion-ios-, ion-logo-ion-heart, ion-logo-npm, ion-md-airplane使用QIcon代替<ion-icon>组件;LOGO图标需要’ion-logo-'前缀
fontawesome-v5fa[s,r,l,b] fa-“fas fa-ambulance”QIcon的“name”属性与Fontawesome文档示例中的“class”属性值相同(它们在其中显示<i>标记)
mdi-v4mdi-mdi-alert-circle-outline注意破折号的使用; 仅使用mdi-v4或mdi-v3中的一种
mdi-v3mdi-mdi-alert-circle-outline注意破折号的使用; 仅使用mdi-v4或mdi-v3中的一种
eva-iconseva-eva-shield-outline, eva-activity-outline注意破折号的使用。
themifyti-ti-hand-point-up注意破折号的使用。

Svg图标

在您的网站/应用程序中仅使用svg图标有很多优点:

  • 更好的应用占用空间-最终版本中仅会包含使用过的图标(treeshaking发挥作用)
  • 质量更好的图标
  • 无需包含来自@quasar/extras或CDN的等效Web字体。

当前的缺点是,使用这些图标比使用webfont对应图标更麻烦。

注意,在下面的示例中,我们希望避免Vue observable的包装,因此我们通过created()钩子在实例上注入了图标。 如果也在data()中声明,它也将起作用,但是…开销大。

<template>
  <div>
    <q-icon :name="matMenu" />
    <q-icon :name="fasFont" />
    <q-btn :icon="mdiAbTesting" />
  </div>
</template>

<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v4'
import { fasFont } from '@quasar/extras/fontawesome-v5'

export default {
  // ...
  created () {
    this.matMenu = matMenu
    this.mdiAbTesting = mdiAbTesting
    this.fasFont = fasFont
  }
}

TIP

如果您仅使用svg图标(并且已经配置了Quasar图标集),则您的应用程序完全不需要等效的webfont。

VendorQuasar图标集名称从哪里导入图标
Material Icons (Google)svg-material-icons@quasar/extras/material-icons
MDI (Material Design Icons)svg-mdi-v4@quasar/extras/mdi-v4
Font Awesomesvg-fontawesome-v5@quasar/extras/fontawesome-v5
Ioniconssvg-ionicons-v4@quasar/extras/ionicons-v4
Eva Iconssvg-eva-icons@quasar/extras/eva-icons
Themify Iconssvg-themify@quasar/extras/themify

您还可以提供自己的svg图标。 svg图标实质上是具有以下语法的字符串:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit 0 0 24 24 viewBox)
Examples:
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 104 104
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z

// 相当于原始的svg:
<svg viewBox="0 0 104 104">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

内嵌svg

QIcon可以包含一个<svg>标记(svg的内容可以是任何内容,而不仅仅是路径)。

为何在QIcon中使用<svg>的原因是,svg将通过其属性将大小和颜色视为任何QIcon。 没有这些功能,最好不要使用QIcon来内嵌模板中的svg。

<q-icon color="accent" size="5rem">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"/>
  </svg>
</q-icon>

一些限制:

  • 不要在<svg>标签上使用“height”/“width”属性(这会阻止QIcon处理尺寸的方式)
  • 默认情况下,所有<path>都会应用“fill: currentColor” CSS; 如果您不想这样做,则将fill="none"添加到<path>标记中

图像图标

您还可以通过使用img:前缀使图标指向图像URL,而不是依赖于任何网络字体。

Quasar组件的所有与图标相关的属性都可以使用此功能。

<q-icon name="img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
<q-btn icon="img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" ... />
<q-icon name="img:statics/my/path/to/some.svg" />

TIP

请记住,您也可以将图像放置在/src/statics文件夹中并指向它们。 您并不总是需要完整的URL。

这不仅限于SVG。 您可以使用所需的任何图像类型(png、jpg,…):

<q-icon name="img:statics/bla/bla/my.png" />
<q-btn icon="img:statics/bla/bla/my.jpg" ... />
<q-input clearable clear-icon="img:statics/bla/bla/my.gif" ... />

还可以内嵌图像(svg、png、jpeg、gif …)并动态更改其样式(svg):

<q-icon name="img:data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='140' width='500'><ellipse cx='200' cy='80' rx='100' ry='50' style='fill:yellow;stroke:purple;stroke-width:2' /></svg>" />
Dynamic SVG

您还可以对图像进行base64编码并提供它。 下面的示例使用QBtn,但是在处理任何图标属性或QIcon时都涉及相同的原理:

<q-btn icon="
img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" ... />

尺寸和颜色

所有图标均为webfont图标。 这意味着您可以通过操作font-sizeCSS属性来更改大小。 而且,它们继承了当前使用的CSS文本color

Basic

对于不同Quasar组件上的icon属性,您将无法为每个平台指定图标,但是可以通过以下方法实现相同的效果:

<q-btn
  :icon="$q.platform.is.ios ? 'settings' : 'ion-ios-gear-outline'"
/>
Standard sizes

自定义映射

如果需要,可以自定义图标名称的映射。这可以通过重写$q.iconMapFn来完成。 推荐的放置位置是在/src/App.vue组件的created()钩子中。

$q.iconMapFn的语法如下:

/* 语法 */
iconMapFn (String: iconName) => Object / void 0 (undefined)

/*
 返回的对象(如果有)必须为以下形式之一:

 1. 定义如何解释图标
 {
   cls: String // 类名
   content: String // 可选,如果您使用的是连字字体,
                   // 并且需要它作为QIcon的内容
  }

  2. 本质上充当到另一个图标的映射
  {
    icon: String // 映射的图标String,将由Quasar处理,
                 // 就像原始QIcon名称就是该值一样
  }
*/

让我们现在考虑这两种情况。

1. 支持自定义图标库

当您使用自定义图标库(Quasar及其@quasar/extras软件包不附带)时,这特别有用。

created () {
  // 添加对<q-icon name =“ app:....” />的
  // 支持的示例,
  // 其中包括对Quasar组件的
  // 所有“icon”属性的支持

  this.$q.iconMapFn = (iconName) => {
    // iconName是QIcon“name”属性的内容

    // 您的自定义方法,以下
    // 仅是示例:
    if (iconName.startsWith('app:') === true) {
      // we strip the "app:" part
      const name = iconName.substring(4)

      return {
        cls: 'my-app-icon ' + name
      }
    }

    // 当我们不从iconMapFn返回任何内容时,
    // 默认的Quasar图标映射
    // 将接管
  }
}

请注意,在上面的示例中,如果图标以app:前缀开头,我们将返回一个适用于QIcon的my-app-icon类。 从CSS的角度来看,我们可以使用它来定义QIcon应该如何反应。

假设我们有自己的Web字体,称为“My App Icon”。

/*
  对于此示例,我们正在创建:
  /src/css/my-app-icon.css
*/

.my-app-icon {
  font-family: 'My App Icon';
  font-weight: 400;
}

@font-face {
  font-family: 'My App Icon';
  font-style: normal; /* 您需要什么 */
  font-weight: 400;   /* 字体.... */
  src: url("./my-app-icon.woff2") format("woff2"), url("./my-app-icon.woff") format("woff");
}

然后,我们应该编辑我们的quasar.conf.js(如果使用Quasar CLI)以将新创建的CSS文件添加到我们的应用中:

css: [
  // ....
  'my-app-icon.css'
]

并将“my-app-icon.woff2”和“my-app-icon.woff”文件添加到与“my-app-icon.css”相同的文件夹中(或其他位置,但请编辑相对路径(请参见上面的“src:”)到woff/woff2文件)。

2. 只需映射几个图标

const myIcons = {
  'app:icon1': 'img:/path/to/icon1.svg',
  'app:icon2': 'img:/path/to/icon2.svg',
  'app:copy': 'fas fa-copy',
}

// ...
created () {
  this.$q.iconMapFn = (iconName) => {
    const icon = myIcons[iconName]
    if (icon !== void 0) {
      return { icon: icon }
    }
  }
}

现在我们可以使用<q-icon name="app:copy" /><q-icon name="app:icon1" />,QIcon将处理“app:copy”和“app:icon1”就像它们被写为“fas fa-copy”和“img:/path/to/icon1.svg”一样。

QIcon API

Loading API...
Please wait...