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-alpha.1或更高版本，<v-icon>   component具有size属性，您可以使用该属性设置精确值   大小

Answer 2

这是来自v-icon

的示例内联css

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

这是我的样品笔

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

Answer 3

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

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

Answer 4

我建议您仅使用<i>标记并自行设置图标类别。 <v-icon>仍然没有提供太多优势，而v-icon类是当您真正想要的只是font-size：继承时设置特定字体大小的类。

Answer 5

我不确定颜色的变化是否会给您带来图标大小变化的问题，但是如果您不想每次都设置图标大小，您可以选择传入自定义变量以覆盖全局默认值，如下所示：

$icon-size: 20px;

您可以在 Vuetify Documentation

中找到更多相关信息