1

我一直在 laravel 框架上开发类似 Twitter 或 Instagram 的 SNS 应用程序。我将 Vue.js 和 Vuetify 添加到我的项目中。当我使用 v-icon 时，它没有显示，而是显示如下的空框。

在铬：

在此处输入图像描述

在 Firefox 中：

在此处输入图像描述

这是什么？这是我的代码。

app.js 
require(“./bootstrap”);

window.Vue = require(“vue”);

import Vuetify from “vuetify”;
import “vuetify/dist/vuetify.min.css”;
Vue.use(Vuetify);

import “@mdi/font/css/materialdesignicons.css”;

const app = new Vue({
    el: “#app”,
    vuetify: new Vuetify(),
    icons: {
        iconfont: “mdi”
    }
});
home.blade.php 
<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Home</title>
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>

<body>
    <div id="app">
        <v-app>
            <v-content>
                <home-view></home-view>
            </v-content>
        </v-app>
    </div>
    <script src=" {{ mix('js/app.js') }} ">
    </script>
</body>
</html>
home-view.vue 
<template>
// some parts are omitted.
~~~~~~
    <span>
        icon:
        <v-btn icon color=“pink”&gt;
        <v-icon>mdi-heart</v-icon>
        </v-btn>
    </span>
~~~~~~
</template>

<script>
~~~~~~~
</script>>

他们怎么了？老实说，我已经面对这个问题差不多一个星期了。
我尝试了一些东西，但有时它甚至没有显示任何东西，或者有时出现了另一个问题。我只想知道如何正确显示材料设计图标。有谁知道这个问题的原因或解决方案？谢谢。

4

1 回答 1

3

现在字体太大了，我们不建议将它用于前端项目。它会给数据计划有限的移动用户带来问题，并大大减慢首次绘画的时间。

我们建议您使用@mdi/js包并渲染 SVG 图标。

告诉 vuetify 你想使用@mdi/js：

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

然后只导入你需要的图标：

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

获取有关Vuetify 文档的更多信息

于 2020-03-06T09:28:21.627 回答