Importo mi svg así:

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

este es mi elemento:

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

pero representó mi svg como un objeto como este:

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

mi archivo svg:

 <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>