在创建反应应用程序文档之后，我imported a svg as a react component。

但是，无论是内联还是通过CSS，我似乎都无法正确调整其大小或位置。

我想将SVG组件缩放到与其他图标相同的大小100px x 100px，然后将其放置在屏幕的底部中心。

我尝试为svg组件设置宽度和高度道具。

<IconClose
  classname="bubbleBin"
  alt="close bubble"
  height="100px"
  width="100px"
  // viewBox="0 0 100 100"
/>

和在CSS中。

.bubbleBin {
  display: flex;
  position: absolute;
  pointer-events: none;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
}

这是复制它的最少代码。如果需要，请在Sandbox中输入完整代码。

...
import { ReactComponent as IconClose } from './assets/icon_close.svg';

function App() {
  const ICON_WIDTH = 100;
  const ICON_HEIGHT = 100;

  return (
    <div style={{ display: 'flex' }}>
       <img
         src={require('./assets/cat_icon.png')}
         width={String(ICON_WIDTH)}
         height={String(ICON_HEIGHT)}
         alt="cat icon"
         draggable={false}
       />
      <IconClose
        classname="bubbleBin"
        alt="close bubble"
        height="100px"
        width="100px"
      />
    </div>
  );
}

我希望svg与猫图标的大小相同，但这是结果。

谢谢。