css - Vuetify 图标大小

Question

最近我正在使用 Vuetify 开发一个应用程序，但在更改 Vuetify 默认颜色时遇到了麻烦。所以我最终以这个结束:

https://github.com/vuetifyjs/vuetify/issues/299

如其所说，我添加了以下代码:

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

在App.vue

因此，当我在应用程序中测试更改颜色时，它按预期工作，到目前为止一切顺利。然后我注意到它改变了图标的大小，如下图所示:

Before

After

所以，我的问题是:

有没有办法不使用 CSS 来解决这个问题？如果是这样，如何？或者没有办法，那我应该怎么用CSS解决呢？

Answer 1

您可以使用 Vuetify 图标中的 size 属性以 px 为单位指定图标大小。

<v-icon size="25">home</v-icon>

或者你可以在 v-icon 标签中使用 x-small, small, medium, large 和 x-large例如

<v-icon small>home</v-icon>