Comments 21
Спасибо, на самом деле очень интересно! Нравится мне native-way.
Можете разъяснить: по сути ваша реализация позволяет заменить <img src="images/image_name.svg"> на <svg-icon name="image_name">? Какие-то еще фишки можно сделать?
Да, все верно, можем заменить img src=icon_name на svg-icon name=icon-name по поводу фишек - какие вы бы хотели видеть? пишите, я подумаю чем смогу помочь и можно ли это реализовать.
Честно говоря я справляюсь теми инструментами, что использую. Но поговорим об идеях :)
Вот попадались такие кейсы как особое отображение svg-иконки, если темная тема. Можно динамически менять тело svg или стили при смене цветового режима.
Еще одну идею дам. При описании в верстке svg-иконок приходится указывать атрибуты width, height, а также viewbox. Это бойлерплейт. Через веб-компоненты можно решить это неудобство.
Смотрите, как бы это парадоксально не казалось на первый взгляд, но inline вставка svg работает шустрее чем использование спрайтов - https://cloudfour.com/thinks/svg-icon-stress-test/
Еще к минусам svg-спрайтов можно отнести, то что через css не получается цвета svg менять
Так что можно добавить атрибут который указывает использовать спрайт или вставлять inline
Работает быстрее, только есть и минусы у подхода к инклудами
Вы привязаны к шаблонизатору и необходимо использовать доп. инструменты сборки
Время сборки проекта становится чуть медленее из-на инклудов
Общий вес страницы становится больше т.к. иконки не переиспользуются. На большом количестве иконок разница в размере страницы будет очень существенной
Не тот кейс, где можно как-то просесть в производительности, если только вы не пишите сайт сток для свг иконок
Так что можно добавить атрибут который указывает использовать спрайт или вставлять inline
Здравая идея, возможно обновлю контент немного позже.
Еще к минусам svg-спрайтов можно отнести, то что через css не получается цвета svg менять
Какое невежство таких вещей не знать, но все работает отлично. Попробуйте стиль в CSS применить svg-icon svg { fill: ff00ff; } и лично убедиться, что все работает и цвет меняется отлично.
Какое невежство таких вещей не знать, но все работает отлично. Попробуйте стиль в CSS применить
svg-icon svg { fill: ff00ff; }и лично убедиться
Попробовал и лично убедился что не работает - потому что спрайт - потому что там тег use в котором уже shadow dom(к которому доступа нет из css ) и только потом целевая svg
поэтому нужно inline вставлять а не через спрайт
я для вас демку на гитхабе сделал, запустите и проверьте
Как видите все перекрасилось
Спасибо! Интересное поведение, да, цвета меняются. Но вот если в самом SVG атрибут fill у path прописан то его не получается переопределить через css в случае если SVG вставлено через спрайт, то есть картинку надо ещё немного подготовить после экспорта из фигмы например, стереть все fill из SVG.
При этом если вставлять inline - то не важно что внутри картинки задан атрибут fill , css его переопределяет
Ссылка на материал годная. Однако, мы видимо по-разному считываем графики. Чем меньше диаграмма, тем лучше, разве нет? Длина столбца - это время загрузки svg.
В этом случае inline-svg - худшее решение, потому что столбец самый длинный. А юзать тег img - лучшее.
В статье ссылка на страничку с тестом https://svg-icon-stress-test.netlify.app/
там есть и другие методы вставки картинок можете изучить
я так понимаю в случае с inline браузер сам что-то оптимизирует лучше спрайта , тут вот честно хз как это работает в деталях , сам удивился когда узнал
Я бы сказал, что результаты примерно идентичны и можно получить и обратные значения. На телефоне аналогично, иногда вариант symbol sprite срабатывает побыстрее чем предыдущий тест с inline svg. Спрайт будет выигрывать по общему весу страницы, а также за счет того, что иконка загружается по хуку connectionCallback т.е. уже после отображения первичного контента страницы, что в теории тоже на какие-то копейки улучшает FCP параметр. Но это все крохоборство в целом, хотя на тесте в 100000 иконок разница в пользу инлайна более ощутима, но таких кейсов в жизни на 100к иконок я не встречал
А почему так скромно? Надо по 100_000 ставить. И самое смешное, что Inline SVG и External Image примерно одинаковые. Походу исследование уже не очень актуально :)
без спрайта достаточно будет только тега веб-компонента - и не вставлять этот div еще отдельный
вы можете выложить рабочий код компонента куда-нибудь типа codepen?
он так просто не пашет ... вот это else кажется лишнее - https://github.com/webislife/svg-icon/blob/main/svg-icon.ts#L65
на гитхаб же дал ссылку в статье, или вам нужна javascript версия?
нужна была рабочая версия ) в общем я уже поправил и проверил
https://replit.com/join/hkvuzlpdcd-alexstep2
https://github.com/webislife/svg-icon добавил vite и демку, пофиксил, а также покрасил иконки через CSS разные цвета специально для вас
А вообще вам бы пойти поучить современные фреймворки, а не заниматься велосипедостроением, там эта проблема давно решена :D
SVG иконки на проекте не являются какой-то проблемой, а также сами веб-компоненты вполне современный подход на который все больше обращают внимание крупные компании. Как раз в плюсах у компонента то, что он способен пережить множество версий фреймворков и уже это успешно делают. У одного только реакта за время существования веб-компонентов прошло десяток релизов, а этот веб-компонент в целом оставался бы неизменным последние 5 лет точно и спокойно переживал изменения сборщиков webpack > rollup > vite
Это решается бандлерами в первую очередь. Фреймворки тут рядом просто.
Пишем веб-компонент для svg иконок