Должен ли я использовать fontawesome без или fontawesome без углов - PullRequest
Новая
       60

Должен ли я использовать fontawesome без или fontawesome без углов

0 голосов
/ 06 июля 2018

Мы начинаем проект 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 иконок в нашем приложении и задаемся вопросом, какой подход будет лучше для нас.

Ответы [ 2 ]

0 голосов
/ 07 июля 2018

Некоторые другие соображения:

  1. angular-fontawesome тесно интегрируется с Angular Framework, поэтому, если вы считаете, что вам могут потребоваться некоторые значки с привязкой к данным (например, значок электронной почты со счетчиком непрочитанных сообщений или значок с углом поворота, привязанным к некоторому значению данных в вашей модели), тогда вам может пригодиться angular-fontawesome, когда значок отображается не только как SVG, но и как угловой компонент.
  2. Метод SVG Font Awesome 5 обладает некоторыми функциями, которые недоступны при использовании метода веб-шрифтов и CSS. Например, Силовые преобразования , Слои и Счетчики . Поскольку angular-fontawesome основан на SVG с реализацией JavaScript, он также поддерживает все эти дополнительные функции.
  3. Дрожание / подмножество деревьев: Есть много, много иконок, которые вы не будете использовать. Если вы заботитесь об оптимизации размера загруженных ресурсов в ваших производственных сборках, то вы можете убедиться, что вы используете встряхивание деревьев, которое вы получите в основном автоматически , если вы используете angular-cli (Предостережение: см. Эту ссылку о настройке сборки для обхода регресса производительности сборки, который замедляет производственные сборки Webpack 4 до выпуска исправления.)
0 голосов
/ 06 июля 2018

Мне просто интересно то же самое, поэтому, несмотря на то, что оно основано на мнениях (и, следовательно, подлежит закрытию), я отвечу вам:

Я начал с использования библиотеки как , описанной вих руководство .

Я быстро понял, что вы можете НЕ использовать все нужные вам значки, потому что невозможно использовать fas или far значки.

Итак, я переключился на «старый» способ: я установил библиотеку с 

npm i @fortawesome/fontawesome-free

и импортировал ее в мой angular.json файл: 

projects -> yourProject -> architect -> build -> styles : {
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

Iтеперь приходится использовать обычный способ с 

<i class="fab fa-accessible-icon"></i>

Но я могу использовать все предоставленные значки вместо только одного набора.

...