我想要一个未知大小的SVG图标，居中对齐到一些文本的左侧。我最好使用Flex。
这是SVG和文本容器的CSS：

.container {
    background-color: pink;
    display: flex;
    align-items: center;
    margin: 10px;
    width: 200px;
}

字符集
这很好用：

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect width="24" height="24"/>
  </svg>
  <div>ALIGNED ICON</div>
</div>

型
然而，当我将SVG Package 在另一个div中时，div的高度变得不必要地大，导致SVG和文本不对齐：

<div class="container">
    <div>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <rect width="24" height="24"/>
        </svg>
    </div>
    <div>MISALIGNED ICON</div>
</div>

型
这里是CodePen的链接
实际上，这是一个React项目，我使用外部SVG组件，我无法控制或知道其大小。因此，我无法直接将任何样式应用于SVG元素，也无法设置 Package 器div的高度以匹配SVG的高度。

在另一个div中 Package SVG时，如何对齐SVG和文本？