如何增加 Ionic 中复选框图标的大小？

Question

我正在尝试增加刻度线的大小而不改变其他任何东西的大小。我只是想让刻度线更高更宽。现在刻度大小是：8.4 x 5.87，我想将其设为 11 x 9，同时将矩形保持为 20x20。

目前状态：

所需状态：

这是我当前的代码：

<template>
  <ion-checkbox :checked="isStateSelected(state.name)" class="h-5 w-5 ml-auto" />
</template>
<style scoped>
ion-checkbox {
    --size: 20px;
    --checkbox-background-checked: rgb(var(--sf-action));
    --checkmark-color: rgb(var(--txt-primary-color));
    --border-color-checked: rgb(var(--sf-action));
    --border-color:rgb(var(--br-default));
    --border-radius: 6px;
    /* zoom: 1.5; */
}

ion-checkbox::part(mark) {
    stroke-width: 1.5px;
    width: 25px;
    height: 25px; 
}
</style>

如您所见，我尝试了缩放属性，但它增加了整个图标的大小，而不仅仅是勾号的大小。然后，我也尝试调整标记的阴影部分，但只能将笔触变大。宽度和高度调整没有影响。

这是我的设置和当前版本：

"@nuxtjs/ionic": "^0.15.1",

"node_modules/@nuxtjs/ionic": {
    "version": "0.15.1",
    "resolved": "https://registry.npmjs.org/@nuxtjs/ionic/-/ionic-0.15.1.tgz",
    "integrity": "sha512-S6P+83fvJCNX6nAuiYl2YcHSy6G9pVDdUWwDhM4PDxABbCtklxu9J/pZdgfGESAuy3JyKBldOmnpefKk/5eaxg==",
    "dependencies": {
    "@capacitor/cli": "^6.1.0",
    "@capacitor/core": "^6.1.0",
    "@ionic/cli": "^7.2.0",
    "@ionic/vue": "^8.2.5",
    "@ionic/vue-router": "^8.2.5",
    "@nuxt/kit": "^3.12.3",
    "@unhead/vue": "^1.9.16",
    "ionicons": "^7.4.0",
    "pathe": "^1.1.2",
    "pkg-types": "^1.1.3",
    "ufo": "^1.5.3",
    "unimport": "^3.7.2"
    }
},

我知道有人问了一个类似的问题，标题是“Ionic 4 增加复选框图标大小”，但这个问题是在大约 6 年前提出的，而且没有有效的答案，所以也许有些东西发生了变化。

尺寸：

Answer 1

ion-checkbox {
  --size: 24px;
}

  <ion-item>
    <ion-label>ACCEPT TERMS</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>

使用

--size

属性，您可以增加复选框的大小