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

¥The QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar supports out of the box: Material Icons , Material Symbols , Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome and Bootstrap Icons.

此外，你可以将 自己添加支持 用于任何图标库。

¥Furthermore you can add support by yourself for any icon lib.

Quasar 中有多种类型的图标：基于 webfont、svg 和图片。你不必在你的网站/应用中只使用一种类型。

¥There are multiple types of icons in Quasar: webfont-based, svg-based and image-based. You are not bound to using only one type in your website/app.

尺寸和颜色(Size & colors)

¥Size & colors

QIcon 的大小由 font-size CSS 属性控制。此外，QIcon 继承了 color 当前使用的 CSS 文本。为了方便使用，我们提供了 QIcon size 和 color 属性。

¥The sizing of a QIcon is manipulated by the font-size CSS property. Also, QIcon inherits the current CSS text color used. For ease of use there are the QIcon size and color props.

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

¥For icon properties on different Quasar components you won’t have the means to specify an icon for each platform, but you can achieve the same effect with:

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

Web 字体图标(Webfont icons)

¥Webfont icons

Webfont 使用(Webfont usage)

¥Webfont usage

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

命名约定(Naming convention)

¥Naming convention

Material 图标 (Google)(Material Icons (Google))

¥Material Icons (Google)

• 图标名称始终采用蛇形命名法。

  ¥Icon names are always in snake_case.

• 转到 Material 图标和符号，查找你想要的图标。记住它的名称（例如 “all_inbox”）并使用它。

  ¥Go to Material Icons and Symbols, look for your desired icon. Remember its name (eg. “all_inbox”) and use it.

MDI（Material Design 图标）(MDI (Material Design Icons))

¥MDI (Material Design Icons)

• 图标名称采用连字符分隔的大小写，并始终以 “mdi-” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “mdi-” prefix.

• 转到 MDI，查找你想要的图标，然后点击它。将出现一个对话框。获取标题（例如 “account-key”），并在其前添加 “mdi-” 前缀，结果为驼峰命名法（例如 “mdi-account-key”）。

  ¥Go to MDI, look for your desired icon, click on it. A dialog box will appear. Get the title (eg. “account-key”), prefix it with “mdi-” and you get the result (eg. “mdi-account-key”).

Fontawesome(Fontawesome)

• 图标名称采用连字符分隔的大小写，并始终以 “法斯法-”、“棒棒-”、“发发-” 或 “远发-” 前缀开头。

  ¥Icon names are in hyphen-serapated case and always begin with “fas fa-”, “fab fa-”, “fal fa-” or “far fa-” prefixes.

• 较新版本还有 fa-solid、fa-brands、fa-light 或 fa-regular（专业版还有 fa-thin 和 fa-duotone）

  ¥Newer versions also have fa-solid, fa-brands, fa-light or fa-regular (pro also has fa-thin, fa-duotone)

• 转到 FontAwesome，查找你想要的图标，然后点击它。你将进入其页面。在图标名称（作为标题）下方，你将看到类似 <i class="fa-solid fa-flag"></i> 的内容。结果是 fa-solid fa-flag（你也可以使用 fas fa-flag）。

  ¥Go to FontAwesome, look for your desired icon, click on it. You’ll get to its page. Below the icon name (as title), you will see something like <i class="fa-solid fa-flag"></i>. The result is fa-solid fa-flag (you can also use fas fa-flag).

• 注意：fas、far、fab、fal、fat 和 fad 已弃用，可能在未来的主要版本中不可用。

  ¥Note: fas, far, fab, fal, fat and fad are deprecated and may not be available in future major versions).

Ionicons(Ionicons)

• 图标名称采用连字符分隔的大小写，并始终以 “ion-”、“ion-md-”、“ion-ios-” 或 “ion-logo-” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “ion-”, “ion-md-”, “ion-ios-” or “ion-logo-” prefixes.

