图标

QIcon组件使您可以轻松地在其他组件或页面的任何其他区域内插入图标。 Quasar开箱即用支持:Material IconsFont AwesomeIoniconsMDIEva IconsThemify IconsLine Awesome

此外,您可以对任何图标库自行添加支持

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

TIP

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

安装

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

尺寸和颜色

QIcon的大小由CSS的font-size属性控制。 另外,QIcon继承了当前使用的CSS文本color。 为了易于使用,有QIcon的sizecolor属性。

Basic

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

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

Webfont图标

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,d,b] fa-“fas fa-ambulance”QIcon的“name”属性与Fontawesome文档示例中的“class”属性值相同(它们在其中显示<i>标记)
mdi-v5/v4/v3mdi-mdi-alert-circle-outline注意破折号的使用; 仅使用mdi-v5、mdi-v4或mdi-v3中的一种
eva-iconseva-eva-shield-outline, eva-activity-outline注意破折号的使用。
themifyti-ti-hand-point-up注意破折号的使用。
line-awesomela[s,r,l,d,b] la-“las la-atom”QIcon的“name”属性与Line Awesome文档示例中的“class”属性值相同(它们在其中显示<i>标签); *Quasar 1.8+ & @quasar/extras v1.5+

命名约定

Material Icons (Google)

  • 图标名称始终为蛇形(用下划线将单词连接起来的命名方式)。
  • 转到Material图标, 查找所需的图标。 记住它的名称(例如“all_inbox”)并使用它。

MDI (Material设计图标)

  • 图标名称以连字符分隔,并且始终以“mdi-”前缀开头。
  • 转到MDI,查找所需的图标,然后单击它。 将出现一个对话框。 获取标题(例如“ account-key”),在其前面加上 mdi-”,然后得到结果(例如“mdi-account-key”)。

Fontawesome

  • 图标名称以连字符分隔,并且始终以“fas fa-”,“fab fa-”,“fal fa-”或“far fa-”前缀开头。
  • 转到FontAwesome,查找所需的图标,然后单击它。 您将转到其页面。 在图标名称(作为标题)下方,您会看到类似<i class="fas fa-air-freshener"></i>的内容。 结果是fas fa-air-freshener

Ionicons

  • 图标名称以连字符分隔,并且始终以“ion-”,“ion-md-”,“ion-ios-”或“ion-logo-”前缀开头。
  • 转到Ionicons,查找所需的图标,然后单击它。在页面底部,将出现一个弹出窗口。 注意类似 <ion-icon name="square-outline"></ion-icon>之类的东西。 记住名称(例如“square-outline”)。根据您想要的变体(auto-detect platform、material或者iOS),您会得到以下结果:ion-square-outlineion-md-square-outlineion-ios-square-outline.

Eva Icons

  • 图标名称以连字符分隔,并且始终以“eva-”前缀开头。
  • 转到Eva图标,查找所需的图标,然后单击它。将出现一个对话框。 从那里获取名称(例如,“attach-outline”),在名称前加上“eva”,结果为“eva-attach-outline”。

Themify

  • 图标名称以连字符分隔,并且始终以“ ti-”前缀开头。
  • 转到Themify,查找所需的图标。 记住它的名称(例如“ti-arrow-top-right-right”)并使用它。

Line Awesome

  • 图标名称以连字符分隔,并且始终以“la”前缀开头。
  • 转到Line Awesome,找到所需图标,然后单击它。 将出现一个对话框。 您会看到类似 <i class="lab la-behance-square"></i>的内容。 记住它的名称(例如“lab la-behance-square”)并使用它。

Svg图标

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

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

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

Svg usage

注意,在下面的示例中,我们希望避免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-v5'
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
Material Icons Outlined (Google)svg-material-icons-outlined@quasar/extras/material-icons-outlined@quasar/extras v1.9+; Quasar v1.13+
Material Icons Sharp (Google)svg-material-icons-sharp@quasar/extras/material-icons-sharp@quasar/extras v1.9+; Quasar v1.13+
Material Icons Round (Google)svg-material-icons-round@quasar/extras/material-icons-round@quasar/extras v1.9+; Quasar v1.13+
MDI (Material Design Icons)svg-mdi-v5@quasar/extras/mdi-v5
Font Awesomesvg-fontawesome-v5@quasar/extras/fontawesome-v5
Ionicons v5svg-ionicons-v5@quasar/extras/ionicons-v5@quasar/extras v1.7+
Ionicons v4svg-ionicons-v4@quasar/extras/ionicons-v4
Eva Iconssvg-eva-icons@quasar/extras/eva-icons
Themify Iconssvg-themify@quasar/extras/themify
Line Awesomesvg-line-awesome@quasar/extras/line-awesome@quasar/extras v1.5+

导入指南

