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来解决它？

原文由 Eternal_N00B 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

要定位图标大小，您可以使用以下内容：

 .icon {
  font-size: 20px;
}

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

原文由 James Vansteenkiste 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 $icon-size: 20px;

您可以在 Vuetify 文档 中找到有关此的更多信息

原文由 Patsy Iturbe 发布，翻译遵循 CC BY-SA 4.0 许可协议