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

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

Quasar 中有多种类型的图标：基于网络字体的、基于 SVG 的和基于图像的。您可以在同一个网站/应用中混合使用不同类型的图标。

尺寸和颜色

QIcon 的尺寸通过 CSS 的 font-size 属性来控制。同时，QIcon 会继承当前 CSS 文本的 color 属性。为了使用方便，QIcon 提供了 size 和 color 属性。

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

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

基于网络字体的图标

网络字体使用方式

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

命名规范

Material Icons (Google)

• 图标名称始终使用下划线命名法（snake_case）。
• 访问 Material Icons and Symbols，查找所需的图标。记住其名称（例如 “all_inbox”）并使用它。

MDI (Material Design Icons)

• 图标名称使用连字符分隔，并且始终以 “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（专业版还有 fa-thin、fa-duotone）
• 访问 FontAwesome，查找所需的图标，点击它。您将进入其页面。在图标名称（作为标题）下方，您将看到类似 <i class="fa-solid fa-flag"></i> 的内容。结果是 fa-solid fa-flag（您也可以使用 fas fa-flag）。
• 注意：fas、far、fab、fal、fat 和 fad 已弃用，可能在未来的主要版本中不可用。

Ionicons

• 图标名称使用连字符分隔，并且始终以 “ion-”、“ion-md-”、“ion-ios-” 或 “ion-logo-” 前缀开头。
• 访问 Ionicons (v4)，查找所需的图标，点击它。在页面底部，将出现一个弹出窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “square-outline”）。根据您想要的变体（自动检测平台、Material 或 iOS），您将得到结果：ion-square-outline 或 ion-md-square-outline 或 ion-ios-square-outline。
• 注意： 从 v5 开始，Ionicons 不再提供网络字体。同时，他们也不再提供 Material 或 iOS 变体。

Eva Icons

• 图标名称使用连字符分隔，并且始终以 “eva-” 前缀开头。
• 访问 Eva Icons，查找所需的图标，点击它。将出现一个对话框。从那里获取名称（例如 “attach-outline”），添加 “eva” 前缀，结果是 “eva-attach-outline”。

Themify

• 图标名称使用连字符分隔，并且始终以 “ti-” 前缀开头。
• 访问 Themify，查找所需的图标。记住其名称（例如 “ti-arrow-top-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 图标有许多优势：

• 更好的应用体积 – 只有使用的图标会被包含在最终构建中（树摇优化）
• 更好的图标质量
• 不需要从 @quasar/extras 或 CDN 包含等效的网络字体

当前的缺点是使用这些图标比使用网络字体版本更繁琐。

SVG 使用方式

在 <template> 中使用：

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

注意我们使用 : 来绑定变量而不是普通值，这很重要。我们必须使这些变量在模板中可用。实现方式取决于您偏好的 Vue API 风格：

使用 “script setup” 的组合式 API

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

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

不使用 “script setup” 的组合式 API

<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

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

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

导入指南

SVG 图标由 @quasar/extras 提供（当然您也可以提供自己的 SVG 图标！）。以下是导入语法的详细说明：

SVG Material Icons (Google)

• 图标名称使用驼峰命名法，并且始终以 “mat” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “mat” 前缀并将结果转换为驼峰命名法（例如 “matAllInbox”）。
• 导入语句示例：import { matAllInbox } from '@quasar/extras/material-icons'。

SVG Material Icons Outlined (Google)

• 图标名称使用驼峰命名法，并且始终以 “outlined” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “outlined” 前缀并将结果转换为驼峰命名法（例如 “outlinedAllInbox”）。
• 导入语句示例：import { outlinedAllInbox } from '@quasar/extras/material-icons-outlined'。

SVG Material Icons Sharp (Google)

• 图标名称使用驼峰命名法，并且始终以 “sharp” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “sharp” 前缀并将结果转换为驼峰命名法（例如 “sharpAllInbox”）。
• 导入语句示例：import { sharpAllInbox } from '@quasar/extras/material-icons-sharp'。

