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

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

如果您想设置一个定制的默认大小的图标横跨您的应用程序，您将需要目标，它将css。

若要以图标大小为目标，可以使用以下内容：

.icon {
  font-size: 20px;
}

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

Answer 2

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

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

或者你可以在v图标标签中使用x-小、小、中、大和x-大.

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

Answer 3

下面是来自v图标的内联css示例

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

这是我的样本笔

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