[React/css] svg 잘려 나오는 현상

import { ReactComponent as Rocket } from "../../assets/ic-spaceship.svg";
import { ReactComponent as Fire } from "../../assets/ic-fire.svg";
//...
return (
        <>
            <Rocket/>
            <Fire/>
        </>
    )

이렇게 작성했더니 아래 사진과 같이 불 모양만 잘려 나오는 현상을 발견했다.

하지만 로켓을 주석처리하고 불 모양만 따로 로드한다면 또 잘 떴다. 

로켓이 차지하는 공간이 문제인가 싶어서 개발자도구로 봤더니 영역은 서로의 영역을 침범하지 않도록 직사각형으로 처리되어 있었다.

 

//...
return (
        <>
            <Rocket src={require("../../assets/ic-spaceship.svg").default}/>
            <Fire src={require("../../assets/ic-fire.svg").default}/>
        </>
    )
    
//...

const Fire = styled.img`
    width: 50px;
`;

const Rocket = styled.img`
    width: auto;
`

그래서 src와 img 태그로 바꿔보았더니 올바르게 떴다. 대체 왜 이런걸까? 아직까지는 왜인지 모르겠다. 나중에 다시 봐야겠다.