Значок Vuetify не отображается. Альтернативно отображалось пустое поле

Question

Значок Vuetify не отображается. Альтернативно отображалось пустое поле

Я разрабатываю приложение для социальных сетей, такое как Twitter или Instagram, на платформе laravel. Я добавил в свой проект Vue.js и Vuetify. Когда я использую значок v, он не отображается, но вместо него отображается пустое поле, как показано ниже.

В хроме:

И в 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”>
        <v-icon>mdi-heart</v-icon>
        </v-btn>
    </span>
~~~~~~
</template>

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

Что с ними не так? Если честно, я с этим столкнулся почти неделю.
Я что-то пробовал, но иногда даже ничего не отображает, а иногда возникала другая проблема. Я только хочу знать, как правильно отобразить значок материального дизайна. Кто-нибудь знает причину этой проблемы или решения? Спасибо.

1

laravel vue.js vuetify.js material-design-icons

Источник

user12315454 02 мар '20 в 18:57

1 ответ

Другие вопросы по тегам laravel vue.js vuetify.js material-design-icons

user1994081 06 мар '20 в 12:28 2020-03-06 12:28 · Answer 1 · 2020-03-06 12:28

Шрифт стал настолько большим, что мы не рекомендуем использовать его для веб-проектов. Это вызывает проблемы у мобильных пользователей с ограниченными тарифными планами и значительно сокращает время до первой отрисовки.

Мы рекомендуем вам использовать пакет @ 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