问题:Vuetify 图标大小

最近我正在使用 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 中

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

之前

之后

所以,我的问题是:

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

解答

不幸的是,在当前版本(0.17.6)中,您将需要 css 来创建自定义图标大小。

如果您想在您的应用程序中设置自定义图标的默认大小,您需要将其定位为 css。

要定位图标大小,您可以使用以下内容:

.icon {
  font-size: 20px;
}

如果您使用的是 Vuetify v1.0.0-alpha.1 或更高版本,<v-icon>组件有一个size属性,您可以使用它来设置确切的大小。