vue.js - Vuetify/离线图标

Question

我有以下用于菜单和菜单按钮的代码。我正在使用 Vue CLI 3 和 Vuetify

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
...
<v-navigation-drawer fixed app v-model="drawer">
  <MyMenu/>
</v-navigation-drawer>
<v-toolbar fixed app>
  <v-toolbar-title class="headline text-uppercase">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
  </v-toolbar-title>
</v-toolbar>

该代码在计算机在线时运行良好。但是，当计算机处于离线状态时，菜单按钮图标不会显示。相反，它只是替换为文本“MENU”。我研究过通过 npm 安装(vue-material-design-icons、material-design-icons 和 material-design-icons-iconfont)，但没有运气让图标在计算机离线时显示。我不确定是否有一种我不知道的特殊方法可以将它连接在一起。谁能提供有关如何解决此问题的见解？

• 我已经阅读了很多链接，例如 https://github.com/vuetifyjs/cordova/issues/11和 How to host material icons offline?但我无法让他们为我工作。

Answer 1

Vuetify 在他们的文档中解决了这个问题:

https://vuetifyjs.com/en/framework/icons#installing-fonts

本质上:

npm install material-design-icons-iconfont -D

然后:

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'md'
})