Библиотека
@svg-use это набор инструментов и плагинов сборки для использования SVG с помощью механизма <use href>. Автор библиотеки хочет решить проблемы подхода SVG-in-JS с помощью <use href>, но при этом оставляя возможность кастомизации иконок. Подход SVG-in-JS популярен и удобен для вставки SVG иконок на сайт. В этом подходе с помощью библиотеки svgr SVG преобразуется в React компонент. У этого подхода есть свои плюсы: возможность кастомизации иконок и удобство доставки SVG на сайт внутри JS бандла. Однако, у этого подхода есть и свои минусы:
🔴 Каждый SVG компонент сначала парсится в JS, потом в HTML, когда вставляется в дерево, это влияет на производительность.
🔴 Раздувание HTML дерева.
🔴 Увеличение размера загружаемого JS бандла.
Библиотека
@svg-use встраивается в сборщик и генерирует SVG файлы как asset. Внутри сгенерированного SVG файла будут прописаны CSS переменные. Как выглядит использование библиотеки @svg-use:
import { Component as Arrow } from './icon.svg?svgUse';
return <Arrow color="red" />;
В результате на месте использования компонента Arrow рендерится SVG:
<svg viewBox="0 0 24 24">
<use
href="https://my-site.com/assets/icon-someHash.svg#use-href-target"
style="--svg-use-href-color: red"
></use>
</svg>
В asset проекта генерируется файл icon-someHash.svg:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="var(--svg-use-href-color, #111)"
id="use-href-target"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
https://fotis.xyz/posts/introducing-svg-use/