SVG Material Icons Round (Google)

• 图标名称使用驼峰命名法，并且始终以 “round” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “round” 前缀并将结果转换为驼峰命名法（例如 “roundAllInbox”）。
• 导入语句示例：import { roundAllInbox } from '@quasar/extras/material-icons-round'。

SVG Material Symbols Outlined (Google)

• 图标名称使用驼峰命名法，并且始终以 “symOutlined” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “symOutlined” 前缀并将结果转换为驼峰命名法（例如 “symOutlinedAllInbox”）。
• 导入语句示例：import { symOutlinedAllInbox } from '@quasar/extras/material-symbols-outlined'。

SVG Material Symbols Sharp (Google)

• 图标名称使用驼峰命名法，并且始终以 “symSharp” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “symSharp” 前缀并将结果转换为驼峰命名法（例如 “symSharpAllInbox”）。
• 导入语句示例：import { symSharpAllInbox } from '@quasar/extras/material-symbols-sharp'。

SVG Material Symbols Rounded (Google)

• 图标名称使用驼峰命名法，并且始终以 “symRounded” 前缀开头。
• 访问 Material Icons，查找所需的图标并记住其名称（例如 “all_inbox”），添加 “symRounded” 前缀并将结果转换为驼峰命名法（例如 “symRoundedAllInbox”）。
• 导入语句示例：import { symRoundedAllInbox } from '@quasar/extras/material-symbols-rounded'。

SVG MDI (Material Design Icons)

• 图标名称使用驼峰命名法，并且始终以 “mdi” 前缀开头。
• 访问 MDI，查找所需的图标，点击它。将出现一个对话框。获取标题（例如 “account-key”），添加 “mdi” 前缀并将结果转换为驼峰命名法（例如 “mdiAccountKey”）。
• 导入语句示例：import { mdiAccountKey } from '@quasar/extras/mdi-v7'。

SVG Fontawesome

• 图标名称使用驼峰命名法，并且始终以 “fas”、“fab”、“fal” 或 “far” 前缀开头。
• 访问 FontAwesome，查找所需的图标，点击它。您将进入其页面。在图标名称（作为标题）下方，您将看到类似 <i class="fas fa-flag"></i> 的内容。对应的导入名称就是 fasFlag。标签中的前缀很重要。
• 注意：由于许可证限制，我们无法以 SVG 格式提供 “Pro” 版本的图标。
• 导入语句示例：import { fasFlag } 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，查找所需的图标，点击它。页面底部将出现一个弹出窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “square-outline”）。将此名称转换为驼峰命名法，并添加 “ionMd”（Material 变体）或 “ionIos”（iOS 变体）前缀。
• Ionicons v5/v6：访问 Ionicons v6，查找所需的图标，点击它。页面底部将出现一个弹出窗口。注意类似 <ion-icon name="square-outline"></ion-icon> 的内容。记住名称（例如 “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”），添加 “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 图标本质上是一个字符串，遵循以下语法：

语法: "<path>&&<path>&&...|<viewBox>"
           P       P             V
                (可选)        (可选)
                             (默认值: 0 0 24 24)

P 是一个 path 标签，语法如下（每个都是属性）：
        "<d>@@<style>@@<transform>"
        (必需)
            (可选)
                     (可选)

示例：

// 最简形式 ("<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 ("<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 ("<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 ("<path>@@@@transform"):
// （注意样式分隔符仍然需要保留）

  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>&&<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-use 方式

这种 SVG 方式允许您将 SVG 文件存储为静态资源并引用它们。

// 文件: /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>

要在 Quasar 中通过 QIcon 使用此方式（请确保从 public 文件夹正确引用文件）：

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

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

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

内联 SVG

如果您不想使用上述的网络字体或 SVG 变体，请注意 QIcon 还支持内联一个 <svg> 标签（svg 的内容可以是任何东西，不仅仅是 path）。

