Шаблон Vue PWA с использованием спрайтов SVG

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

<svg><use xlink:href = "../assets/fa-regular.svg#bars"/></svg>

Но я всегда получаю 404 для fa-regular.svg. Что мне не хватает? Я даже не знаю, с чего начать. Это проблема с загрузчиком vue? Проблема с веб-пакетом?

Может кто сталкивался с подобной проблемой.

С Уважением

Создание фильтров для вашего сайта
Создание фильтров для вашего сайта
Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
0
0
152
1

Ответы 1

От https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

Так что попробуйте это:

<svg><use href = "../assets/fa-regular.svg#bars"/></svg>

Другие вопросы по теме