Многие при разработке сталкивались с такой технологией, как иконочные шрифты. Их идея в том, чтобы разным символам присвоить разные иконки. Таким образом, иконки могут быть любого размера, цвета. А браузер сразу скачивает весь набор и сохраняет в кеш.
До определенного момента, FontAwesome ничем не отличался от прочих иконочных шрифтов. Однако, с релизом 5ой версии, логика была полностью изменена. Шрифтовый вариант все еще доступен, но ему на замену пришла js библиотека.
Логика ее работы такова: в шапку дописываются все необходимые стили, далее подключается наблюдатель. Он следит за изменениями в DOM и, когда встречает элемент с классами fas, far, fab - подменяет их на svg иконки. Такой подход затратнее по ресурсам, однако позволяет гибко работать с иконками. Анимации, объединение иконок, произвольные трансформации, маскирование.
<i class="fas fa-times"></i>
Вот так выглядит иконка в коде. Позже, она подменяется SVG.
И все удобно и хорошо, пока этих иконок не становится слишком много. Особенно, если Вы AJAX-ом подгружаете большой список сущностей и FontAwesome начинает подставлять свои SVG.
Рассмотрим, как ускорить процесс и разгрузить браузер. На помощь приходит технология SVG Symbols.
Идея такова: где-то в шапке сайта создаются svg, которым присваиваются некие id. Дальше, там где нужна иконка, создается svg с тегом use и указывается заданный ранее id. В итоге, FontAwesome рендерит только символы. Расходов мало, все работает быстрее. Но! Есть проблема со стилизацией. Иконки не имеют базовых размеров.
Назначаем некому классу .icon ширину, высоту и выравнивание. Тегу svg присваиваем этот класс. Проблему размера иконки победили.
Альтернативой являются SVG Sprites.
Логика такая - ссылаемся на файл-спрайт и указываем id иконки из набора. Никакого JS, svg иконка достаточно гибкая.
Если в Вашем приложении используется система сборки, например webpack, мы можем значительно уменьшить размер библиотеки.
Здесь логика такая: импортируем библиотеку и наблюдателя. Далее, импортируем только те иконки, которые нам понадобятся.
Если посмотреть исходные коды иконок, легко добавить в набор свои.
Вот и все. Быстрый, гибкий FontAwesome в нашем приложении.
