Для того чтобы поместить все ваши SVG иконки в один файл и извлекать их в свой код по адресу, вы можете использовать технику встраивания SVG-иконок и SVG-спрайтов.
Встраивание SVG-иконок позволяет вам вставить SVG-код непосредственно в HTML-файл, используя тег <svg>. Однако, если у вас много иконок, встраивание каждой иконки отдельно может быть неудобным и снижать производительность. В этом случае вы можете использовать SVG-спрайт - файл, содержащий все ваши SVG-иконки, объединенные в одну общую область.
Вот как вы можете создать SVG-спрайт и извлекать иконки по адресу:
1. Создайте файл-спрайт, где будет содержаться весь SVG-код вашего набора иконок.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-1" viewBox="0 0 24 24">
<!-- ваш SVG-код для иконки 1 -->
</symbol>
<symbol id="icon-2" viewBox="0 0 24 24">
<!-- ваш SVG-код для иконки 2 -->
</symbol>
<!-- добавьте остальные иконки -->
</svg>
2. Сохраните этот файл с расширением .svg (например, "icons.svg") и загрузите его на ваш сайт или сервер.
3. В вашем HTML-файле добавьте ссылку на файл-спрайт.
<!DOCTYPE html>
<html>
<head>
<!-- ваши мета-теги и другие заголовки -->
</head>
<body>
<!-- ваш контент -->
<svg class="hidden">
<use xlink:href="icons.svg#icon-1"></use>
</svg>
</body>
</html>
4. Теперь вы можете использовать иконку в своем коде, указывая адрес иконки в теге <use>.
<div class="icon-container">
<svg class="icon">
<use xlink:href="icons.svg#icon-1"></use>
</svg>
</div>
Таким образом, все ваши SVG-иконки будут загружены вместе в один файл-спрайт, и вам будет легко извлекать их в свой код, указывая адрес иконки. Помимо этого, использование SVG-спрайтов помогает сократить количество запросов к серверу и улучшить производительность вашего веб-сайта.