Vuetify 中文网

简体中文

English

简体中文

English

主题

图标字体 ​

Vuetify 开箱即支持 4 种流行的图标字体库———Material Design Icons, Material Icons, Font Awesome 4 和 Font Awesome 5。

使用 ​

要更改你使用的字体库，请导入一个预定义的图标集或提供您自己的图标。

js
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi";

export default createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});
html
<template>
  <v-icon icon="mdi-home" />
</template>

在上述示例中，我们导入了默认的mdi图标集及其相应的别名。这些别名引用了 Vuetify 组件常用的图标类型。

INFO

虽然在 Vuetify 3 中，你依然可以直接在默认插槽使用图标值（比如说 (<v-icon>mdi-home</v-icon>)指定图标，但我们还是建议使用 icon prop 替代。

安装图标字体 ​

您需要包含指定的图标库(即使使用Material Design Icons)中的默认图标) ）. 这可以通过包含 CDN 链接或将图标库导入应用程序来实现。

INFO

在这个页面中，“材料图标”是用来指官方的谷歌图标official google icons “Material Design Icons”指的是扩展的第三方库extended third-party library

Material Design 图标 ​

这是 Vuetify 使用的默认图标集。它支持使用构建过程或 CDN 链接进行本地安装。下面展示了如何添加 CDN 链接到你的index.html:

MDI - CSS ​

html
<link
  href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>

或者作为本地依赖：

bash
yarn add @mdi/font -D
bash
npm install @mdi/font -D
bash
pnpm add @mdi/font -D
bash
bun add @mdi/font -D
js
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
import { createVuetify } from "vuetify";

export default createVuetify({
  icons: {
    defaultSet: "mdi", // This is already the default value - only for display purposes
  },
});

DANGER

不要在没有指定包 version（版本） 的情况下使用 CDN 链接。如果不这样做，可能会导致应用程序在新版本中发生意外更改。

MDI - JS SVG ​

在为生产优化应用程序时，建议采用这种安装方式，因为只有内部用于 Vuetify 组件的图标才会被导入到应用程序包中。你需要为应用程序的其余部分提供自己的图标。

js
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi-svg";

export default createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

有两种方法可以获得应用程序中所需的其余图标。@mdi/js 或 unplugin-icons 。

如果您想坚持使用@mdi/js，请使用@mdi/js中指定的 SVG 路径 并且只导入你需要的图标。

下面的例子展示了如何在.vue SFC 模板中使用导入的图标:

bash
yarn add @mdi/js -D
bash
npm install @mdi/js -D
bash
pnpm add @mdi/js -D
bash
bun add @mdi/js -D
html
<template>
  <v-icon :icon="mdiAccount" />
</template>

<script setup>
  import { mdiAccount } from "@mdi/js";
</script>

或者你想要使用的图标可以添加为别名，以简化重用:

js
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
import { mdiAccount } from "@mdi/js";

export default createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases: {
      ...aliases,
      account: mdiAccount,
    },
    sets: {
      mdi,
    },
  },
});
html
<template>
  <v-icon icon="$account" />
</template>

MDI - 图标搜索 ​

使用此工具可搜索任何 Material Design 图标，并通过单击项目将其复制到剪贴板。

mdi-

Material 图标 ​

对于没有构建过程的项目，推荐直接使用 CDN 导入图标。

Material 图标 - CSS ​

html
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons"
  rel="stylesheet"
/>

默认情况下缺少一些材质图标。例如，person和person_outline是可用的，但是visbility_outline不是，而visibility是可用的。要使用缺少的图标，请将现有的<link>替换为以下内容:

html
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
/>

或者，也可以使用 yarn 或 npm 在本地安装。请记住，这不是一个官方的谷歌存储库，可能不包含所有的图标。

bash
yarn add material-design-icons-iconfont -D
bash
npm install material-design-icons-iconfont -D
bash
pnpm add material-design-icons-iconfont -D
bash
bun add material-design-icons-iconfont -D
js
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure your project is capable of handling css files
import { createVuetify } from "vuetify";
import { aliases, md } from "vuetify/iconsets/md";

export default createVuetify({
  icons: {
    defaultSet: "md",
    aliases,
    sets: {
      md,
    },
  },
});
html
<template>
  <v-icon icon="home" />
</template>

Font Awesome ​

使用 FontAwesome 最简单的方式是使用 CDN。

FA 5 - CSS ​

html
<link
  href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
  rel="stylesheet"
/>

要本地安装，你可以使用你最喜爱的包管理安装FontAwesome 的 free 版本:

bash
yarn add @fortawesome/fontawesome-free -D
bash
npm install @fortawesome/fontawesome-free -D
bash
pnpm add @fortawesome/fontawesome-free -D
bash
bun add @fortawesome/fontawesome-free -D
js
import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files
import { createVuetify } from "vuetify";
import { aliases, fa } from "vuetify/iconsets/fa";

export default createVuetify({
  icons: {
    defaultSet: "fa",
    aliases,
    sets: {
      fa,
    },
  },
});
html
<template>
  <v-icon icon="fas fa-home" />
</template>

DANGER

FontAwesome 图标的 JavaScript 版本(all.js)将无法在 Vue 中工作

FA 4 - CSS ​

使用 FontAwesome 最简单的方式是使用 CDN。

html
<link
  href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
  rel="stylesheet"
/>

本地安装 FontAwesome 4与其更新版本相同，只是从不同的包中安装。您将使用font-awesome包，而不是@fortawesome。

