代码之家 › 专栏 › 技术社区 › Eternal_N00B

Vuetify图标大小

vuetify.js stylus vuejs2 vue.js css

Eternal_N00B · 技术社区 · 7 年前

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

在里面 应用程序。vue

因此,当我在应用程序中测试更改颜色时,它按预期工作,目前为止效果良好。然后我注意到它改变了图标的大小,如下图所示:

Before

After

所以,我的问题是:

有没有办法通过不使用CSS来解决这个问题?如果是,如何?或者如果没有办法,那么,我应该如何使用CSS解决它?

5 回复 | 直到 7 年前

zia muhammad Isuru Chandrasiri 4 年前

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

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

或您可以在v图标标记中使用x-small、small、medium、large和x-large 例如

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

James Vansteenkiste 7 年前

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

如果你想在你的应用程序中设置图标的自定义默认大小,你需要以css为目标。

要确定图标大小,可以使用以下选项:

.icon {
  font-size: 20px;
}

如果您使用的是Vuetify v1.0.0-alpha。1或更高版本, <v-icon> 组件具有 size 可用于设置精确大小

Kent Dela Cruz Fueconcillo 7 年前

下面是v-icon的内联css示例

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

这是我的样笔

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

Sensei 5 年前

我建议只使用 <i> 如果可以,可以自己标记和设置图标类。 <v-icon> 无论如何,它并没有提供太多的优势,v-icon类是一个设置特定字体大小的类,而您真正需要的是字体大小:inherit。

Patsy Iturbe 4 年前

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

$icon-size: 20px;

您可以在 Vuetify Documentation

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前