能否通过类为SVG的<use>标签设置宽高？

直接给<use>元素添加类来设置width/height不会生效，因为<use>只是引用容器，图标实际显示的尺寸由外层的<svg>元素控制。这里有两种可行方案：

方案1：将类移至外层<svg>元素 #

把样式类直接加在包裹<use>的<svg>上，这样就能直接控制图标尺寸：

.testSvgIcons {
    width: 30px;
    height: 30px;
    fill: green;
}

<svg style="display: none;">
    <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
        <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
    </symbol>
</svg>

<svg class="testSvgIcons">
    <use href="#tick-icon"></use>
</svg>

方案2：用CSS选择器关联父元素（无需修改HTML） #

如果不想调整HTML结构，可以利用:has()选择器选中包含<use>的<svg>元素，为其设置尺寸：

.testSvgIcons {
    fill: green;
}

/* 选中包含<use>的.testSvgIcons元素 */
svg.testSvgIcons:has(> use) {
    width: 30px;
    height: 30px;
}

<svg style="display: none;">
    <symbol id="tick-icon" viewBox="0 0 515.556 515.556">
        <path d="m0 274.226 176.549 176.886 339.007-338.672-48.67-47.997-290.337 290-128.553-128.552z"/>
    </symbol>
</svg>

<svg class="testSvgIcons">
    <use href="#tick-icon"></use>
</svg>

原理说明 #

<symbol>本身没有默认尺寸，当通过<use>引用时，需要外层<svg>提供可视区域（通过width/height或viewBox）来确定图标显示大小。<use>元素的尺寸样式仅调整自身引用区域的范围，不会影响内部图标的缩放，所以直接给<use>加尺寸样式无法达到预期效果。

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