• 转到 Ionicons (v4)，查找你想要的图标，然后点击它。页面底部会弹出一个窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “square-outline”）。根据你想要的变体（自动检测平台、Material 或 iOS），你将获得以下结果：ion-square-outline 或 ion-md-square-outline 或 ion-ios-square-outline。

  ¥Go to Ionicons (v4), look for your desired icon, and click on it. At the bottom of the page, a popup will appear. Notice something like <ion-icon name="square-outline"></ion-icon>. Remember the name (eg. “square-outline”). Based on the variant that you want (auto-detect platform, material, or iOS), you’d get the result: ion-square-outline or ion-md-square-outline or ion-ios-square-outline.

• 注意：从 v5 开始，Ionicons 不再提供 Web 字体。此外，它们不再具有 Material 或 iOS 版本。

  ¥Note: Starting with v5, Ionicons no longer supplies a webfont. Also, they no longer have Material or IOS variants.

Eva 图标(Eva Icons)

¥Eva Icons

• 图标名称采用连字符分隔的大小写，并始终以 “eva-” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “eva-” prefix.

• 转到 Eva 图标，查找你想要的图标，然后点击它。将出现一个对话框。从中获取名称（例如 “attach-outline”），并在其前添加 “eva” 前缀，结果为 “eva-attach-outline”。

  ¥Go to Eva Icons, look for your desired icon, click on it. A dialog box will appear. Get the name from there (eg. “attach-outline”), prefix it with “eva” and the result is “eva-attach-outline”.

Themify(Themify)

• 图标名称采用连字符分隔的大小写，并始终以 “ti-” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “ti-” prefix.

• 转到 Themify，查找你想要的图标。记住它的名称（例如 “ti-arrow-top-right”）并使用它。

  ¥Go to Themify, look for your desired icon. Remember its name (eg. “ti-arrow-top-right”) and use it.

Line Awesome(Line Awesome)

• 图标名称采用连字符分隔的大小写，并始终以 “la” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “la” prefix.

• 转到 Line Awesome，查找你想要的图标，然后点击它。将出现一个对话框。你会看到类似 <i class="lab la-behance-square"></i> 的内容。记住它的名称（例如 “lab la-behance-square”）并使用它。

  ¥Go to Line Awesome, look for your desired icon, click on it. A dialog box will appear. You’ll see something like <i class="lab la-behance-square"></i>. Remember its name (eg. “lab la-behance-square”) and use it.

Bootstrap 图标(Bootstrap Icons)

¥Bootstrap Icons

• 图标名称采用连字符分隔的大小写，并始终以 “bi-” 前缀开头。

  ¥Icon names are in hyphen-separated case and always begin with “bi-” prefix.

• 转到 Bootstrap 图标，查找你想要的图标。记住它的名称（例如 “bi-bug-fill”）并使用它。

  ¥Go to Bootstrap Icons, look for your desired icon. Remember its name (eg. “bi-bug-fill”) and use it.

Svg 图标(Svg icons)

¥Svg icons

在你的网站/应用中仅使用 svg 图标有很多优势：

¥There are many advantages of using only svg icons in your website/app:

• 更佳的应用占用空间 - 最终构建版本中仅包含已使用的图标（树状图优化正在实现）

  ¥Better app footprint – only used icons will be included in the final build (treeshaking in action)

• 更高质量的图标

  ¥Better quality icons

• 无需从 @quasar/extras 或 CDN 引入等效的 Web 字体。

  ¥No need for including equivalent webfonts from @quasar/extras or CDN.

目前的缺点是，使用这些图标比使用相应的 Web 字体更繁琐。

¥The current disadvantage is that it is more tedious to use these icons than their webfont counterpart.

SVG 使用(Svg usage)

¥Svg usage

<template> 内部使用：

¥Usage inside the <template>:

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

请注意，我们使用 : 绑定变量而不是纯值，这很重要。我们必须将这些变量提供给模板。具体方法取决于你的 Vue API 偏好设置：

¥Notice that we are using : to bind variables instead of plain values, it’s important. We must make those variables available to the template. The way to do that depends on your Vue API preference:

带 “脚本设置” 的 Composition API(Composition API with “script setup”)

¥Composition API with “script setup”

这是最方便的方式。只需导入变量即可使其可用于模板。

