如何让svg.svg-icon.button-icon 14x14和Use 10.45 x10.45一致

为了让SVG图标`svg.svg-icon.button-icon`保持尺寸一致性，即使在不同的应用中大小有变化，你需要确保两个部分——`.svg-icon`和`.button-icon`本身以及它们的实际使用`Use`元素——都设置了相应的CSS样式。

首先，对于`.svg-icon.button-icon`本身，你可以添加一个视口宽度（viewport width）单位的width属性，例如：

.svg-icon.button-icon {
  width: 14vw; /* 这里表示相对于视口宽度的14%，可以保持14x14像素的比例 */
  height: auto; /* 如果高度应保持比例，保持auto; 否则设置成对应的高度 */
}

接下来，对于`<use>`元素，你可以通过设置其`height`和`width`属性来匹配目标尺寸，比如10.45x10.45像素：

<button>
  <svg>
    <use xlink:href="#svg.svg-icon.button-icon" width="10.45px" height="10.45px"></use>
  </svg>
</button>

或者，在CSS中动态调整`<use>`元素的尺寸：

.use-element {
  width: 100%; /* 如果需要百分比缩放，可以设为100% */
  height: auto;
}

/* 或者针对某个具体的按钮应用 */
.button-icon-use {
  width: 10.45rem; /* rem相对于根元素，这里相当于10.45 * (根元素字体大小 / 16) */
  height: 10.45rem;
}

这样，无论屏幕分辨率如何变化，`.svg-icon.button-icon`都会按比例缩放，而`<use>`元素会保持指定的尺寸。