Есть способ, как обходить новый запрет на скачивание SVG иконок с сайта Flaticon. Пользуйтесь пока не прикрыли лавочку. Сегодня я решил поделиться с Вами секретом, как добывать иконки в SVG формате.
И так! Как вы уже знаете, сервис flaticon.com сделал доступ к своим SVG иконкам только на базе премиум аккаунта.
Раньше сервис предоставлял возможность скачивать бесплатные варианты иконок в SVG формате. Теперь только по подписке.
Предлагаю два варианта решения проблемы!
Первый и самый простой - это приобрести премиум подписку. Затраты на подписку включать в стоимость работ по сайту! За иконки должен платить Ваш клиент.
На моем канале есть ролик. В этом видео я более подробно рассказываю, как перевыставить стоимость премиум подписки вашему клиенту. Даю советы, на каких бесплатных сервисах искать SVG. И еще расскажу про плагин для Figma, который преобразует PNG иконки в векторный формат (SVG).
Второй вариант решения проблемы с иконками сейчас рассмотрим более подробно.
Видео инструкция, если лень читать )
Как скачать SVG иконки бесплатно?
Открываем сайт flaticon.com Регистрируемся или авторизуемся на сайте. После авторизации приступаем к поиску нужных нам иконок. Подобрали иконки. Перешли к редактированию. Открываем редактор иконки. В правой панели меню видно, что скачать в формате SVG можно только на премиум аккаунте. Бесплатное скачивание возможно только в формате png.
Открываем “Edit icon”.
В редакторе “Edit icon” при необходимости меняем цветовую палитру.
Дальше надо навести курсор мыши на иконку. Правая клавиша мышки: посмотреть код.
Откроется панель разработчика (инспектор кода).
Второй способ открыть панель разработчика - нажать на клавишу F12. В панели выбираем “Выбрать курсор для проверки” или нажать горячие клавиши Ctrl+Shift+C.
Я работаю в браузере “Google chrome”. В любом другом браузере есть те же самые инструменты. Они примерно везде одинаковые.
Теперь надо навести курсор мыши на иконку. Иконка, подсветиться квадратиком. Кликнуть левой кнопкой мыши по выделенной области иконки. Нас перебросит к нужной строке кода.
Строка кода будет начинаться так: svg xmlns.
Навели мышкой на подсвеченную строку кода правая клавиша мыши - редактировать как html. Теперь надо скопировать все содержимое, начиная от <svg xmlns=" и заканчивая закрывающим тегом </svg>.
Всем известно, что векторная графика строится по указанным координатам. В файле SVG хранится информация о местоположении этих координат, а так же какие эффекты были применены к иконке.
И сейчас мы скопировали весь набор координат. Теперь скопированное содержимое надо вставить в блокнот.
Использовать можно любой блокнот. Я пользуюсь текстовым редактором Notepad++.
Сохранить как - ваше название картинки. svg.
! Внимание сохранять обязательно в формате. svg
Подпишись на Telegram канал "Goncharoff.pro сайты"
Рассказываю про сайты, продажи, работу с клиентами. Очень много авторского контента, лайфхаков и новых фич!
Иконка готова. Теперь вы можете ее использовать на сайте или отредактировать в графический редакторе Figma, Adobe Illustrator.
Вот такое решение проблемы. Это, конечно, не так, как было раньше. Но используя сервис flaticon.com, вы быстро сможете подобрать набор иконок в одной стилистике. Толщина линии будет во всех иконках одинаковая с определенными стилистическими элементами.
Допустим, мне нужен дизайн с иконками часы. В поисковую строку сервиса пишу - clock. Но мне нужно минимум три иконки в одном стиле. В выпадающем меню нажимаю “Group by pack”. Произойдет сортировка паками с обязательным элементом “часы”. Останется только выбрать.
Поверьте, это будет гораздо быстрее, чем искать в других сервисах похожие изображения, чтобы это выглядело как единый пак иконок.
Пользуйтесь, пока есть возможность. Однако рекомендую приобретать премиум подписку.