¥This is the most convenient way. Just importing the variables is enough to make them available to the template.

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

不带 “脚本设置” 的 Composition API(Composition API without “script setup”)

¥Composition API without “script setup”

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

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

选项 API(Options API)

¥Options API

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

¥Notice in the example below that we are injecting the icons through the created() hook instead of returning them from data(). That is because we want to avoid Vue from making them reactive. Since they are static values, making them reactive would introduce some unnecessary overhead. It would still work if we declare them in data(), but it would be less performant.

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

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

导入指南(Import guide)

¥Import guide

SVG 图标由 @quasar/extras 提供（当然，你也可以提供 你自己的 svg 图标！）。以下是导入语法的详细信息：

¥Svg icons are supplied by @quasar/extras (although you can supply your own svg icons too!). Here’s the ins and outs of the import syntax:

SVG Material 图标（谷歌）(SVG Material Icons (Google))

¥SVG Material Icons (Google)

• 图标名称采用驼峰命名法，并始终以 “mat” 前缀开头。

  ¥Icon names are in camel-case and always begin with “mat” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “mat” 前缀，并将结果使用驼峰命名法（例如 “matAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “mat” and camel-case the result (eg. “matAllInbox”).

• 导入语句示例：import { matAllInbox } from '@quasar/extras/material-icons'。

  ¥Import statement example: import { matAllInbox } from '@quasar/extras/material-icons'.

SVG Material 图标轮廓（谷歌）(SVG Material Icons Outlined (Google))

¥SVG Material Icons Outlined (Google)

• 图标名称采用驼峰命名法，并始终以 “outlined” 前缀开头。

  ¥Icon names are in camel-case and always begin with “outlined” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “outlined” 前缀，并将结果使用驼峰命名法（例如 “outlinedAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “outlined” and camel-case the result (eg. “outlinedAllInbox”).

• 导入语句示例：import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'。

  ¥Import statement example: import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'.

SVG Material 图标锐化 (谷歌)(SVG Material Icons Sharp (Google))

¥SVG Material Icons Sharp (Google)

• 图标名称采用驼峰命名法，并始终以 “sharp” 前缀开头。

  ¥Icon names are in camel-case and always begin with “sharp” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “sharp” 前缀，并将结果使用驼峰命名法（例如 “sharpAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “sharp” and camel-case the result (eg. “sharpAllInbox”).

• 导入语句示例：import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'。

  ¥Import statement example: import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'.

SVG Material 圆形图标(谷歌)(SVG Material Icons Round (Google))

¥SVG Material Icons Round (Google)

• 图标名称采用驼峰命名法，并始终以 “round” 前缀开头。

  ¥Icon names are in camel-case and always begin with “round” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “round” 前缀，并将结果使用驼峰命名法（例如 “roundAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “round” and camel-case the result (eg. “roundAllInbox”).

• 导入语句示例：import { roundAllInbox } from '@quasar/extras/material-icons-round'。

  ¥Import statement example: import { roundAllInbox } from '@quasar/extras/material-icons-round'.

SVG Material 符号轮廓化 (谷歌)(SVG Material Symbols Outlined (Google))

¥SVG Material Symbols Outlined (Google)

• 图标名称采用驼峰命名法，并始终以 “symOutlined” 前缀开头。

  ¥Icon names are in camel-case and always begin with “symOutlined” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “symOutlined” 前缀，并将结果使用驼峰命名法（例如 “symOutlinedAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “symOutlined” and camel-case the result (eg. “symOutlinedAllInbox”).

• 导入语句示例：import { symOutlinedAllInbox } from '@quasar/extras/material-symbols-outlined'。

  ¥Import statement example: import { symOutlinedAllInbox } from '@quasar/extras/material-symbols-outlined'.

SVG Material 符号锐化 (谷歌)(SVG Material Symbols Sharp (Google))

¥SVG Material Symbols Sharp (Google)

• 图标名称采用驼峰命名法，并始终以 “symSharp” 前缀开头。

  ¥Icon names are in camel-case and always begin with “symSharp” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “symSharp” 前缀，并将结果使用驼峰命名法（例如 “symSharpAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “symSharp” and camel-case the result (eg. “symSharpAllInbox”).