SVG图标由@quasar/extras提供(尽管您也可以提供您自己的SVG图标!)。 这是import语法的来龙去脉:

SVG Material图标 (Google)

  • 图标名称采用驼峰式,并且始终以“mat”前缀开头。
  • 转到Material图标,查找所需的图标并记住其名称(例如“all_inbox”),在其前面加上“mat”,然后对结果进行驼峰式处理(例如“matAllInbox”)。
  • 导入语句示例:import { matAllInbox } from '@quasar/extras/material-icons'.

SVG Material图标 Outlined (Google)

  • 图标名称采用驼峰式,并且始终以“outlined”前缀开头。
  • 转到Material图标,查找所需的图标并记住其名称(例如“all_inbox”),在其前面加上“outlined”,然后驼峰写出结果(例如 。“outlinedAllInbox”)。
  • 导入语句示例:import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'.

SVG Material图标 Sharp (Google)

  • 图标名称采用驼峰式,并且始终以“sharp”前缀开头。
  • 转到Material图标,查找所需的图标并记住其名称(例如“all_inbox”),在其前面加上“sharp”,然后驼峰写出结果(例如“sharpAllInbox”)。
  • 导入语句示例:import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'.

SVG Material图标 Round (Google)

  • 图标名称采用驼峰式,并且始终以“round”前缀开头。
  • 转到Material图标,查找所需的图标并记住其名称(例如“all_inbox”),在其前面加上“round”,然后驼峰式显示( 例如“roundAllInbox”)。
  • 导入语句示例:import { roundAllInbox } from '@quasar/extras/material-icons-round'.

SVG MDI (Material设计图标)

  • 图标名称采用驼峰式,并且始终以“mdi”前缀开头。
  • 转到MDI,查找所需的图标,然后单击它。 将出现一个对话框。 获取标题(例如“account-key”),在名称前加上“mdi”,然后驼峰式(例如“mdiAccountKey”)。
  • 导入语句示例:import { mdiAccountKey } from '@quasar/extras/mdi-v5'.

SVG Fontawesome

  • 图标名称采用驼峰式,并且始终以“fas”、“fab”、“fal”或“far”前缀开头。
  • 转到FontAwesome,查找所需的图标,然后单击它。 您将转到其页面。 在图标名称(作为标题)下方,您会看到类似<i class="fas fa-air-freshener"></i>的内容。 这将转化为fasAirFreshner。 标签的前缀很重要。
  • 请注意,由于许可证的原因,我们无法以svg格式提供图标的“Pro”版。
  • 导入语句示例:import { fasAirFreshener } from '@quasar/extras/fontawesome-v5'.

SVG Ionicons

  • 图标名称采用驼峰式,并且始终以“ionMd”或“ionIos”前缀开头。
  • 转到Ionicons v5Ionicons v4找到所需的图标,然后单击它。 在页面底部,将出现一个弹出窗口。 注意类似<ion-icon name="square-outline"></ion-icon>之类的东西。 记住名称(例如“square-outline”)。 将此名称用驼峰式大小写,并在其前面加上“ionMd”(对于材料变体)或“ionIos”(对于iOS变体)。
  • 导入语句示例:import { ionMdSquareOutline } from '@quasar/extras/ionicons-v5' (or -v4).

SVG Eva Icons

  • 图标名称采用驼峰式,并且始终以“eva”前缀开头。
  • 转到Eva Icons,查找所需的图标,然后单击它。 将出现一个对话框。 从那里获取名称(例如“attach-outline”),在名称前加上“eva”并用驼峰式表示(例如“evaAttachOutline”)。
  • 导入语句示例:import { evaAttachOutline } from '@quasar/extras/eva-icons'.

SVG Themify

  • 图标名称采用驼峰式,并且始终以“ti”前缀开头。
  • 转到Themify,查找所需的图标。 记住其名称(例如“ti-arrow-top-right-right”),在名称前加上“ti”,然后用驼峰式大小写(例如“tiArrowTopRight”)。
  • 导入语句示例:import { tiArrowTopRight } from '@quasar/extras/themify'.

SVG Line Awesome

  • 图标名称采用驼峰式,并且始终以“la”前缀开头。
  • 转到Line Awesome,查找所需的图标,然后单击它。 将出现一个对话框。 您会看到类似<i class="lab la-behance-square"></i>的内容。 这将转换为:laBehanceSquare。 不过,有一个特殊情况(仅适用于纯色图标!):如果“la-”之前的前缀为“las”(例如,<i class="las la-atom"></i>),则您 需要在“la-atom”后缀“-solid”并使用驼峰式大小写(例如,laAtomSolid)。
  • 导入语句示例:import { laBehanceSquare } from '@quasar/extras/line-awesome'.

Svg图标格式

您还可以提供自己的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...