Как добавить SVG иконки в React | React SVG
Оптимизация React приложения. SVG.
Привет друг ! В этой статье попробуем разобраться каким образом мы можем оптимизировать наше приложение 🤔. Но не везде и всюду 😇, а хотя бы уменьшить размер .svg файлов. Мотивация: Логика крайне проста, чем меньше весят твои .svg файлы, тем легче будет клиенту загружать твой божественный проект. Мы конечно можем, по заветам наших дедов, каждую .svg-шку сжимать, на каком нибудь сервисе, жмякнув в поисковике "сжать svg". Но мы с тобой, крутые ребята 🧸, и попробуем автоматизировать данный процесс...
Что такое SVG-спрайт и для чего он нужен?
SVG-спрайт — это файл для хранения векторной графики формата SVG. Записывается по принципу: file-name.svg Для чего нужен SVG-спрайт? Для динамической стилизации векторных изображений через CSS и оптимизации. Чем хороши спрайты? ◌ Встроенные svg или по-другому "инлайн svg" занимают over-много места в html файле. Если одна и та же инлайн-иконка повторится на сайте 100 раз, то html будет долго грузиться + разметка станет нечитабельной. Используя спрайт, вы обойдетесь без лишнего дублирования кода — элементы будут ссылаться на один и тот же код во внешнем файле...