• 导入语句示例：import { symSharpAllInbox } from '@quasar/extras/material-symbols-sharp'。

  ¥Import statement example: import { symSharpAllInbox } from '@quasar/extras/material-symbols-sharp'.

SVG Material 符号圆角化 (谷歌)(SVG Material Symbols Rounded (Google))

¥SVG Material Symbols Rounded (Google)

• 图标名称采用驼峰命名法，并始终以 “symRounded” 前缀开头。

  ¥Icon names are in camel-case and always begin with “symRounded” prefix.

• 转到 Material 图标，查找你想要的图标并记住其名称（例如 “all_inbox”），在其前面加上 “symRounded” 前缀，并将结果使用驼峰命名法（例如 “symRoundedAllInbox”）。

  ¥Go to Material Icons, look for your desired icon and remember its name (eg. “all_inbox”), prefix it with “symRounded” and camel-case the result (eg. “symRoundedAllInbox”).

• 导入语句示例：import { symRoundedAllInbox } from '@quasar/extras/material-symbols-rounded'。

  ¥Import statement example: import { symRoundedAllInbox } from '@quasar/extras/material-symbols-rounded'.

SVG MDI（Material Design 图标）(SVG MDI (Material Design Icons))

¥SVG MDI (Material Design Icons)

• 图标名称采用驼峰命名法，并始终以 “mdi” 前缀开头。

  ¥Icon names are in camel-case and always begin with “mdi” prefix.

• 转到 MDI，查找你想要的图标，然后点击它。将出现一个对话框。获取标题（例如 “account-key”），并在其前添加 “mdi” 前缀，然后使用驼峰命名法将结果改为驼峰命名法（例如 “mdiAccountKey”）。

  ¥Go to MDI, look for your desired icon, click on it. A dialog box will appear. Get the title (eg. “account-key”), prefix it with “mdi” and camel-case the result (eg. “mdiAccountKey”).

• 导入语句示例：import { mdiAccountKey } from '@quasar/extras/mdi-v7'。

  ¥Import statement example: import { mdiAccountKey } from '@quasar/extras/mdi-v7'.

SVG Fontawesome(SVG Fontawesome)

• 图标名称采用驼峰命名法，并始终以 “fas”、“fab”、“fal” 或 “far” 前缀开头。

  ¥Icon names are in camel-case and always begin with “fas”, “fab”, “fal” or “far” prefixes.

• 转到 FontAwesome，查找你想要的图标，然后点击它。你将进入其页面。在图标名称（作为标题）下方，你将看到类似 <i class="fas fa-flag"></i> 的内容。这将转换为 fasFlag。标签的前缀很重要。

  ¥Go to FontAwesome, look for your desired icon, click on it. You’ll get to its page. Below the icon name (as title), you will see something like <i class="fas fa-flag"></i>. This would translate to fasFlag. The prefix from the tag is important.

• 请注意，由于许可证原因，我们无法提供 SVG 格式的 “专业版” 版本图标。

  ¥Note that we cannot supply the “Pro” version of the icons in svg format because of the license.

• 导入语句示例：import { fasFlag } from '@quasar/extras/fontawesome-v6'。

  ¥Import statement example: import { fasFlag } from '@quasar/extras/fontawesome-v6'.

• Quasar SVG 表单仍在使用 fas、far 和 fab，而不是较新的 fa-solid、fa-regular 和 fa-brands。

  ¥The Quasar SVG form is still using fas, far and fab, instead of the newer fa-solid, fa-regular and fa-brands.

SVG Ionicons(SVG Ionicons)

• Ionicons v4：图标名称采用驼峰命名法，并始终以 “ionMd” 或 “ionIos” 前缀开头。

  ¥Ionicons v4: Icon names are in camel-case and always begin with “ionMd” or “ionIos” prefixes.

• Ionicons v5/v6：图标名称采用驼峰命名法，并始终以 “ion” 前缀开头。

  ¥Ionicons v5/v6: Icon names are in camel-case and always begin with “ion” prefix.

