Если будет возможность - тыкните где посмотреть как подключить Font Awesome (в нем в пакете уже есть и отдельные svg иконки но в разных папках - вариации по толщине/заливке, а также спрайты готовые) что лучше и как сделать чтобы работало нормально?
FontAwesome, если мне память не изменяет, это другой подход - это иконочный шрифт. То есть вы подключаете новый @font-face, и используете символы из этого шрифта как иконки. Я же практикую иной подход - собирается svg файл со всеми иконками (svg-спрайт), и в html коде каждая иконка представляет из себя тег со ссылкой на отдельную иконку из общего спрайта. Подходы похожие, но принцип немного разный. В принципе, я не вижу особо большой разницы между этими подходами, поэтому порекомендовать какой-то из них не могу. Используйте тот, который вам более удобен. SVG-спрайт мне кажется более гибким, поэтому использую его.
@@lectoria понял. У них давно уже появились кроме вебфонтс еще и svg иконки все, очень достойный набор - советую посмотреть) а так - прописал в пути на соурс для свг иконок путь со звездочками (чтобы сибирал из всех папок) - жду сижу пока соберет спрайт. Как подключить готовый спрайт я не совсем понимаю🙈
@@SerG63rus Итоговый спрайт подключается непосредственно в том месте, где нужно вставить иконку. То есть прямо в html коде выставляется тег Обрати внимание, на xlink:href - там как раз и указана ссылка на svg-спрайт и на конкретную иконку в этом спрайте.
@@lectoria кстати, gulp svgSpriteBuild выдает ошибку у меня - Error: EISDIR: illegal operation on a directory, read. типа какой то файл является директорией, хотя все ровно вроде..
Скажем так, основа сборки мне досталась от фронтенд-разработчиков, которым я раньше всегда отдавал на верстку заказы своих клиентов. Это было где-то лет 5 назад, может и раньше. А позже, когда года полтора-два назад решил сам сверстать парочку проектов, я ее доработал, прикрутил webpack - она приобрела вид, близкий к тому, который я показал в последних уроках. Работает пока без проблем, правда, как видишь, я один пакет допилил и сделал свою версию npm-пакета gulp-sass-glob. Также я ее использовал при работе с VueJS проектом, дописав конфигурацию для сборки Vue в webpack.config.js.
Посмотрел пол урока, так и не понял, что вообще происходит, что за генерация иконок, вроде бы как экспортировали svg файлы из фигмы, они не подходят? Что еще нужно с ними делать, а главное для чего?
SVG файл - это картинка, мы можем управлять через css максимум шириной/высотой и прозрачностью. При таком подходе, как в видео, мы все иконки собираем в svg спрайт и для каждой иконки генерируется класс, чтобы учесть индивидуальные особенности каждой из иконок (ширина/высота). А при помощи общего класса .icon мы можем задать например толщину обводки. Также браузер единожды скачивает спрайт и затем использует кеш, что исключает недогрузку отдельных иконок или постепенное их отображение. В общем, практика показала, что такой подход более удобен.
@@lectoria Такого объяснения вначале видео мне наверное и не хватило, хотя что такое svg спрайт пока еще до конца и не понимаю, как и про некие шейпы, которые упоминались в видео. Буду разбираться.
Супер!!!
Насчет посадки на vue после обычной верстки хорошая идея !
Только что сам закончил возиться со спрайтами в svg)
Если будет возможность - тыкните где посмотреть как подключить Font Awesome (в нем в пакете уже есть и отдельные svg иконки но в разных папках - вариации по толщине/заливке, а также спрайты готовые) что лучше и как сделать чтобы работало нормально?
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. типа какой то файл является директорией, хотя все ровно вроде..
Подскажи, долго сборку проектировал ? спрашиваю потому что сам долго настраивал все эти плагины и работу..
Скажем так, основа сборки мне досталась от фронтенд-разработчиков, которым я раньше всегда отдавал на верстку заказы своих клиентов. Это было где-то лет 5 назад, может и раньше. А позже, когда года полтора-два назад решил сам сверстать парочку проектов, я ее доработал, прикрутил webpack - она приобрела вид, близкий к тому, который я показал в последних уроках. Работает пока без проблем, правда, как видишь, я один пакет допилил и сделал свою версию npm-пакета gulp-sass-glob.
Также я ее использовал при работе с VueJS проектом, дописав конфигурацию для сборки Vue в webpack.config.js.
@@lectoria окей понял
Посмотрел пол урока, так и не понял, что вообще происходит, что за генерация иконок, вроде бы как экспортировали svg файлы из фигмы, они не подходят? Что еще нужно с ними делать, а главное для чего?
SVG файл - это картинка, мы можем управлять через css максимум шириной/высотой и прозрачностью. При таком подходе, как в видео, мы все иконки собираем в svg спрайт и для каждой иконки генерируется класс, чтобы учесть индивидуальные особенности каждой из иконок (ширина/высота). А при помощи общего класса .icon мы можем задать например толщину обводки. Также браузер единожды скачивает спрайт и затем использует кеш, что исключает недогрузку отдельных иконок или постепенное их отображение. В общем, практика показала, что такой подход более удобен.
@@lectoria Такого объяснения вначале видео мне наверное и не хватило, хотя что такое svg спрайт пока еще до конца и не понимаю, как и про некие шейпы, которые упоминались в видео. Буду разбираться.