bash
yarn add font-awesome@4.7.0 -D
bash
npm install font-awesome@4.7.0 -D
bash
pnpm add font-awesome@4.7.0 -D
bash
bun add font-awesome@4.7.0 -D
js
import "font-awesome/css/font-awesome.min.css"; // Ensure your project is capable of handling css files
import { createVuetify } from "vuetify";
import { aliases, fa } from "vuetify/iconsets/fa4";

export default createVuetify({
  icons: {
    defaultSet: "fa",
    aliases,
    sets: {
      fa,
    },
  },
});
html
<template>
  <v-icon icon="fa-check" />
</template>

FA 5 - SVG ​

安装下列依赖包。

bash
yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D
bash
npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D
bash
pnpm add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D
bash
bun add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D

然后注册全局的font-awesome-icon组件，并使用预定义的fa-svg图标集。如果你有访问字体 Awesome Pro 图标，他们可以以同样的方式添加到库。

js
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import { aliases, fa } from "vuetify/iconsets/fa-svg";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";

const app = createApp();

app.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(fas); // Include needed solid icons
library.add(far); // Include needed regular icons

const vuetify = createVuetify({
  icons: {
    defaultSet: "fa",
    aliases,
    sets: {
      fa,
    },
  },
});

app.use(vuetify);

app.mount("#app");
html
<template>
  <v-icon icon="fas fa-home" />
</template>

内置别名 ​

可以在 Vuetify 组件中使用图标别名插入图标。

AliasNamePreview
$calendarmdi-calendar
$cancelmdi-close-circle
$checkboxIndeterminatemdi-minus-box
$checkboxOffmdi-checkbox-blank-outline
$checkboxOnmdi-checkbox-marked
$clearmdi-close-circle
$closemdi-close
$collapsemdi-chevron-up
$completemdi-check
$deletemdi-close-circle
$delimitermdi-circle
$dropdownmdi-menu-down
$editmdi-pencil
$errormdi-close-circle
$expandmdi-chevron-down
$eyeDroppermdi-eyedropper
$filemdi-paperclip
$firstmdi-page-first
$infomdi-information
$lastmdi-page-last
$loadingmdi-cached
$menumdi-menu
$minusmdi-minus
$nextmdi-chevron-right
$plusmdi-plus
$prevmdi-chevron-left
$radioOffmdi-radiobox-blank
$radioOnmdi-radiobox-marked
$ratingEmptymdi-star-outline
$ratingFullmdi-star
$ratingHalfmdi-star-half-full
$sortAscmdi-arrow-up
$sortDescmdi-arrow-down
$subgroupmdi-menu-down
$successmdi-check-circle
$treeviewCollapsemdi-menu-down
$treeviewExpandmdi-menu-right
$unfoldmdi-unfold-more-horizontal
$warningmdi-alert-circle

多个图标集 ​

Vuetify 开箱即用，支持同时使用多个不同的图标集。下面的例子演示了如何通过使用前缀将默认图标字体更改为 font Awesome (fa)，同时仍然保持对原始材质设计图标(mdi)的访问:

js
import { createVuetify } from "vuetify";
import { aliases, fa } from "vuetify/iconsets/fa";
import { mdi } from "vuetify/iconsets/mdi";

export default createVuetify({
  icons: {
    defaultSet: "fa",
    aliases,
    sets: {
      fa,
      mdi,
    },
  },
});
html
<template>
  <v-icon icon="fas fa-plus" /> // This renders a FontAwesome icon
  <v-icon icon="mdi:mdi-minus" /> // This renders a MDI icon
</template>

INFO

没有必要为默认图标集中的图标提供前缀 (例如mdi:)

创建一个自定义图标集 ​

一个图标集由一个对象和一个属性component组成，这个属性组件应该是一个功能组件，它接收IconsProps类型的道具，并呈现一个图标。

为了使用自定义集作为默认图标集，还必须添加必要的别名，这些别名 (aliases) 对应于 Vuetify 组件使用的值。

ts
import { h } from 'vue'
import type { IconSet, IconAliases, IconProps } from 'vuetify'

const aliases: IconAliases = {
  collapse: '...',
  complete: '...',
  cancel: '...',
  close: '...',
  delete: '...',
  clear: '...',
  success: '...',
  info: '...',
  warning: '...',
  error: '...',
  prev: '...',
  next: '...',
  checkboxOn: '...',
  checkboxOff: '...',
  checkboxIndeterminate: '...',
  delimiter: '...',
  sort: '...',
  expand: '...',
  menu: '...',
  subgroup: '...',
  dropdown: '...',
  radioOn: '...',
  radioOff: '...',
  edit: '...',
  ratingEmpty: '...',
  ratingFull: '...',
  ratingHalf: '...',
  loading: '...',
  first: '...',
  last: '...',
  unfold: '...',
  file: '...',
  plus: '...',
  minus: '...',
}

const custom: IconSet = {
  component: (props: IconProps) => h(...),
}

export { aliases, custom }
js
import { createVuetify } from "vuetify";
import { aliases, custom } from "../iconsets/custom";

export default createVuetify({
  icons: {
    defaultSet: "custom",
    aliases,
    sets: {
      custom,
    },
  },
});

增加可用的图标别名 ​

如果你正在开发自定义的 Vuetify 组件，你可以增加 aliases 对象，以获得像在内置的 Vuetify 组件中可用的图标别名。图标别名是由 $ 开始，然后紧接一个别名名字，例如 $product。

js
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi";

export default createVuetify({
  icons: {
    aliases: {
      ...aliases,
      product: "mdi-dropbox",
      support: "mdi-lifebuoy",
    },
  },
});
html
<template>
  <v-icon icon="$product" />
  <v-icon icon="$support" />
</template>