• Ionicons v4：转到 Ionicons v4，查找你想要的图标，然后点击它。页面底部会弹出一个窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “square-outline”）。将此名称采用驼峰命名法，并在其前面加上 “ionMd”（用于 Material 版本）或 “ionIos”（用于 iOS 版本）。

  ¥Ionicons v4: Go to Ionicons v4, look for your desired icon, click on it. At the bottom of the page there will appear a popup. Notice something like <ion-icon name="square-outline"></ion-icon>. Remember the name (eg. “square-outline”). Camel-case this name and prefix it with either “ionMd” (for material variant) or “ionIos” (for iOS variant).

• Ionicons v5/v6：转到 Ionicons v6，查找你想要的图标，然后点击它。页面底部会弹出一个窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “square-outline”）。以 “ion” 为前缀，并使用驼峰命名法（例如 “ionSquareOutline”）。

  ¥Ionicons v5/v6: Go to Ionicons v6, look for your desired icon, click on it. At the bottom of the page there will appear a popup. Notice something like <ion-icon name="square-outline"></ion-icon>. Remember the name (eg. “square-outline”). Prefix it with “ion” and camel-case the result (eg. “ionSquareOutline”).

• Ionicons v4：导入语句示例：import { ionMdSquareOutline } from '@quasar/extras/ionicons-v4'。

  ¥Ionicons v4: Import statement example: import { ionMdSquareOutline } from '@quasar/extras/ionicons-v4'.

• Ionicons v5/v6：导入语句示例：import { ionSquareOutline } from '@quasar/extras/ionicons-v5'。

  ¥Ionicons v5/v6: Import statement example: import { ionSquareOutline } from '@quasar/extras/ionicons-v5'.

SVG Eva 图标(SVG Eva Icons)

¥SVG Eva Icons

• 图标名称采用驼峰命名法，并始终以 “eva” 前缀开头。

  ¥Icon names are in camel-case and always begin with “eva” prefix.

• 转到 Eva 图标，查找你想要的图标，然后点击它。将出现一个对话框。从中获取名称（例如 “attach-outline”），在其前面添加 “eva” 前缀，并使用驼峰命名法处理结果（例如 “evaAttachOutline”）。

  ¥Go to Eva Icons, look for your desired icon, click on it. A dialog box will appear. Get the name from there (eg. “attach-outline”), prefix it with “eva” and camel-case the result (eg. “evaAttachOutline”).

• 导入语句示例：import { evaAttachOutline } from '@quasar/extras/eva-icons'。

  ¥Import statement example: import { evaAttachOutline } from '@quasar/extras/eva-icons'.

SVG Themify(SVG Themify)

• 图标名称采用驼峰命名法，并始终以 “ti” 前缀开头。

  ¥Icon names are in camel-case and always begin with “ti” prefix.

• 转到 Themify，查找你想要的图标。记住它的名称（例如 “ti-arrow-top-right”），在其前面加上 “ti” 前缀，并使用驼峰命名法（例如 “tiArrowTopRight”）。

  ¥Go to Themify, look for your desired icon. Remember its name (eg. “ti-arrow-top-right”), prefix it with “ti” and camel-case the result (eg. “tiArrowTopRight”).

• 导入语句示例：import { tiArrowTopRight } from '@quasar/extras/themify'。

  ¥Import statement example: import { tiArrowTopRight } from '@quasar/extras/themify'.

SVG Line Awesome(SVG Line Awesome)

• 图标名称采用驼峰命名法，并始终以 “la” 前缀开头。

  ¥Icon names are in camel-case and always begin with “la” prefix.

• 转到 Line Awesome，查找你想要的图标，然后点击它。将出现一个对话框。你会看到类似 <i class="lab la-behance-square"></i> 的内容。这将转换为：laBehanceSquare。但有一个特殊情况（仅适用于实心图标！）：如果 “la-” 前的前缀是 “las”（例如 <i class="las la-atom"></i>），则需要在 “la-atom” 后添加 “-solid” 后缀，并使用驼峰命名法（例如 laAtomSolid）。

  ¥Go to Line Awesome, look for your desired icon, click on it. A dialog box will appear. You’ll see something like <i class="lab la-behance-square"></i>. This would translate to: laBehanceSquare. There is a special case though (only for solid icons!): if the prefix before “la-” is “las” (eg. <i class="las la-atom"></i>), then you need to suffix “la-atom” with “-solid” and camel-case the result (eg. laAtomSolid).

