Vuetify 图标大小

Posted 2023-02-22

【中文标题】Vuetify 图标大小

【英文标题】：Vuetify icon size

【发布时间】：2018-06-15 14:06:23

【问题描述】：

最近我正在使用 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来解决呢？

【参考方案1】：

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

$icon-size: 20px;

您可以在Vuetify Documentation中找到更多相关信息

【参考方案2】：

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

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

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

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

【讨论】：

感谢这是最好的解决方案。

【参考方案3】：

如果可以的话，我建议只使用<i> 标签并自己设置图标类。 <v-icon> 无论如何都没有提供太多优势，而 v-icon 类是设置特定字体大小的类，而您真正想要的是 font-size: inherit。

【参考方案4】：

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

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

这是我的样品笔

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

【讨论】：

请编辑您的答案以将代码添加到答案本身。

【参考方案5】：

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

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

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

.icon 
  font-size: 20px;

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

【讨论】：

我目前正在使用你提到的 0.17.6 版本，所以现在，你是对的，显然解决这个问题的唯一方法是使用 css。非常感谢您的回答，我正在努力解决这个问题。