I import my svg like this:

import Calling from '../../styles/svg/icon/calling.svg'

this is my element:

 <li><a href="" title="" style={{backgroundImage: `url("data:image/svg+xml,${Calling}")`}}><span className="text">8888</span></a></li>

but it rendered my svg as a object object like this:

<li><a href="" title="" style="background-image:url(&quot;data:image/svg+xml,[object Object]&quot;)"><span class="text">8888</span></a></li>

my svg file:

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.622 3.01577C16.3701 2.59582 14.8583 1 13.8504 1C13.5144 1.08399 13.2625 1.16798 13.0105 1.41995C12.1706 2.25984 11.4987 3.18372 10.9108 4.19159C10.7428 5.19946 11.8346 5.7034 11.4987 6.71127C10.6588 8.895 8.97901 10.5748 6.79528 11.4147C5.78741 11.7507 5.19948 10.5748 4.2756 10.8268C3.26772 11.4147 2.34383 12.0866 1.50394 12.9265C1.25197 13.1785 1.08399 13.4305 1.08399 13.7664C1.08399 14.8583 2.76378 16.3701 3.09973 16.5381C3.85564 17.126 4.86352 17.126 6.12336 16.5381C9.56693 15.1102 15.1102 9.65092 16.622 6.03937C17.126 4.86352 17.126 3.77167 16.622 3.01577Z" stroke="#00C193" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.87891 1.25146C3.7713 1.58742 1.3356 4.02312 0.999642 7.13073" stroke="#00C193" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.87891 4.19141C5.3671 4.44337 4.19124 5.61923 3.93927 7.13104" stroke="#00C193" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>