QIcon组件允许你轻松地在其他组件或页面的任何其他区域插入图标。 Quasar开箱即用支持：Material Icons、Material Symbols、Font Awesome、Ionicons、MDI、Eva Icons、Themify Icons、Line Awesome和 Bootstrap Icons。

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

Quasar中有多种图标类型：基于Webfont，基于svg和基于图像。 您不必在网站/应用中仅使用一种类型。

QIcon API

尺寸和颜色

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

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

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

Webfont图标

Webfont用法

<q-icon name="..." />

命名约定

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-”前缀开头。
• 较新的版本还有“fa-solid”、“fa-brands”、“fa-light”或“fa-regular”（pro也有“fa-sthin”和“fa-doutone”）
• 转到FontAwesome，查找所需的图标，单击它。你会找到它的页面。在图标名称（作为标题）下方，您将看到类似<i class=“fa solid fa flag”></i>的内容。结果是fa solid fa flag（也可以使用fas fa flat）。
• 注意：fas、far、fab、fla、fot和fad已弃用，在未来的主要版本中可能不可用）。

Ionicons

• 图标名称以连字符分隔，并且始终以“ion-”，“ion-md-”，“ion-ios-”或“ion-logo-”前缀开头。
• 转到Ionicons (v6)或Ionicons (v4)，查找所需的图标，然后单击它。在页面底部，将出现一个弹出窗口。 注意类似 <ion-icon name="square-outline"></ion-icon>之类的东西。 记住名称（例如“square-outline”）。根据您想要的变体（auto-detect platform、material或者iOS)，您会得到以下结果：ion-square-outline 或 ion-md-square-outline 或 ion-ios-square-outline.
• **注意：**从v5开始，Ionicons不再提供webfont。同时，他们也不再做Material或IOS的变体。

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”）并使用它。

Bootstrap Icons

• 图标名称以连字符分隔，并且总是以“bi-”前缀开头。
• 转到Bootstrap Icons, 找到所需图标。 记住它的名字（例如“bi-bug-fill”）并使用它。

Svg图标

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

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

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

Svg使用

在<template>内的用法：

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

注意，我们使用:来绑定变量而不是普通的值，这很重要。我们必须让这些变量在模板中可用。做到这一点的方法取决于你的Vue API偏好：

使用"script setup"的Composition API

这是最方便的方法。只要导入变量就足以使它们在模板中可用。

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

不使用"script setup"的Composition API

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

export default {
  // ...
  setup () {
    return {
      matMenu,
      mdiAbTesting,
      fasFont
    }
  }
}
</script>

Options API

注意在下面的例子中，我们是通过created()钩子来注入图标，而不是从data()返回图标。这是因为我们想避免Vue把它们变成响应式。因为它们是静态值，让它们成为响应式会引入一些不必要的开销。如果我们在data()中声明它们，它仍然可以工作，但性能会降低。

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

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

导入指南

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 Material符号 Outlined (Google)

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

SVG Material符号 Sharp (Google)

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

SVG Material符号 Rounded (Google)

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

SVG MDI (Material设计图标)

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

SVG Fontawesome

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

SVG Ionicons

• Ionicons v4: 图标名称采用驼峰式，并且始终以“ionMd”或“ionIos”前缀开头。
• Ionicons v5/v6: 图标名称是驼峰式，并且始终以 "ion "开头。
• Ionicons v4：进入Ionicons v4，查找所需的图标，然后单击它。在页面的底部，会出现一个弹出窗口。注意类似""的东西。记住这个名字（例如：“square-outline”）。驼峰式写这个名字，并以 “ionMd”（用于material变体）或 “ionIos”（用于iOS变体）作为前缀。
• Ionicons v5/v6：进入Ionicons v6，查找所需的图标，然后单击它。在页面的底部，会出现一个弹出窗口。注意类似""的东西。记住这个名字（例如：“square-outline”）。用 "ion "作为前缀，并将结果用驼峰式写（例如：“ionSquareOutline”）。
• Ionicons v4: 导入语句的例子: import { ionMdSquareOutline } from '@quasar/extras/ionicons-v4'.
• Ionicons v5/v6：导入语句示例："import { ionSquareOutline } from ‘@quasar/extras/ionicons-v5’`.

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 Bootstrap Icons

• 图标名称采用驼峰式，并且始终以“bi”前缀开头。
• 转到Bootstrap Icons, 查找所需的图标。记住它的名字（如“bi-bug-fill”），驼峰式大小写（如“biBugFill”）。
• 导入语句示例： import { biBugFill } from '@quasar/extras/bootstrap-icons'.

