Разработка CRM. 018 Сборка иконок 

Скажем так, основа сборки мне досталась от фронтенд-разработчиков, которым я раньше всегда отдавал на верстку заказы своих клиентов. Это было где-то лет 5 назад, может и раньше. А позже, когда года полтора-два назад решил сам сверстать парочку проектов, я ее доработал, прикрутил webpack - она приобрела вид, близкий к тому, который я показал в последних уроках. Работает пока без проблем, правда, как видишь, я один пакет допилил и сделал свою версию npm-пакета gulp-sass-glob. Также я ее использовал при работе с VueJS проектом, дописав конфигурацию для сборки Vue в webpack.config.js.

@@lectoria окей понял

FontAwesome, если мне память не изменяет, это другой подход - это иконочный шрифт. То есть вы подключаете новый @font-face, и используете символы из этого шрифта как иконки. Я же практикую иной подход - собирается svg файл со всеми иконками (svg-спрайт), и в html коде каждая иконка представляет из себя тег со ссылкой на отдельную иконку из общего спрайта. Подходы похожие, но принцип немного разный. В принципе, я не вижу особо большой разницы между этими подходами, поэтому порекомендовать какой-то из них не могу. Используйте тот, который вам более удобен. SVG-спрайт мне кажется более гибким, поэтому использую его.

@@lectoria понял. У них давно уже появились кроме вебфонтс еще и svg иконки все, очень достойный набор - советую посмотреть) а так - прописал в пути на соурс для свг иконок путь со звездочками (чтобы сибирал из всех папок) - жду сижу пока соберет спрайт. Как подключить готовый спрайт я не совсем понимаю🙈

@@SerG63rus Итоговый спрайт подключается непосредственно в том месте, где нужно вставить иконку. То есть прямо в html коде выставляется тег Обрати внимание, на xlink:href - там как раз и указана ссылка на svg-спрайт и на конкретную иконку в этом спрайте.

@@lectoria оо круто, понял! Спасибо!)

@@lectoria кстати, gulp svgSpriteBuild выдает ошибку у меня - Error: EISDIR: illegal operation on a directory, read. типа какой то файл является директорией, хотя все ровно вроде..

SVG файл - это картинка, мы можем управлять через css максимум шириной/высотой и прозрачностью. При таком подходе, как в видео, мы все иконки собираем в svg спрайт и для каждой иконки генерируется класс, чтобы учесть индивидуальные особенности каждой из иконок (ширина/высота). А при помощи общего класса .icon мы можем задать например толщину обводки. Также браузер единожды скачивает спрайт и затем использует кеш, что исключает недогрузку отдельных иконок или постепенное их отображение. В общем, практика показала, что такой подход более удобен.

​@@lectoria Такого объяснения вначале видео мне наверное и не хватило, хотя что такое svg спрайт пока еще до конца и не понимаю, как и про некие шейпы, которые упоминались в видео. Буду разбираться.