CODEWITHSUNDEEP
angularnpmsassfont-awesomeangular-fontawesome
Imtiaz Shakil Siddique
Imtiaz Shakil Siddique

Reputation: 4298

What is the difference between fontawesome angular package and standard npm package and simple sass

I've a new angular cli(8+) project with sass(SCSS). I checked Fontawesome docs and have found multiple ways of hosting fontawesome icons (npm package install, angular package or simple scss).

I want to know what are the differences between them? Which is the recommended way for an Angular CLI project having sass.

Upvotes: 2

Views: 532

Answers (1)

jafar_mnkd
jafar_mnkd

Reputation: 122

When you install Fontawesome via the npm package manager it comes already with all the Scss files. So, there is not a choice between "npm package install" and "simple Scss". The question here is more: Using the package manager or hosting yourself only the Scss files you will need in your project inside the assets folder for example? Choosing that last option you won't be able to easily update the library version with npm.

EDIT: With this CSS/SCSS approach you'll always load all icons (a font file, which is a huge especially for FontAwesome Pro)

The angular package it's quite another subject. It's a new official package of FontAwesome. Instead of importing inside your project the Scss files, you can directly use FontAwesome Angular component.

EDIT: This package uses SVG icons instead and will use Angular CLI infrastructure to remove all unused icons from your final bundle.

The simpler:

  • Install npm package or host only the CSS minified files you need,
  • add a link to the file(s) location in your angular.cli file

You will be able to use the Fontawesome classes (like .fab .fa-twitter) in all your Html files.

Sccs import :

If you want to personalize your classes with Fontawesome mixins, you can import Scss files inside any Scss files of your project.

A use case: a .user-button class that extends a .fa-icon properties and contains a Fontawesome user icon.

Angular package :

You will never have to deal with FontAwesome classes, but only import the module inside your app.module.ts and use FontAwesome icons as specifics component.

Upvotes: 1

Related Questions