Доброго всем дня! :)

Помню, может, месяц назад или больше было обсуждение касательно svg-иконок. Обычно делаю каждую иконку отдельным компонентом или использую прямо вставляя в разметку.

Стоит ли лучше сделать svg с кучей символов? Иконок стало много в новом проекте и теперь хочется подойти к этому более основательно.

Конечно и так проще

И потом навесить, например, на главный layout c diplay: none?

это абсолютно без разницы если у тебя бандлер с свг, каждая свг будет 1 раз в бандле

почти никакого преимущества словарь с символами не дает

Пока правил в бандлере нет. Для этого стоит добавить лоадер для svg, который позволяет импортировать svg в компоненты?

можно какой-нибудь svg-inline-loader прикрутить, ну либо свг-свелт лодаер написать чтобы он их прямо свелт компонентами делал

Читал в старом вашем обсуждении, что, если делать каждый svg компонентом, то растет размер бандла, так как свелт прикручивает бойлерплейт для компонента

думаю так и и есть

А спрайт не подходит?

К сожалению, нет, буду анимировать

Смотри словарь с иконками нужно собирать руками и поддерживать чтобы там были все иконки нужные.

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

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

Во всех остальных случаях словарь удобнее получается.

Дальше взвешиваешь что для тебя проще, если нужно анимировать, то я бы сначала потестил работает ли анимация свг, когда их используешь через use

Идея с импортом нравится. Через use анимировать можно только целиком иконку. Не подскажете, знаете ли какой-нибудь плагин для импорта svg, если используете сами в rollup?

Правда, я помню, вы пользуетесь webpack

да у меня вебпак, про роллап ничего не могу сказать

Сейчас поищу, спасибо за советы)

К сожалению, ничего интересного не нашёл. Те, что позволяют импортить inline, требуют использования document...append, а у меня ssr еще😅

зависит от того что за анимацию будете делать =) может вам проще будет держать для каждой иконки реальный свелт компонент и анимировать каждый кусок свг, тогда и сср бужет работать

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