无需硬编码尺寸与JS，如何让外层SVG自适应内部symbol尺寸？

你可以通过给symbol注入宽高比变量，配合CSS动态计算outer元素尺寸实现需求，无需给每个outer单独设置宽高，也不需要JS支持： #

实现步骤 #

1. 给雪碧图的symbol添加宽高自定义属性 #

在定义每个symbol时，通过内联样式将viewBox的宽、高值存入CSS变量：

<svg style="display: none;">
  <symbol viewBox="0 0 32 32" id="square-thing" class="inner" style="--vw: 32; --vh: 32;">
    <path d="..."/>
  </symbol>
  <symbol viewBox="0 0 64 32" id="wide-thing" class="inner" style="--vw: 64; --vh: 32;">
    <path d="..."/>
  </symbol>
  <symbol viewBox="0 0 32 128" id="tall-thing" class="inner" style="--vw: 32; --vh: 128;">
    <path d="..."/>
  </symbol>
  <!-- 其余symbol同理添加变量即可 -->
</svg>

如果使用构建工具生成雪碧图，可直接配置规则自动注入这两个变量，无需手动修改。

如果不能修改雪碧图的symbol定义，目前纯CSS暂不支持直接读取symbol的viewBox属性值，该方案是当前满足需求的最优实现。

2. 添加.outer对应的CSS规则 #

.outer {
  /* 基准高度随父元素字体大小变化，1em等于当前行的文字高度 */
  height: 1em;
  /* 宽度根据symbol的宽高比自动计算，完全贴合内容无空白 */
  width: calc(1em * var(--vw) / var(--vh));
  /* 行内对齐，消除和文字混排时的下方空白 */
  vertical-align: middle;
  /* 可选：继承父元素文字颜色，方便统一修改图标颜色 */
  fill: currentColor;
}

效果说明 #

• 引用symbol时不需要对<svg class="outer">做任何修改，直接按原有写法使用即可
• 所有图标会自动适配父元素的字体大小，宽高完全贴合symbol的原始比例，没有多余空白
• 兼容所有主流现代浏览器
  内容的提问来源于stack exchange，提问作者Luke A. Leber