我正在制作一个vue.js应用程序，它使用大量不同的图标，所以我决定在node.js中制作一个小型图标构建器来标准化它们的使用，它还"裁剪"每个svg，使其适合其父(使用viewbox属性).
尽管我偶然发现了一个问题，但将图标zoom 以适应正方形会让更多的"方形"看起来比圆形的要大，所以我想将它们zoom 成圆圈:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem;
}
.title {
font-family: sans-serif;
font-weight: 600;
font-size: 24px;
margin: 0;
}
.grid {
display: flex;
gap: 1.5rem;
}
.group {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
}
.bg {
width: 80px;
height: 80px;
background-color: lightgray;
}
.zone {
border: 2px solid red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.zone--wanted {
border-radius: 50%;
}
.icon {
width: 100%;
height: 100%;
background-color: coral;
}
.icon--rounded {
border-radius: 20%;
}
.icon--circle {
border-radius: 50%;
}
.icon-scaled--rounded {
width: 80%;
height: 80%;
}
.icon-scaled--square {
width: 70.71068%;
height: 70.71068%;
}<div class="container">
<p class="title">What I have :</p>
<div class="grid">
<div class="bg">
<div class="zone">
<div class="icon"></div>
</div>
</div>
<div class="bg">
<div class="zone">
<div class="icon icon--rounded"></div>
</div>
</div>
<div class="bg">
<div class="zone">
<div class="icon icon--circle"></div>
</div>
</div>
</div>
<p class="title">What I want :</p>
<div class="grid">
<div class="bg">
<div class="zone zone--wanted">
<div class="icon icon-scaled--square"></div>
</div>
</div>
<div class="bg">
<div class="zone zone--wanted">
<div class="icon icon--rounded icon-scaled--rounded"></div>
</div>
</div>
<div class="bg">
<div class="zone zone--wanted">
<div class="icon icon--circle"></div>
</div>
</div>
</div>
</div>你们知道如何做到这一点吗？