Comments 9
Отличная статья </сарказм>
А за пакет спасибо, попробуем.
А зачем @svgr/webpack, если он все равно не используется?
С другой стороны зачем использовать @svgr/cli если есть webpack?
Еще в реализации есть косяк -- index файл сам не генерится, а это значит что нужно либо руками его описывать, либо делать костыль, который будет пробегаться по директории и все иконки собирать в модуль.
Вообще подход с cli имеет место быть если пак иконок уже готов и его нужно один раз добавить в проект.
Если же идет активная разработка -- нужно генерить иконки "на лету" вебпаком и тянуть их как обычные .svg, при этом в "реакте" они уже будут иметь jsx верстку, но в идеале к ним нужно генерить .d.ts чтобы корректно работал IntelliSence
Да, вы правы, импорт @svgr/webpack, действительно, лишний. Как и @svgr/core, так как @svgr/cli самостоятельно его подтягивает.
В текущей реализации index файл генерируется автоматически. Даже если его до этого не существовало, он создаётся в папке, которую мы указали в outDir, при запуске команды.
По поводу активной разработки, да, как я описал в заключении, эту систему можно улучшать, один из вариантов — это добавить процесс "наблюдения" за папкой с исходными svg-файлами и автоматическим запуском преобразования в компоненты.
а теперь представим на проекте 1000 иконок. И все они собираются в один экспортируемый объект! Представь сколько будет весить один компонент в который этот самый жирнее и жирнее с каждым днем Icons импортируется…
В таком случае, да, стоит пересмотреть систему импорта, и возможно, лучшей практикой будет импортировать иконки уже как отдельные компоненты, например: import IconArrow from “@/icons/IconArrow”, но опять же, это если есть такая необходимость. На моём опыте чаще всего встречаются проекты, где система импорта, которую я описал в статье, более чем уместна.
У нас именно такой случай. На данный момент простая структура папок наподобие icons/generic/colored[/outlined]/star и там уже сидят svg иконки с их .tsx(.jsx) файлами которые экспортируют данную иконку в виде jsx модуля. И ещё есть компонент, который принимает lib, theme, name пропсы и динамично загружает данную иконку (в случае если надо использовать всю папку иконок для загрузки той или иной секции). Однако рассматриваем вариант переместить их на отдельный хост и загружать через img по path. Плюсы: кеширование на уровне браузера, меньше нагрузки на проект, возможноть loading="lazy" из под ящика для загрузки иконок (загружать иконку только в том случае если в viewport-е) и возможность загружать разные icon pack-и для разных партнеров.
Практика показала, что такие иконки мы не модифицируем касаясь атрибутов svg.
П.С.
простите за англоязычные термины, я за рубежом и не очень знаком с аналогичными переводами
Использовать svg спрайты и грузить по http - нет. Тянуть в js код сотни иконок - то что нужно)
https://www.npmjs.com/package/react-svg-sprite-generator - генерит svg спрайт и константы для JS
пользуйтесь )
Система иконок на React