Значок Vuetify не отображается. Он отображал пустое поле в качестве альтернативы - PullRequest
Новая
       5

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

1 голос
/ 02 марта 2020

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

In chrome:

enter image description here

И в Firefox:

enter image description here

Что это? Вот мои коды.

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 Ответ

1 голос
/ 06 марта 2020

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

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

Получите дополнительную информацию о Подтвердить документацию

...