Svg图标格式

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

Syntax: "<path>&&<path>&&...|<viewBox>"
           P       P             V
                (optional)   (optional)
                             (default: 0 0 24 24)

P is a path tag with following syntax (each are attributes):
        "<d>@@<style>@@<transform>"
        (required)
            (optional)
                     (optional)

例:

// 简单的 ("<path>"):
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z

// 等同于:
<svg viewBox="0 0 24 24">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

// 使用自定义viewBox的最简单形式("<path>|<viewBox>"):
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 104 104

// 等同于:
<svg viewBox="0 0 104 104">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

// 自定义样式的路径("<path>@@<style>|<viewBox>"):
  M48,96L464,96 464,416 48,416z@@fill:none;stroke:currentColor.....|0 0 512 512

// 等同于:
<svg viewBox="0 0 512 512">
  <path d="M416,480,256,357....." style="fill:none;stroke:curren..." />
</svg>

// 自定义样式和转换的路径 ("<path>@@<style>@@transform"):
  M9 3L5 6.99h3V...@@fill:none;stroke:cu.....@@translate(10 1) rotate(180)

// 等同于:
<svg viewBox="0 0 24 24">
  <path
    d="M9 3L5 6.99h3V....."
    style="fill:none;stroke:curren..."
    transform="translate(10 1) rotate(180)"
  />
</svg>

// 自定义转换的路径  ("<path>@@@@transform"):
// (Notice style separator is still specified)

  M9 3L5 6.99h3V...@@@@translate(2 4) rotate(180)

// 等同于:
<svg viewBox="0 0 24 24">
  <path
    d="M9 3L5 6.99h3V....."
    transform="translate(2 4) rotate(180)"
  />
</svg>

// 多路径——可以有任意数量的路径 ("<path>&&<path>|<viewBox>"):
  M416,480,256,357.41,96,480V32H416Z&&M368,64L144 256 368 448 368 64z|0 0 512 512

// 等同于:
<svg viewBox="0 0 512 512">
  <path d="M416,480,256,357....." />
  <path d="M368,64L144 256 368...." />
</svg>

// 多路径，每个路径都具有样式和转换 ("<path>&&<path>|<viewBox>"):
  M9 3L5 6.99h3V...@@stroke-width:5px@@rotate(45)&&M416,480,256,...@@stroke-width:2px@@rotate(15)&&M368,64L144 2...@@stroke-width:12px@@rotate(5)|0 0 512 512

// 等同于:
<svg viewBox="0 0 512 512">
  <path
    d="M9 3L5 6.99h3V....."
    style="stroke-width:5px"
    transform="rotate(45)"
  />
  <path
    d="M416,480,256,..."
    style="stroke-width:2px"
    transform="rotate(15)"
  />
  <path
    d="M368,64L144 2..."
    style="stroke-width:12px"
    transform="rotate(5)"
  />
</svg>

SVG使用方式

此svg方法允许您将svg文件存储为静态资产并引用它们。

// File: /public/icons.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-1" viewBox="0 0 24 24">
    <path d="..."></path>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
     <path d="..."></path>
  </symbol>
</svg>

标准的HTML方式是包含该文件并指定带有“svg use”标记的图标。

<svg>
  <use xlink:href="icons.svg#icon-1"></use>
</svg>

要通过QIcon将其用于Quasar（请确保您引用的是public文件夹中的正确文件）：

<q-icon name="svguse:icons.svg#icon-1">
<!-- or -->
<q-btn-dropdown label="Custom Content" dropdown-icon="svguse:icons.svg#icon-2" />

默认情况下，父svg的viewBox为“0 0 24”。但是，您也可以指定一个自定义的：

<q-icon name="svguse:icons.svg#icon-1|10 15 40 40" />

内嵌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-v2/svg/logo.svg" />
<q-btn icon="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg" ... />

<!-- 引用自/public: -->
<q-icon name="img:my/path/to/some.svg" />

这不仅限于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>" />

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

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

自定义映射

如果需要，可以自定义图标名称的映射。这可以通过重写$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软件包不附带）时，这特别有用。

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  // 添加对<q-icon name =“ app：....” />的
  // 支持的示例，
  // 其中包括对Quasar组件的
  // 所有“icon”属性的支持

  $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.config.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. 只需映射几个图标

import { useQuasar } from 'quasar'

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

// ...
setup () {
  const $q = useQuasar()

  $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”一样。