在 QIcon 中使用 <svg> 的理由是：svg 会通过 QIcon 的属性来响应尺寸和颜色设置。如果不需要这些特性，您最好直接在模板中内联 svg 而不用 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>

一些限制：

• 不要在 <svg> 标签上使用 “height”/“width” 属性（这会破坏 QIcon 的尺寸处理方式）
• 所有 <path> 默认都会应用 “fill: currentColor” CSS 样式；如果您不想要这个效果，请在 <path> 标签上添加 fill="none"

图像图标

您也可以通过使用 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: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）：

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

自定义映射

如果需要，您可以自定义图标名称的映射。这可以通过提供自定义的图标映射函数来实现。有几种方式可以提供这个函数：

• 在入口文件中设置 IconSet.iconMapFn：
  • 如果使用 Quasar CLI（Vite 或 Webpack），在 boot 文件中设置
  • 如果使用 Quasar Vite 插件，在 main.js/main.ts（或类似文件）中设置
  • 如果使用 UMD，在任何合适的文件或 script 标签中设置
• 在根组件（例如 App.vue）中设置 $q.iconMapFn：
  • 如果使用组合式 API 的 <script setup>，在顶层设置
  • 如果使用组合式 API，在 setup() 函数中设置
  • 如果使用选项式 API，在 created() 钩子中设置
• 在 Quasar Vue 插件选项的 config 中设置 iconMapFn，例如 app.use(Quasar, { config: { iconMapFn } })（适用于非 Quasar CLI 的方式）。

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

iconMapFn 的类型定义如下：

type GlobalQuasarIconMapFn = (iconName: string) => // 映射到另一个已有的图标
  | {
      icon: string; // 映射后的图标字符串，Quasar 会把它
      // 当作 QIcon 原始的 name 值来处理
    }
  // 定义如何解析该图标
  | {
      cls: string; // CSS 类名
      content?: string; // 可选，当您使用连字字体时
      // 需要将其作为 QIcon 的内容
    }
  // 不做处理，使用 Quasar 的默认映射
  | void;

图标映射不仅影响 QIcon，还会影响所有使用图标的 Quasar 组件，如 QBtn、QInput 等。

用例 1：简单映射几个图标

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-copy” 和 “img:/path/to/icon1.svg” 来处理。同样适用于其他使用图标的 Quasar 组件，例如 <q-btn icon="app:copy" />。

用例 2：支持自定义图标库

当您使用自定义图标库（不是 Quasar 及其 @quasar/extras 包自带的）时，这尤其有用。

import { useQuasar } from "quasar";

const $q = useQuasar();

// 添加对 `<q-icon name="app:...." />` 的支持示例
// 这也包括所有 Quasar 组件的 "icon" 相关属性

$q.iconMapFn = (iconName) => {
  // iconName 是 QIcon "name" 属性的内容（或其他 Quasar 组件的图标相关属性）

  // 可以是任何您想要的逻辑，这里只是一个示例：
  if (iconName.startsWith("app:")) {
    // 去掉 "app:" 部分
    const name = iconName.substring(4);

    return {
      cls: "my-app-icon " + name,
    };
  }

  // 当 iconMapFn 没有返回值时，
  // Quasar 的默认图标映射会接管处理
};

注意在上面的示例中，如果图标以 app: 前缀开头，我们会返回一个 my-app-icon 类应用到 QIcon 上。我们可以利用它从 CSS 的角度定义 QIcon 应该如何渲染。

假设我们有一个名为 “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");
}

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

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

  // quasar.config 文件
  css: [
    // ....
    "my-app-icon.css",
  ];

  content_paste

  Copied to clipboard

• 其他方式：将其添加到 CSS 文件中，在 main.js/main.ts 中导入，或在 HTML 文件中引入：

  // 在 main.js/main.ts 中
  import 'src/css/my-app-icon.css'
  
  // 或在主 CSS 文件中
  @import url('./my-app-icon.css');
  
  // 或在 HTML 文件中 (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:”）。