Vuetify图标大小-Java 学习之路

最近我使用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

所以，我的问题是：

Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?

2 回答

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

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

要定位图标大小，您可以使用以下内容：
```
.icon {
  font-size: 20px;
}
```
如果您使用的是Vuetify v1.0.0-alpha.1或更高版本，则<v-icon>组件具有一个size属性，您可以使用该属性来设置确切的大小 .
回复于 2024-05-04T11:33:15+08:00
2

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

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

这是我的样品笔

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

回复于 2024-05-04T11:33:15+08:00

Vuetify图标大小

2 回答

相关问题