• 导入语句示例：import { laBehanceSquare } from '@quasar/extras/line-awesome'。

  ¥Import statement example: import { laBehanceSquare } from '@quasar/extras/line-awesome'.

SVG Bootstrap 图标(SVG Bootstrap Icons)

¥SVG Bootstrap Icons

• 图标名称采用驼峰命名法，并始终以 “bi” 前缀开头。

  ¥Icon names are in camel-case and always begin with “bi” prefix.

• 转到 Bootstrap 图标，查找你想要的图标。记住它的名称（例如 “bi-bug-fill”），并使用驼峰命名法（例如 “biBugFill”）。

  ¥Go to Bootstrap Icons, look for your desired icon. Remember its name (eg. “bi-bug-fill”), camel-case the result (eg. “biBugFill”).

• 导入语句示例：import { biBugFill } from '@quasar/extras/bootstrap-icons'。

  ¥Import statement example: import { biBugFill } from '@quasar/extras/bootstrap-icons'.

Svg 图标格式(Svg icon format)

¥Svg icon format

你还可以提供自己的 SVG 图标。SVG 图标本质上是一个字符串，其语法如下：

¥You can also supply your own svg icons. An svg icon is essentially a String with the following syntax:

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)

示例：

¥Examples:

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

// equivalent to:
<svg viewBox="0 0 24 24">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

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

// equivalent to:
<svg viewBox="0 0 104 104">
  <path d="M9 3L5 6.99h3V....."/>
</svg>

// Path with custom style ("<path>@@<style>|<viewBox>"):
  M48,96L464,96 464,416 48,416z@@fill:none;stroke:currentColor.....|0 0 512 512

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

// Path with custom style and transform ("<path>@@<style>@@transform"):
  M9 3L5 6.99h3V...@@fill:none;stroke:cu.....@@translate(10 1) rotate(180)

// equivalent to:
<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 with custom transform ("<path>@@@@transform"):
// (Notice style separator is still specified)

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

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

// Multi-paths -- any number of paths are possible ("<path>&&<path>|<viewBox>"):
  M416,480,256,357.41,96,480V32H416Z&&M368,64L144 256 368 448 368 64z|0 0 512 512

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

// Multi-paths, each with style and transform ("<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

// equivalent to:
<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-use way)

¥SVG-use way

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

¥This svg method allows you to store the SVG files as static assets and reference them.

// 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 标签指定图标。

¥The standard HTML way is to include the file and specify the icon with the svg use tag.

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

要通过 QIcon 在 Quasar 中使用它（请确保你引用了公共文件夹中的正确文件）：

¥To use this with Quasar through QIcon (make sure that you are referencing the correct file from your public folder):

<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 24”。但是，你也可以指定一个自定义的：

¥By default, the parent svg’s viewBox is “0 0 24 24”. However, you can also specify a custom one:

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

内联 svg(Inlined svg)

¥Inlined svg

如果你不想使用上面的 webfont 或 svg 变体，请注意 QIcon 也支持一个内联 <svg> 标签（svg 的内容可以是任何内容，而不仅仅是路径）。

¥If you don’t want to use the webfont or svg variants from above, note that QIcon also supports one inlined <svg> tag (the content of the svg can be anything, not only a path).

在 QIcon 中使用 <svg> 的原因是，svg 将通过其 props 遵循与任何 QIcon 相同的大小和颜色。如果没有这些功能，最好在模板中内联 svg，而不使用 QIcon 进行封装。

¥Reasoning on why to use an <svg> in a QIcon is that the svg will respect the size and color as any QIcon through its props. Without these features, you’re better off inlining the svg in your templates without wrapping with QIcon.

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

