Работа с SVG-спрайтами: эффективный подход к управлению пиктограммами

Контент внутр. <svg> , присвоенный каждому элементу <symbol>т внутри себя несколько элементов , каждый из которых представляет отдельную картинку. Для доступа к этим картинкам испа такого спрайта проста и хорошо известна: корневой элемент содержиidкасается работы с пиктограммами. Структур<symbol>струментом для веб-разработчиков, особенно когда дело SVG-спрайты стали незаменимым ин<symbol> не отображается напрямую

<svg>
<symbol id="icon-one">...</symbol>
<symbol id="icon-two">...</symbol>
<symbol id="icon-three">...</symbol>
</svg>

Такие SVG-спрайты широко используются для организации наборов пиктограмм, и они действительно удобны в работе, что делает их популярными среди разработчиков.

Содержание

Но что если вы не знаете содержимого спрайта?
Пример скрипта для отображения
Пример использования с иконками ionicons
Заключение

Но что если вы не знаете содержимого спрайта?

Бывают ситуации, когда у вас есть SVG-спрайт, но вы не знаете, какие изображения он содержит. В таких случаях может пригодиться небольшой скрипт, который обходит все элементы <symbol> внутри SVG и выводит их на экран. Это позволит быстро просмотреть все иконки, содержащиеся в спрайте.

Пример скрипта для отображения

const sprite = document.querySelector("svg");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
document.body.insertAdjacentHTML("beforeend", `
<svg width="50" height="50" alt="${symbol.id}">
<use xlink:href="#${symbol.id}" />
</svg>
`);
});

Этот скрипт находит все элементы <symbol> внутри SVG, а затем выводит каждую иконку на страницу в виде отдельного SVG-элемента с заданными размерами (в данном случае 50×50 пикселей). Уникальный id используется для ссылки на нужный символ с помощью элемента <use>.

Пример использования с иконками ionicons

Для демонстрации работы скрипта можно взять набор иконок из библиотеки ionicons, полный SVG-спрайт которых можно найти на GitHub. Подключив этот спрайт и запустив скрипт, вы получите все иконки, отображенные на странице, что упростит дальнейшую работу с ними.

Заключение

SVG-спрайты — мощный инструмент для организации и управления иконками на веб-странице. В ситуациях, когда вам необходимо быстро просмотреть содержимое спрайта, простой скрипт на JavaScript поможет быстро вывести все иконки на экран. Это особенно полезно, если вам нужно работать с большими наборами пиктограмм или если спрайт был предоставлен вам без документации.