Привет. подскажите плиз, есть ли какой-то смысл не дублировать svg

в проекте? понятно что можно вынести все svg в отдельную папку, но получается помойка как мне кажется, потом сложнее искать нужную svg. я раскидываю всё по папкам страниц, типа модульность такая. это нормальный подход? или мб от этого страдает производительность или ещё какие минусы есть?

“svg” - иконки?

да

А чё помойка, выносишь статику в одно место и структурируешь

ну кмк не очень хорошо, как минимум вес проекта растет при желании модульность можно сделать отдельным icons.js файлом для группы компонентов (н-р сделай такой в папке main-page, где у тебя лежит все для главной страницы) и туда импортни нужное

icons.svg файлом*

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

Для иконок самый правильный путь - использовать спрайты. Советую свою тулзу - https://www.npmjs.com/package/@neodx/svg Почитать можешь тут https://t.me/this_is_your_channel/44 и тут https://t.me/so_this_is/7

ну это ещё больше каши добавляет, не? лишние импорты

https://kurtextrem.de/posts/svg-in-js

или так у меня вообще (не лучшая практика, да, но у меня мало иконок, так что пойдет) вся разметка в одном файле в объекте лежит, я ее потом вызываю через название поля

нихера себе))) мы тут за килобайты деремся, мегабайт это много

А могла бы взять поделку и делать так: import { Icon } from '@/shared/ui'; export function SomeFeature() { return ( <div className="space-y-4"> <Icon name="common/add" /> <Icon name="common/close" className="text-red-500" /> <Icon name="text/bold" className="text-lg" /> <Icon name="actions/delete" className="p-2 rounded-md bg-stone-300" /> </div> ); }

так а на что влияет? или при старте приложения оно всё прогружается у клиента в браузере? а лишние 100кб при загрузке новой страницы это разве много?

- Да - Ты сам себе руинишь DX - SVG in JS - раковник

https://t.me/so_this_is/7

@Pavel5284 Ты понял, о чем говорю?) Один раз настраиваешь плагин для генерации спрайтов, пишешь компонент иконки и везде юзаешь, оно всё автоматически будет работать. Никаких svg in js, сотен импортов, всё максимально быстро, просто, правильно и удобно

Ты прям додушиваешь

Нет. Где можно посмотреть реальный код?

Тут https://www.npmjs.com/package/@neodx/svg#step-by-step И тут https://github.com/secundant/neodx/tree/main/examples/svg-vite

а это чей канал кстати?

Есть у спрайтов минусы?

Да, ломаются на масках/фильтрах (типа <g filter=“url(#kek)”>), пока не дошли руки до автоматического инлайна таких приколов. Но это всё не актуально для иконок

Спс. Попробую внедрить на выхах. Но в чём смысл? Бандл уменьшится или что?

удобство паша, удобство

Ну мне удобно дублировать и импортировать. Удобство это вкусовщина и дело привычки, не?

Ты бы открыл что скидывал, там написаны проблемы) Много причин, например: - DX - у тебя будет один компонент с автокомплитом и типизацией - Скорость сборки (dev-сборки тоже) - Само собой, меньше бандл, ты всю статику сделал статикой, а не впердолил в JS - +100кб svg in JS != +100кб svg в виде отдельного файла

Нет, удобство - субъективная практика поверх объективных предпосылок. Основа удобства - объективные характеристики (о субъективном вообще так-то не поговоришь) Дизайн, простота, концепции, требуемая ментальная нагрузка и прочее.