Пост @svg-use для импорта SVG

@svg-use для импорта SVG Библиотека @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/