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;
}

If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon> component has a size attribute which you can use to set an exact 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>

或者你可以在 v-icon 标签中使用 x-small, small, medium, large 和 x-large 例如

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

Answer 4

我建议只使用 <i> 标签，并尽可能自己设置图标 classes。 <v-icon> 并没有提供太多优势，v-icon class 是设置特定字体大小的那个，而你真正想要的只是字体大小：继承。

Answer 5

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

$icon-size: 20px;

您可以在 Vuetify Documentation

中找到更多相关信息

Vuetify 图标大小

Vuetify icon size

css

vue.js

vuejs2

stylus

vuetify.js