<v-图标>vuetify 材料图标 (mdi) 在 vuetify 和 nuxt 应用程序中显示问题? [英] &lt;v-icon&gt; vuetify material Icon (mdi) showing problem in vuetify and nuxt app?

问题描述

我正在使用 nuxt 和 vuetify.所有标签工作正常.但是当我使用 时，图标没有显示 ..

<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>

解决方案

以下是对我有用的方法:

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

defaultAssets: {字体:真实，图标:'md'},图标:{iconfont: 'md',}

然后参考您的图标没有'mdi-'前缀，如下所示:

反馈

<块引用>

请注意，我只有 2 小时的 Nuxt.js 经验，所以可能有更好的方法，但我希望这有助于人们开始:)

---

<块引用>

我发现 Vuetify 可以附带两个不同的图标库(取决于您遵循的安装说明).一种是 md，您在使用时没有为图标添加前缀另一个是 mdi，您将它与一起使用，mdi-"前缀.

I am using nuxt and vuetify. all of the tags working fine. But when I am using <v-icon>, the icon is not showing ..

<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>

解决方案

Here is what worked for me:

Start by adding the following to the vuetify: {} object in nuxt.config.js:

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

Then refer to your icons without the 'mdi-' prefix as follows:

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

Please note that I only have 2 hours of Nuxt.js experience so there is likely a better way, but I hope this helps people get started :)

---

Edit: I figured out that there are two different icon libraries that Vuetify can come with (depending on which instructions you follow for installation). One is md which you use without prefixing your icons and the other is mdi which you use with the "mdi-" prefix.

这篇关于<v-图标>vuetify 材料图标 (mdi) 在 vuetify 和 nuxt 应用程序中显示问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！