laravel - Vuetify 图标不显示。它交替显示一个空框
问题描述
我一直在 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”>
<v-icon>mdi-heart</v-icon>
</v-btn>
</span>
~~~~~~
</template>
<script>
~~~~~~~
</script>>
他们怎么了?老实说,我已经面对这个问题差不多一个星期了。
我尝试了一些东西,但有时它甚至没有显示任何东西,或者有时出现了另一个问题。我只想知道如何正确显示材料设计图标。有谁知道这个问题的原因或解决方案?谢谢。
解决方案
现在字体太大了,我们不建议将它用于前端项目。它会给数据计划有限的移动用户带来问题,并大大减慢首次绘画的时间。
我们建议您使用@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 文档的更多信息
推荐阅读
- python - 更正不可散列的类型:'dict_keys'
- android - 将 onFocus 和背景图像添加到视图
- field - 如何解读 Blender 的 SDNA 结构字段类型索引?
- php - PHP DateTime 无法解析 31/05/2018
- java - 添加 Spring 布局时,GUI 不会显示标签和文本字段
- reactjs - React/Redux 订阅 redux store 发出的最新状态值
- php - PUT 方法抛出 BadMethodCallException
- typescript - Firebase Cloud Functions with Typescript,如何转换复杂的界面
- c - 为TFT绘图计算固定点中元素的位置
- apache-spark - spark 是否优化了广播变量的网络流量?