这对我有用：

Question

我正在使用nuxt和vuetify。所有标记均正常运行。但是当我使用<v-icon>时，该图标未显示..

<v-flex xs12 mb-3>
<v-btn outline fab small color="blue-grey lighten-4">
    <v-icon color="grey darken-4">mdi-facebook</v-icon>
</v-btn>

<v-btn outline fab small color="blue-grey lighten-4">
    <v-icon color="grey darken-4">mdi-google-plus</v-icon>
</v-btn>

<v-btn outline fab small color="blue-grey lighten-4">
   <v-icon color="grey darken-4">mdi-linkedin</v-icon>
</v-btn>
</v-flex>

Answer 1

这对我有用：

首先将以下内容添加到nuxt.config.js中的vuetify: {}对象：

defaultAssets: {
  font: true,
  icons: 'md'
},
icons: {
  iconfont: 'md',
}

然后引用您的图标，不带前缀“ mdi-”，如下所示：

<v-icon>feedback</v-icon>

请注意，我只有2个小时的Nuxt.js经验，因此可能有更好的方法，但是我希望这可以帮助人们入门：）

编辑：我发现Vuetify可以附带两个不同的图标库（取决于您遵循的安装说明）。一个是md，您使用不带前缀的图标，另一个是mdi，您使用带有前缀的“ mdi-”。

Answer 2

按照说明进行操作。

npm install @mdi/font -D
在您的nuxt应用中，有plugins文件夹..打开您的vuetify配置文件
导入包

从“ vue”导入Vue

从“ vuetify”导入Vuetify

导入'@ mdi / font / css / materialdesignicons.css'
编写代码..

Vue.use（Vuetify，{ iconfont：“ mdi” }）

Answer 3

非正式的Google存储库肯定有效，无法为他人作证。首先尝试CDN链接

io.on('connection', function(socket){
  socket.on('disconnect', function() {
    console.log("disconnect")
    for(var i = 0; i < onlineplayers.length; i++ ){
      if(onlineplayers[i].socket === socket.id){
        console.log(onlineplayers[i].code + " just disconnected")
        onlineplayers.splice(i, 1)
      }
    }
    io.emit('players', onlineplayers)
  })

  socket.on('lobby_join', function(player) {
    if(player.available === false) return
    var exists = false
    for(var i = 0; i < onlineplayers.length; i++ ){
      if(onlineplayers[i].code === player.code){
        exists = true
      }
    }
    if(exists === false){
      onlineplayers.push({
        code: player.code,
        socket:socket.id
      })
    }
    io.emit('players', onlineplayers)
  })

  socket.on('lobby_leave', function(player) {
    var exists = false
    for(var i = 0; i < onlineplayers.length; i++ ){
      if(onlineplayers[i].code === player.code){
        onlineplayers.splice(i, 1)
      }
    }
    io.emit('players', onlineplayers)
  })
})

或者，使用yarn或NPM在本地安装

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

//或

$ yarn add material-design-icons-iconfont -D

然后将其导入您的vuetify.js文件

$ npm install material-design-icons-iconfont -D

就这样

<v-icon> vuetify材质图标（mdi）在vuetify和nuxt应用程序中显示问题？

3 个答案:

这对我有用：