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中

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

之前

后

所以,我的问题是:

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

Answer 1

You can give icon size in px using size property in Vuetify icons.

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

Answer 2

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

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

要确定图标大小，您可以使用以下命令：

.icon {
  font-size: 20px;
}

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

Answer 3

这是来自 v-icon 的示例内联 css

<v-icon style="font-size: 5px;">home</v-icon>

这是我的样品笔

https://codepen.io/anon/pen/LdpgmY