У меня есть файл спрайта SVG, который был предоставлен дизайнерами для моего приложения. Соглашение, которое я хотел бы, чтобы я использовал для рендеринга своих SVG-значков, заключается в том, чтобы загрузить спрайт в верхней части элемента <body>, а затем отобразить значки следующим образом:
<svg class="u-icon-gear-dims">
<use xlink:href="#gear"></use>
</svg>
Это работает, когда я добавляю встроенный спрайт SVG, то есть помещаю все содержимое спрайта SVG в мой файл template.html. Добавление встроенного спрайта делает html-файл уродливым, но, что более важно, необходимость сделать это вручную вызывает проблемы с ремонтопригодностью.
В настоящее время я обращаюсь к отдельным SVG-файлам напрямую для визуализации значков, но это влияет на производительность, поскольку часто существует задержка в доли секунды, когда значок еще не загружен.
Я нашел эту ТАКУЮ тему, но, кажется, нет жизнеспособного ответа.
Кстати, наше приложение использует веб-пакет, и в настоящее время я пытаюсь загрузить SVG-спрайт в файл шаблона HTML.
Как динамически загрузить SVG-спрайт из файла в HTML-файле?