@Stanislav6

Как правильно вывести SVG иконку из внешнего файла?

Здравствуйте! Не выводится иконка через <use>. Полагаю, загвоздка с путями до файла, но я не осилил, к сожалению. Помогите разобраться.

Путь до файла спрайта:
папка сайта/assets/img/icons-sprite.svg

Внутри спрайта:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <symbol id="bag" viewBox="0 0 24 24"><g data-name="Слой 2"><g data-name="Слой 1"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.17 6h-2.88A5.5 5.5 0 006.71 6H3.83a.89.89 0 00-.88.83l-.89 14.23a.89.89 0 00.88.94h18.12a.89.89 0 00.88-.94l-.89-14.23a.89.89 0 00-.88-.83zM12 3a4.51 4.51 0 014.24 3H7.76A4.51 4.51 0 0112 3zM3.06 21l.88-14h16.12l.88 14z"/></g></g></symbol>
</svg>


Вывожу:
<svg>
  <use xlink:href="assets/img/icons-sprite.svg#bag"></use>
</svg>


и пустота. В инспекторе, внутри use #shadow-root (closed)
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы