Что лучше: fontawesome-free или angular-fontawesome?
Мы запускаем проект Angular 6 и хотим использовать Font Awesome 5.1. Font Awesome предоставляет два пакета Node:
@fortawesome/angular-fontawesome- использует SVG с JS@fortawesome/fontawesome-free- использует веб-шрифты с CSS.
Использование SVG с JS - это новый способ использования Font Awesome, а Веб-шрифты и CSS - более классический подход. Мне кажется, что использовать SVG с JS немного сложнее, потому что вам нужно import для каждого значка, но это сохраняет размер файла.
Мы собираемся использовать около 30 иконок в нашем приложении и задаемся вопросом, какой подход подойдет нам лучше.
Ответы 3
Я только что подумал о том же самом, поэтому, хотя он основан на мнении (и, следовательно, подлежит закрытию), я отвечу вам:
Я начал с использования библиотеки как описано в их руководстве.
Я быстро понял, что вы можете использовать НЕТ все значки, которые вам нужны, потому что нет возможности использовать значки fas или far.
Поэтому я перешел на «старый» способ: установил библиотеку с
npm i @fortawesome/fontawesome-free
и импортировал его в мой файл angular.json:
projects -> yourProject -> architect -> build -> styles : {
"node_modules/@fortawesome/fontawesome-free/css/all.css"
}
Теперь мне нужно использовать обычный способ с
<i class = "fab fa-accessible-icon"></i>
Но я могу использовать все предоставленные значки вместо одного набора.
Поправьте меня, если я ошибаюсь, но я думаю, что значки far являются функциями PRO и нуждаются в платной лицензии, поэтому вы не могли их использовать. fas - бесплатная версия по умолчанию (такая же, как fa)
Возможно, вы ошибаетесь, потому что я использовал их без оплаты "старым способом", но, поскольку я не профессионал в области шрифтов, я не могу быть уверен, что тоже не ошибаюсь!
Предполагая, что вы не будете изменять его напрямую, я бы рекомендовал использовать уменьшенную миниатюрную версию (all.min.css) в вашем angular.json вместо all.css.
Некоторые другие соображения:
angular-fontawesomeтесно интегрируется с фреймворком Angular, поэтому, если вы думаете, что вам могут понадобиться значки с привязкой к данным (например, значок электронной почты со счетчиком непрочитанных сообщений или значок с углом поворота, привязанный к некоторому значению данных в вашей модели), тогда вам может показаться приятным использоватьangular-fontawesome, где значок не только отображается как SVG, но и как компонент Angular.- Метод SVG в Font Awesome 5 поддерживает некоторые функции, которые недоступны для веб-шрифтов и метода CSS. Например, Преобразование мощности, Слои и счетчики. Поскольку
angular-fontawesomeоснован на SVG с реализацией JavaScript, он также поддерживает все эти дополнительные функции. - Встряхивание дерева / подмножество: есть очень много значков, которые вы не будете использовать. Если вы заботитесь об оптимизации размера загруженных ресурсов в производственных сборках, то вы можете убедиться, что используете встряхивание дерева, которое вы получите в основном автоматически, если используете
angular-cli(Предупреждение: см. Эту ссылку о настройке вашего build, чтобы обойти снижение производительности сборки, из-за которого производственные сборки Webpack 4 замедляются до тех пор, пока исправление не будет выпущено.)
Используйте Angular Font Awesome, поскольку он работает как компонент Angular. Также отображается как SVG, что помогает в логике привязки к данным.
Людям, голосующим за то, чтобы закрыть это как «Основанное на основном мнении»: действительно ли есть факты нет, которые можно использовать, чтобы помочь кому-то выбрать между SVG и веб-шрифтами? Так же ли хорошо использовать веб-шрифты и CSS В самом деле в ситуации каждый без каких-либо угловых случаев? Если это так, я бы ценил ответ, защищающий эту позицию.