Как сделать так, чтобы ширина моего изображения соответствовала ширине моего SVG фактического?

Question

Вот демо: https://stackblitz.com/edit/react-2lppan

Вот иллюстрация, как вы можете видеть элементы - либо div, либо сам элемент svg, я думаю - ширина не прилипает к Изображение SVG:

Я бы хотел, чтобы фон моего зеленого цвета, представляющий ширину изображения, соответствовал фактической ширине изображения. У меня есть поиск в Google, но ничего интересного не нашел. В основном я нашел width: max-content, но это не удалось.

Вот фрагмент моего ответа:

import React, { Component, createRef } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import style from  './style.css';
import callIcon from "./call.svg"

export default class App extends Component {

    constructor(props){ 
        super(props)
        this.contactIcon=createRef();
    }

    componentDidMount(){
        console.log("this.CONTACTICON: ", this.contactIcon.current.getBoundingClientRect())
    }

    displaySvgIllustration=className=>(
        <svg        
            className={className}
            width="100%" height="100%"
            xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">       
            <image ref={this.contactIcon} href={callIcon} height="100%" width="100%"/>
        </svg>
    )

    render() {
        return (
            <div>
                {this.displaySvgIllustration(style.contact_icon)}
            </div>
        );
    }
} 

render(<App />, document.getElementById('root'));

Вот мой CSS:

.contact_section_item{  
  width:100%;
  margin-top:3vh;
  align-self: flex-start;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  font-size: 1.25em;
  background:green;
}
.contact_icon {
  display: flex;
  max-height:7vh;
  max-width:7vw; 
  background:green;
} 
div{
  background:green;
}