英文:
icons are not rendering in Vue2 + Vuetify 2 app
问题
在我的Vue2 + Vuetify2应用程序中，图标无法在显示时渲染，但DOM中存在这些元素（图标）。
package.json
{
"name": "sample",
"version": "0.1.0",
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuetify": "^2.6.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@mdi/font": "^7.1.96",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
icons: {
iconfont: 'mdi', // 默认值，仅供显示用途
},
render: (h) => h(App),
}).$mount("#app");
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- 构建文件将自动注入 -->
</body>
</html>
应用程序中使用了vuetify-icons的组件：
<template>
<v-row justify="space-around" style="margin: 25px; border:5px solid #f00; height: 100px;">
<v-icon size="large" color="green-darken-2" icon="mdi-domain"></v-icon>
<v-icon size="large" color="blue-darken-2" icon="mdi-message-text"></v-icon>
<v-icon size="large" color="purple-darken-2" icon="mdi-dialpad"></v-icon>
<v-icon size="large" color="teal-darken-2" icon="mdi-email"></v-icon>
<v-icon size="large" color="blue-grey-darken-2" icon="mdi-call-split"></v-icon>
<v-icon size="large" color="orange-darken-2" icon="mdi-arrow-up-bold-box-outline"></v-icon>
</v-row>
</template>
<script>
export default {
name: 'App',
data: () => ({
}),
}
</script>
在浏览器中的渲染效果如下图所示：
英文:
In my Vue2 + Vuetify2 the icons are not rendering in the display however the elements(icon) are present in the DOM
package.json
{
"name": "sample",
"version": "0.1.0",
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuetify": "^2.6.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@mdi/font": "^7.1.96",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
icons: {
iconfont: 'mdi', // default - only for display purposes
},
render: (h) => h(App),
}).$mount("#app");
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And the app component which is making use vuetify-icons
<template>
<v-row justify="space-around" style="margin: 25px; border:5px solid #f00; height:
100px;">
<v-icon
size="large"
color="green-darken-2"
icon="mdi-domain"
></v-icon>
<v-icon
size="large"
color="blue-darken-2"
icon="mdi-message-text"
></v-icon>
<v-icon
size="large"
color="purple-darken-2"
icon="mdi-dialpad"
></v-icon>
<v-icon
size="large"
color="teal-darken-2"
icon="mdi-email"
></v-icon>
<v-icon
size="large"
color="blue-grey-darken-2"
icon="mdi-call-split"
></v-icon>
<v-icon
size="large"
color="orange-darken-2"
icon="mdi-arrow-up-bold-box-outline"
></v-icon>
</v-row>
</template>
<script>
export default {
name: 'App',
data: () => ({
}),
}
</script>
This is how is rendering in the browser
I have checked all these links but futile
- https://stackoverflow.com/questions/57053728/vuetify-icon-not-showing
- https://stackoverflow.com/questions/59824952/icons-not-displaying-in-vuetify-application
- https://v2.vuetifyjs.com/en/features/icon-fonts/#install-material-icons/
> Can someone here please suggest what else is needed to render the material/font-awesome icons in the Vue app?
Thanks!
答案1
得分: 0
你在使用图标的语法错误。对于Vuetify 2，请使用以下代码：
<v-icon
size="large"
color="green-darken-2"
>mdi-domain</v-icon>
英文:
You are using the wrong syntax for icons. For Vuetify 2, use the following:
<v-icon
size="large"
color="green-darken-2"
>mdi-domain</v-icon>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论