SVG 100% width - auto height

Expected behavior I have many SVGs in a each. I want to ensure each SVG is 100% wide and height cna be auto. How do I achieve this? I tried img-fluid and embed-responsive...

Note, I am and need to import the SVGs as ReactComponent because I have 1000 SVGs and by doing it like this it gets in-lined i..e not singular requests...

Actual behavior It always displays the full width or some other odd behavior having tried a few things.. I have left commented out code to show some things I have tried.

Resources (screenshots, code snippets etc.)

            <Image
                alt={ "Block " + index }

                // viewBox={ "0 0 " + this.state.width.toString() + "300" }
            // preserveAspectRatio="xMinYMin meet"
            // width={ this.state.width - 50 }
            // preserveAspectRatio="xMinYMin slice"
            //  className="embed-responsive"
            // preserveAspectRatio="none"
            //viewBox={ "0 0 50 50" }
            // height={ imageHeight }
            /*
            width={ imageWidth }
            */
            />