如何更改Vuetify图标大小的默认值? (x小,x大等)

问题描述 投票:1回答:1

我想更改常规图标尺寸道具的默认值。支持x-small,small,default,large,x-large,因此我可以在整个项目中定义组件,例如<v-icon x-large>mdi-close</v-icon>,并在构建时一次控制所有尺寸,而无需使用自定义类,内联样式或使用道具size="20"或类似的东西,这将允许我在整个项目中更新所有图标,以防万一设计因任何原因而更改了大小,只需在一个位置更改代码即可。

例如,v-btn有一个_variables.scss文件,其中包含一个映射($ fab-icon-sizes),您可以在项目中覆盖它_variables.scsshttps://github.com/vuetifyjs/vuetify/blob/v2.2.23/packages/vuetify/src/components/VBtn/_variables.scss#L56-L65

但是我能找到的v-icon只是打字稿文件中的(枚举SIZE_MAP),据我所知,它很难轻易更改。https://github.com/vuetifyjs/vuetify/blob/v2.2.23/packages/vuetify/src/components/VIcon/VIcon.ts#L17-L24

在我看来,v-btn行为也应在v-icon中复制。

注意:这是基于Vuetify v2.2.23的。

vue.js vuejs2 vuetify.js
1个回答
3
投票

您已经知道,sizes of the icons are set in the code并且无法轻松按照您的描述方式进行修改。如果您想按照您的建议去做,我认为您可以选择几种方法:

© www.soinside.com 2019 - 2024. All rights reserved.