【问题标题】:Vuetify icons rendering with excess widthVuetify 图标渲染宽度过大
【发布时间】:2021-10-04 15:44:54
【问题描述】:

我刚刚开始使用 Vuetify 的 Vue 项目,我正在尝试使用 v-icon 呈现一些图标。

在我的组件中,我有以下代码:

<template>
  <div>
    <v-icon>domain<v-icon>
    <v-icon>credit_card_outline</v-icon>
  </div>
</template>

domain 图标的渲染效果很好。但是,credit_card_outline 的渲染高度为 45px,宽度为 216px

它几乎就像是实际文本的渲染空间......它适用于许多图标(例如 playlist_add 工作),但对于许多图标它不......

什么可能导致这个错误?

【问题讨论】:

  • 我觉得v-icon没什么问题。你也可以分享CSS吗?

标签: vue.js icons vuetify.js material-design-icons


【解决方案1】:

关于两者的区别我没有详细的答案,Vue 不适用于带有_ 的 mdi 图标

这不会有多余的空间:

<v-icon> mdi-credit-card-outline </v-icon>

【讨论】:

  • 不幸的是,当我这样做时,根本没有出现任何图标。事实上,如果我在任何图标上使用 mdi- 前缀,它们都不会出现
  • 有些 mdi 图标不能正常工作,就像上面所说的,我真的不知道原因。但是你可以添加mdi lib,寻找Material icons:vuetifyjs.com/en/features/icon-fonts/#usage
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-19
  • 2011-12-15
  • 2018-06-15
相关资源
最近更新 更多