一些限制：

¥Some limitations:

• 不要在 <svg> 标签上使用 “height”/“width” 属性（这会破坏 QIcon 处理大小的方式）

  ¥do not use “height”/“width” attributes on the <svg> tag (it will break QIcon’s way of handling the size)

• 所有 <path> 都将包含 "fill:默认应用“currentColor”CSS；如果你不想这样，请在 <path> 标签中添加 fill="none"。

  ¥all <path>s will have “fill: currentColor” CSS applied by default; if you don’t want that, then add fill="none" to the <path> tag

图片图标(Image icons)

¥Image icons

你还可以使用 img: 前缀，使图标指向图片 URL，而不是依赖任何 Web 字体。

¥You can also make an icon point to an image URL instead of relying on any webfont, by using the img: prefix.

Quasar 组件的所有图标相关属性都可以利用这一点。

¥All icon related props of Quasar components can make use of this.

<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" ... />

<!-- reference from /public: -->
<q-icon name="img:my/path/to/some.svg" />

这不仅限于 SVG。你可以使用任何你想要的图片类型（png、jpg 等）：

¥This is not restricted to SVG only. You can use whatever image type you want (png, jpg, …):

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

还可以内联图片（svg、png、jpeg、gif……）并动态更改其样式（svg）：

¥It is also possible to inline the image (svg, png, jpeg, gif…) and dynamically change its style (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 时都涉及相同的原理：

¥You can also base64 encode an image and supply it. The example below is with a QBtn, but the same principle is involved when dealing with any icon prop or with QIcon:

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

自定义映射(Custom mapping)

¥Custom mapping

如果你愿意，你可以自定义图标名称的映射。这可以通过提供自定义图标映射函数来实现。有几种方法可以提供一个：

¥Should you want, you can customize the mapping of icon names. This can be done by providing a custom icon map function. There are several ways to provide one:

• 在入口文件中设置 IconSet.iconMapFn：

  ¥Set IconSet.iconMapFn in an entry file:

  • 如果使用 Quasar CLI（结合 Vite 或 Webpack），则在启动文件中

    ¥In a boot file if using Quasar CLI (with Vite or Webpack)

  • 如果使用 Quasar Vite 插件，则在 main.js/main.ts（或类似组件）中

    ¥In main.js/main.ts(or similar) if using Quasar Vite plugin

  • 如果使用 UMD，则可以在任何合适的文件或脚本标签中导入。

    ¥In any suitable file or script tag if using UMD

• 在根组件中设置 $q.iconMapFn，例如 App.vue：

  ¥Set $q.iconMapFn in the root component, e.g. App.vue:

  • 如果使用 Composition API 和 <script setup>，则在顶层

    ¥At the top-level if using Composition API with <script setup>

  • 如果使用 Composition API，则在 setup() 函数中添加

    ¥In the setup() function if using Composition API

  • 如果使用 Options API，则在 created() 钩子中添加

    ¥In the created() hook if using Options API

• 在 Quasar Vue 插件选项 > 配置中设置 iconMapFn，例如 app.use(Quasar, { config: { iconMapFn } })（适用于 Quasar CLI 以外的版本）。

  ¥Set iconMapFn in Quasar Vue plugin options > config, e.g. app.use(Quasar, { config: { iconMapFn } }) (for flavours other than Quasar CLI).

在下面的用例示例中，我们将使用 $q.iconMapFn 和 <script setup> 的方法，但同样的原则也适用于其他方法。

¥We will use the $q.iconMapFn approach using <script setup> in the use case examples below, but the same principle applies to the other methods.

iconMapFn 的结构如下：

¥The structure of iconMapFn is as follows:

type GlobalQuasarIconMapFn = (
  iconName: string
) =>
  // Map to another existing icon
  {
    icon: string  // the mapped icon string, which will be handled
                  // by Quasar as if the original QIcon name was this value
  } |
  // Define how to interpret the icon
  {
    cls: string;     // class name(s)
    content?: string // optional, in case you are using a ligature font
                     // and you need it as content of the QIcon
  } |
  // Leave it as is, default Quasar handling
  void;

映射图标不仅会影响 QIcon，还会影响任何其他使用图标的 Quasar 组件，例如 QBtn、QInput 等。

¥Mapping icons will not only affect QIcon, but also any other Quasar component that uses icons like QBtn, QInput, and more.

用例 1:简单映射几个图标(Use case 1: Simply mapping a few icons)

¥Use case 1: Simply mapping a few icons

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',
}

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

