SVG-sprite в background-image

Question

Пытаюсь вставить иконки из svg-sprite через background-image, но почему-то они не отображаются. Если подключать в html-файле через <use>, иконки отображаются, то есть сам спрайт без ошибок. В интернетах нашел два примера подключения через background-image, но ни закомментированный, ни второй не работают, в devtools ошибки тоже нет, отображается подключение элемента 0х0

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="fb" viewBox="0 0 70 70">
    <g>
      <g clip-path="url(#clip0)">
<path d="M35 70.0001C54.33 70.0001 70 54.33 70 35.0001C70 15.6701 54.33 4.57764e-05 35 4.57764e-05C15.6701 4.57764e-05 3.8147e-05 15.6701 3.8147e-05 35.0001C3.8147e-05 54.33 15.6701 70.0001 35 70.0001Z" fill="#3C5A9A"/>
<path d="M46.3805 10.7432H38.6271C34.026 10.7432 28.9083 12.6783 28.9083 19.3478C28.9308 21.6717 28.9083 23.8973 28.9083 26.4021H23.5855V34.8724H29.073V59.2567H39.1567V34.7114H45.8123L46.4145 26.3784H38.983C38.983 26.3784 38.9996 22.6714 38.983 21.5949C38.983 18.9593 41.7254 19.1102 41.8904 19.1102C43.1954 19.1102 45.7329 19.114 46.3843 19.1102V10.7432H46.3805Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="70" height="70" fill="white"/>
</clipPath>
</defs>
    </g>
  </symbol>
</svg>

.integration__list-link {
  display: block;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}

.fb {
  /*background-image: url("../sprite.svg#fb");*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><use xlink:href="sprite.svg#fb"></use></svg>');
}

<ul class="list-reset integration__list">
  <li class="integration__list-item">
    <a href="#" class="integration__list-link fb"></a>
  </li>
</ul>

БЛОГ НА HUSL

SVG-sprite в background-image

Ответы (0 шт):