Vuetify

商店

企业版

Vuetify 只能看出 Material Design Icons、Material Icons、Font Awesome 4 和 Font Awesome 5。 默认情况下,应用程序将默认使用 Material Design Icons

要更改你的字体库,需要在实例化过程中添加 iconfont 选项。

使用预定义选项将根据所选的预置预填充默认值。这将覆盖默认的 icon 值。欲了解更多信息,请参阅 icon preset values

你需要包括指定的图标库(即使使用默认图标库)。这可以通过包含 CDN 链接或将图标库导入到你的应用程序中来完成。

这是 Vuetify 的默认图标字体。您可以通过 CDN 包含它:

或者作为本地依赖:

指定 SVG 路径的方式来使用 @mdi/js。在生产环境中优化你的应用程序时推荐安装。如果你计划使用多个默认图标,那么就 需要包含它。

指定 mdiSvg iconfont:

你可以自定义仅导入你使用的图标,以授予更小的捆绑包大小。

安装步骤与上面相同。对于没有构建过程的项目,建议从 CDN 导入图标

或者,可以使用 yarn 或 npm 在本地安装。 请记住,这不是官方的 google 仓库,可能无法接收更新

安装软件包后,将其导入到主目录的 js 文件中。通常是位于 src/ 文件夹中的 main.js, index.jsapp.js。如果您使用的是 SSR 应用程序,则可能在 client.jsentry-client.js 文件中。

安装 FontAwesome 最简单的方法是使用 cdn。在你主要的 index.html 的头部里放置这个代码:

要在本地安装,你可以使用你喜欢的软件包管理器版本 Free 安装 FontAwesome

在你的主入口中,只需导入包中的 all.css。如果你正在操作一个 webpack 项目,你需要使用 webpack css loader 来设置对 .css 文件的支持。如果你已经在使用 Vue CLI,那么这些都会自动完成。

与上面相同。通过 cdn 安装 FontAwesome 在你的项目内是最简单方式:

安装 FontAwesome4 的方法与它的新版本相同,只是从一个不同的仓库安装。 你将看准是 font-awesome 而不是 @fortawesome

不要忘记,你的项目需要识别 css。如果你正在使用 webpack,安装和设置 css loader

添加必需的依赖项。

然后在 Vuetify 配置中全局添加 font-awesome-icon 组件,并设置 faSvg 为图标字体。

假设你的应用程序在 Vuetify 组件中调用自定义图标。你可以在全局级别配置它,而不是每次出现组件时都创建包装器组件或手动定义特定的图标。

假设你的应用程序在 Vuetify 组件中调用自定义图标。你可以在全局级别配置它,而不是每次出现组件时都创建包装器组件或手动定义特定的图标。

Vuetify 会 自动 将提供的任何图标字符串合并到可用预设池中。这使你可以通过简单地引用 全局图标 来创建可用于应用程序中使用的自定义字符串。

给定提供的字符串,这可以帮助确保你的应用程序始终使用特定的图标。这样有几种方法让你可以在此系统上使用 <v-icon>

你可以在自己的自定义组件中使用相同的图标字符串。每当通过 v-text, v-html 或作为文本传递 $vuetify.icons (or shortcut $) 时,<v-icon> 都会查找该指定值。这使你可以创建易于构建和管理的自定义解决方案。

你可以在 Font Awesome Pro 中使用组件图标来选择各个图标的权重:

你可以使用自己的组件图标,而不是使用预设提供的图标字体。 你也可以在 Vuetify 组件中切换预设图标和你自己的图标。

如果你想要你的 SVG 图标继承颜色并正确缩放-请确保添加以下 CSS:

默认缺少一些 material icons,例如 personperson_outline 可用,但是 visibility_outline 不可用,而 visibility 可用。要使用这些缺失的 material icons,请在下面包含字体(如果已经注册,请删除另一个 material font)。

你可以添加你的自定义组件。假定它是 @/components/MaterialIcon.vue

然后你需要确切注册你想要的 material icons。

最后,你可以使用像这样的 material icons。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!