$q.iconMapFn = (iconName) => {
  const icon = myIcons[iconName]
  if (icon !== undefined) {
    return { icon }
  }
}

现在我们可以使用 <q-icon name="app:copy" /> 或 <q-icon name="app:icon1" />，QIcon 会将 “app:copy” 和 “app:icon1” 视为 “fas fa 副本” 和 “img:/path/to/icon1.svg”。这同样适用于任何其他使用图标的 Quasar 组件，例如 <q-btn icon="app:copy" />。

¥Now we can use <q-icon name="app:copy" /> or <q-icon name="app:icon1" /> and QIcon will treat “app:copy” and “app:icon1” as if they were written as “fas fa-copy” and “img:/path/to/icon1.svg”. The same applies to any other Quasar component that uses icons, e.g. <q-btn icon="app:copy" />.

用例 2:支持自定义图标库(Use case 2: Support for custom icon library)

¥Use case 2: Support for custom icon library

当你使用自定义图标库（Quasar 及其 @quasar/extras 包中未包含）时，这尤其有用。

¥This is especially useful when you are using a custom icon library (that doesn’t come with Quasar and its @quasar/extras package).

import { useQuasar } from 'quasar'

const $q = useQuasar()

// Example of adding support for `<q-icon name="app:...." />`
// This includes support for all "icon" props of Quasar components

$q.iconMapFn = (iconName) => {
  // iconName is the content of QIcon "name" prop (or related icon prop of other Quasar components)

  // can be any logic you want, but for this example:
  if (iconName.startsWith('app:') === true) {
    // we strip the "app:" part
    const name = iconName.substring(4)

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

  // when we don't return anything from our iconMapFn,
  // the default Quasar icon mapping takes over
}

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

¥Notice in the examples above that we are returning a my-app-icon class that gets applied to QIcon if our icon starts with app: prefix. We can use it to define how QIcon should react to it, from a CSS point of view.

假设我们有一个自己的名为 “我的应用图标” 的 Web 字体。

¥Let’s assume we have our own webfont called “My App Icon”.

/*
  For this example, we are creating:
  /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; /* whatever is required for your */
  font-weight: 400;   /* webfont.... */
  src: url("./my-app-icon.woff2") format("woff2"), url("./my-app-icon.woff") format("woff");
}

然后，我们应该将新创建的 CSS 文件添加到我们的应用中：

¥We should then add the newly created CSS file into our app:

• Quasar CLI:将其添加到 quasar.config 文件中的 css 数组中

  ¥Quasar CLI: Add it to the css array in quasar.config file

  // quasar.config file
  css: [
    // ....
    'my-app-icon.css'
  ]

  content_paste

  Copied to clipboard

• 其他：将其添加到你的 CSS 文件中，将其导入你的 main.js/main.ts 或将其包含在你的 HTML 文件中：

  ¥Other: Add it to your CSS file, import it in your main.js/main.ts or include it in your HTML file:

  // in your main.js/main.ts
  import 'src/css/my-app-icon.css'
  
  // or in the main css file
  @import url('./my-app-icon.css');
  
  // or in your HTML file (UMD)
  <link rel="stylesheet" href="/css/my-app-icon.css">

  content_paste

  Copied to clipboard

同时将 “my-app-icon.woff2” 和 “my-app-icon.woff” 文件添加到与 “my-app-icon.css” 相同的文件夹中（或其他位置，但要编辑 woff/woff2 文件的相对路径（参见上文 “src:”）。）

¥And also add “my-app-icon.woff2” and “my-app-icon.woff” files into the same folder as “my-app-icon.css” (or somewhere else, but edit the relative paths (see “src:” above) to the woff/woff2 files).