В чем разница между пакетом fontawesome angular и стандартным пакетом npm и простым sass - PullRequest
2 голосов
/ 26 февраля 2020

У меня новый angular cli (8+) проект с sass (S CSS). Я проверил документы Fontawesome и нашел несколько способов размещения значков fontawesome (npm установка пакета , angular пакет или simple s css).

Я хочу знать, чем они отличаются? Что является рекомендуемым способом для Angular CLI проекта, имеющего sass.

1 Ответ

3 голосов
/ 26 февраля 2020

Когда вы устанавливаете Fontawesome через менеджер пакетов npm, он уже поставляется со всеми файлами S css. Таким образом, нет выбора между «npm package install» и «simple S css». Вопрос здесь больше: Используя менеджер пакетов или разместите только те файлы S css, которые вам понадобятся в вашем проекте, например, в папке assets? Выбрав этот последний вариант, вы не сможете легко обновить версию библиотеки с помощью npm.

РЕДАКТИРОВАТЬ: При таком подходе CSS / S CSS вы всегда будете загружать все значки (файл шрифтов, что особенно важно для FontAwesome Pro)

Пакет angular это совсем другая тема. Это новый официальный пакет FontAwesome. Вместо того, чтобы импортировать в свой проект файлы S css, вы можете напрямую использовать компонент FontAwesome Angular.

РЕДАКТИРОВАТЬ: Этот пакет использует SVG-иконки вместо этого и будет использовать Angular CLI-инфраструктуру для удаления всех неиспользуемых иконок из вашего окончательного комплекта.

Проще:

  • Установить npm пакет или разместить только те CSS минимизированные файлы, которые вам нужны,
  • добавить ссылку на местоположение файла (ов) в вашем angular .cli файл

Вы сможете использовать классы Fontawesome (например, .fab .fa-twitter ) во всех ваших Html файлах.

Импорт Sccs:

Если вы хотите персонализировать свои классы с помощью смешанных Fontawesome, вы можете импортировать файлы S css в любые файлы S css вашего проекта.

Вариант использования: класс .user-button , расширяющий свойства .fa-icon и содержащий значок пользователя Fontawesome.

Angular пакет:

Вам никогда не придется иметь дело с классами FontAwesome, но только импортируйте модуль в ваш app.module.ts и используйте значки FontAwesome в качестве специфики компонент.

...