Comments 21
Интересная статья, может пригодиться, спасибо!
Fontawesome в платной версии позволяет создавать пакет из своих иконок.
Есть также API . Что мы у себя и используем.
А зачем это всё?
Шрифты удобны как контейнер — сделал ссылку, и сразу пиши в нужных местах <i class="…". И голова не болит. Но если лезть в пучины SVG и разбираться с оптимизациями, не лучше ли оптимизированный код поместить в начале <body> вот в такой контейнер:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
<defs>
<symbol id="icon1" class="icon1" viewBox="…">
…
</symbol>
<symbol id="icon2" class="icon2" viewBox="…">
…
</symbol>
<symbol id="icon3" class="icon3" viewBox="…">
…
</symbol>
</defs>
</svg>
, а затем юзать вместо <i> в нужных местах:
<svg>
<use href="#icon1"></use>
</svg>
?
Заодно, хоть это уже и не сильно актуально, число запросов уменьшится.
А если на стороне сервера есть шаблонизатор, то всю суб-библиотеку иконок можно «заказывать» из общей библиотеки, перечисляя идентификаторы, нужные на данной странице.
На мой взгляд, через шрифты код получается чище. Мы до шрифтов еще не дошли - по всему проекту разбросаны свгшки, логичным следующим этапом выглядит создание своего шрифта.
Проблема шрифтов - их нельзя делать цветными, то есть красится через стиль все целиком. Вернее (как у гугла) их можно сделать разноцветными, но не перекрашивать через CSS. SVG спрайты могут содержать что угодно, и цветные иконки, и перекрашиваемые через fill="currentColor". Ну а сами спрайты можно вгружать в body как статику из файлов через JS (они еще и браузером кэшируются).
Другая проблемка шрифтовых иконок, особенно подвязанных через <i> - это инлайновость элемента по-определению, контроль за его размером через CSS это отдельная боль, тут и геометрия и font-size, и что начнется, если оно не очень совпадает и имееет прозрачный фон лучше не показывать. В этом смысле <svg><use> гораздо удобнее
Да, есть проблемы со шрифтовыми иконками, соглашусь, но есть случаи, когда удобнее использовать иконочный шрифт.
Например: Если нужно использовать много иконок без изменений стиля
У нас было предложено оставить иконочный шрифт по причине того, что во многих проектах используют именно такой подход и людям будет привычнее работать именно с ним
Да тут как удобнее, у нас в одном проекте используются шрифты, благо иконок там не сказать чтоб сильно много, они разбиты по разным шрифтам пачками по десятку-двум штук (ну например по разделам сайта) и собраны в https://icomoon.io/. Но добавление иконок или правка по факту это обновление шрифта полностью, и перегрузка его на клиентах может происходить довольно долго из кешей браузера, если специально ему не выставлять что-то типа номера версии, но это опять же еще и править стили с font-face.
В другом проекте для новой верстки мы использовали svg-спрайты. Это проще, меняется только спрайт-файл, который в текстовом формате svg по факту и его проще править, проще автоматически генерировать и т.п.
Еще одна особенность шрифтов в том, что в разных OS растрирование шрифтов таки разное, более того, даже в Windows оно зависит от настроек CrearType, и для не особо больших размеров иконок это может давать забавные артефакты (например под OSX/MacOS шрифты рендерятся чуть жирнее, а в Linux вообще технология сглаживания отличная от всего). SVG же практически одинаково рендерятся на разных платформах
Ну это спорное утверждение. CSS как и раз и создан чтобы делать всё стильным)). Мне вот кажется что шрифты как раз убоднее раскрашивать чем каждый SVG в отдельности, так как структура у каждого SVG разная. У нас вот появилась задача "брендирование" - создание цветовой схемы под конкретного клиента. В этом контексте перекрасить иконки шрифта выглядит гораздо проще.
Проблема шрифтов - их нельзя делать цветными, то есть красится через стиль все целиком.
Да, это частный случай общей проблемы — текст стилизуется ограниченно, а SVG без ограничений.
Причём, до смешного доходит. Почему не привязать в CSS'е, который идёт со шрифтом, толщину линий в иконках к font-weight? (Соответственно, референсить разные автогенерируемые woff'ы). Это же так и напрашивается. А я подобного не видел.
Вы и сейчас можете так сдеkать. Два разных шрифта (MyIcons-Normal, MyIcons-Bold) с иконками с разными толщинами линий делаете и пишете CSS типа такого
@font-face {
font-family: 'MyIcons';
src: url('MyIcons-Normal.eot');
src: url('MyIcons-Normal.eot?#iefix') format('embedded-opentype'),
url('MyIcons-Normal.woff') format('woff'),
url('MyIcons-Normal.ttf') format('truetype'),
url('MyIcons-Normal.svg#UbuntuItalic') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'MyIcons';
src: url('MyIcons-Bold.eot');
src: url('MyIcons-Bold.eot?#iefix') format('embedded-opentype'),
url('MyIcons-Bold.woff') format('woff'),
url('MyIcons-Bold.ttf') format('truetype'),
url('MyIcons-Bold.svg#UbuntuBold') format('svg');
font-weight: 700;
font-style: normal;
}И соответственно все что через верстку или css назначено font-weight: 700 - будет соответственно из другого шрифта, более "жирного"
Спасибо за комментарий
Было решено оставить именно использование <i class=>, чтобы поддержать легаси, т.к. на проектах уже был использован такой формат.
Всегда пожалуйста. Рад, если было полезно.
Просто я раньше разделял расхожее заблуждение, что SVG это формат файла. Пользовался им примерно как .png'шками, имел с этого много проблем, и предпочитал иконочные шрифты.
Но в какой-то момент до меня дошло, что SVG правильно рассматривать как язык разметки (ну или хотя бы как один из разметочных DSL'ей). То есть, оптимизировать от шлака (могу для автоматизации посоветовать сервис Nano, хоть он в России больше не работает), использовать переменные, делать каскадные библиотеки, ну и вообще — читать код. Так я пришёл к решению, описанному в комментарии, а иконочные шрифты для меня с тех пор стали… как вы выразились, «поддержать легаси» ))
В своё время тоже пытался делать это через svgtofont, но в ней столько граблей, что забил на это и слелал всё то же самое через api от fontforge. Зато работает как часы и результат предсказуем.
Как я делал шрифтовые иконки. Совмещаем желание UX-дизайнеров и возможности фронтендеров