如何调整Vuetify 3中v-checkbox组件的图标尺寸？

方法1：用组件自带的size属性快速调整 #

Vuetify 3的v-checkbox支持通过size属性直接调整整体尺寸（图标会跟着缩放），可以用预设值或者自定义数值：

• 预设值可选："x-small"、"small"、"default"、"large"
• 自定义数值直接传数字（默认单位px），比如16

示例代码：

<v-checkbox label="小尺寸复选框" size="small" />
<v-checkbox label="自定义尺寸复选框" :size="16" />

这个方法最省事，适合不需要单独调图标和标签间距的场景。

方法2：自定义CSS精准控制图标 #

如果size属性的调整达不到要求，用Vue的深度选择器:deep()直接修改图标样式：

单个组件生效 #

在当前组件的<style>里加：

:deep(.v-checkbox__icon) {
  width: 16px;
  height: 16px;
}

/* 可选：调整勾选标记的大小 */
:deep(.v-icon.v-checkbox__check) {
  font-size: 12px;
}

全局所有复选框生效 #

在全局样式文件（比如src/assets/main.css）里加：

.v-checkbox__icon {
  width: 16px;
  height: 16px;
}

.v-icon.v-checkbox__check {
  font-size: 12px;
}

方法3：全局主题变量统一配置 #

要是想整个项目的复选框图标都用同一尺寸，修改Vuetify的主题变量：

在vuetify.ts（或vuetify.js）里扩展主题：

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    variables: {
      checkboxIconSize: 16,
      checkboxCheckSize: 12,
    },
  },
})

如果上述变量不生效，也可以直接覆盖CSS全局变量：

:root {
  --v-checkbox-icon-size: 16px;
  --v-checkbox-check-size: 12px;
}

内容的提问来源于stack exchange，提问作者Anemoiaa