feat(fontawesome): upgrade to the new angular-fontawesome (#357)

tomastrajan · Sep 28, 2018 · 2e3615b · 2e3615b
1 parent 6c3e781
commit 2e3615b
Show file tree

Hide file tree

Showing 26 changed files with 318 additions and 118 deletions.
diff --git a/angular.json b/angular.json
@@ -64,7 +64,7 @@
                 {
                   "type": "bundle",
                   "name": "vendor",
-                  "baseline": "750kb",
+                  "baseline": "800kb",
                   "warning": "100kb",
                   "error": "200kb"
                 },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,11 @@
     "@angular/platform-browser": "^6.1.2",
     "@angular/platform-browser-dynamic": "^6.1.2",
     "@angular/router": "^6.1.2",
-    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
+    "@fortawesome/angular-fontawesome": "^0.2.0",
+    "@fortawesome/fontawesome-free": "^5.3.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
+    "@fortawesome/free-brands-svg-icons": "5.3.1",
     "@ngrx/effects": "^6.1.0",
     "@ngrx/entity": "^6.1.0",
     "@ngrx/store": "^6.1.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -19,7 +19,8 @@
     <div class="toolbar" [style.position]="isHeaderSticky ? 'fixed' : 'inherit'" [class.mat-elevation-z4]="isHeaderSticky">
       <mat-toolbar color="primary">
         <button mat-icon-button class="d-md-none" (click)="sidenav.open()">
-          <mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
+          <fa-icon icon="bars"></fa-icon>
+
         </button>
 
         <span routerLink="" class="branding spacer center d-inline d-sm-none">
@@ -40,23 +41,29 @@
           {{ 'anms.menu.login' | translate }}
         </button>
 
-        <button *ngIf="isAuthenticated" mat-icon-button [matMenuTriggerFor]="toolbarUserMenu">
-          <mat-icon fontSet="fas" fontIcon="fa-user-circle"></mat-icon>
+        <button *ngIf="isAuthenticated"
+                mat-icon-button
+                [matMenuTriggerFor]="toolbarUserMenu">
+          <fa-icon icon="user-circle"></fa-icon>
         </button>
         <mat-menu #toolbarUserMenu="matMenu">
           <button mat-menu-item (click)="onLogoutClick()">
-            <mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
+            <mat-icon><fa-icon icon="power-off"></fa-icon></mat-icon>
             <span>{{ 'anms.menu.logout' | translate }}</span>
           </button>
         </mat-menu>
 
         <button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
-          <mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
+          <fa-icon icon="cog"></fa-icon>
         </button>
 
-        <a [matTooltip]="'anms.header.github' | translate" matTooltipPosition="before" mat-icon-button class="link d-none d-sm-inline"
-          href="https://github.com/tomastrajan/angular-ngrx-material-starter" target="_blank">
-          <mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
+        <a [matTooltip]="'anms.header.github' | translate"
+           matTooltipPosition="before"
+           mat-icon-button
+           class="link d-none d-sm-inline"
+           href="https://github.com/tomastrajan/angular-ngrx-material-starter"
+           target="_blank">
+          <fa-icon [icon]="['fab','github']"></fa-icon>
         </a>
 
         <span>
@@ -68,7 +75,6 @@
         </span>
       </mat-toolbar>
     </div>
-
     <div class="content" [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
       <router-outlet #o="outlet"></router-outlet>
     </div>
@@ -77,27 +83,28 @@
       <div class="row">
         <div class="col-sm-12 links">
           <a href="https://www.github.com/tomastrajan" target="_blank">
-            <mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
+            <fa-icon [icon]="['fab','github']"></fa-icon>
             <span>Github</span>
           </a>
           <a href="https://www.medium.com/@tomastrajan" target="_blank">
-            <mat-icon fontSet="fab" fontIcon="fa-medium-m"></mat-icon>
+            <fa-icon [icon]="['fab','medium-m']"></fa-icon>
             <span>Medium</span>
           </a>
           <a href="https://www.twitter.com/tomastrajan" target="_blank">
-            <mat-icon fontSet="fab" fontIcon="fa-twitter"></mat-icon>
+            <fa-icon [icon]="['fab','twitter']"></fa-icon>
             <span>Twitter</span>
           </a>
-          <a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ" target="_blank">
-            <mat-icon fontSet="fab" fontIcon="fa-youtube"></mat-icon>
+          <a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ"
+             target="_blank">
+            <fa-icon [icon]="['fab','youtube']"></fa-icon>
             <span>Youtube</span>
           </a>
           <a href="https://www.instagram.com/tomastrajan" target="_blank">
-            <mat-icon fontSet="fab" fontIcon="fa-instagram"></mat-icon>
+            <fa-icon [icon]="['fab','instagram']"></fa-icon>
             <span>Instagram</span>
           </a>
           <a href="https://www.slides.com/tomastrajan" target="_blank">
-            <mat-icon fontSet="fas" fontIcon="fa-play-circle"></mat-icon>
+            <fa-icon icon="play-circle"></fa-icon>
             <span>Slides</span>
           </a>
         </div>
@@ -106,8 +113,10 @@
         <div class="col-12 signature">
           &#169; <span class="year" data-testid="footer-year">{{year}}</span> - Tomas Trajan
           <br class="d-block d-sm-none">
-          <a [matTooltip]="'anms.footer.changelog' | translate" matTooltipPosition="before" href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
-            <mat-icon fontSet="fas" fontIcon="fa-rocket"></mat-icon>
+          <a [matTooltip]="'anms.footer.changelog' | translate"
+             matTooltipPosition="before"
+             href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
+            <fa-icon icon="rocket"></fa-icon>
             {{version}} <span *ngIf="!isProd">[{{envName}}]</span>
           </a>
         </div>
@@ -116,4 +125,4 @@
 
   </div>
 
-</mat-sidenav-container>
+</mat-sidenav-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -14,7 +14,7 @@ mat-sidenav-container {
       margin: 0 10px 0 0;
     }
 
-    mat-icon {
+    fa-icon {
       font-size: 24px;
     }
 
@@ -92,7 +92,7 @@ mat-sidenav-container {
               text-decoration: none;
             }
 
-            mat-icon {
+            fa-icon {
               font-size: 30px;
               width: 35px;
             }

diff --git a/src/app/examples/crud/components/crud.component.html b/src/app/examples/crud/components/crud.component.html
@@ -12,7 +12,7 @@ <h3>{{book.title}}</h3>
       <button type="button" mat-fab color="primary"
               class="add" [ngClass]="routeAnimationsElements"
               *ngIf="!isEditing" (click)="addNew(bookForm)">
-        <mat-icon fontSet="fas" fontIcon="fa-plus"></mat-icon>
+        <fa-icon icon="plus"></fa-icon>
       </button>
     </div>
     <div class="col-md-6">
@@ -21,22 +21,22 @@ <h2>{{ 'anms.examples.crud.subtitle2' | translate }}</h2>
         <span class="d-flex justify-content-end">
           <span *ngIf="selectedBook">
             <button mat-icon-button color="accent" *ngIf="!isEditing">
-              <mat-icon fontSet="fas" fontIcon="fa-edit" (click)="edit()"
+              <fa-icon icon="edit" (click)="edit()"
                         [matTooltip]="'anms.examples.crud.tooltip.edit' | translate"
                         matTooltipPosition="above">
-              </mat-icon>
+              </fa-icon>
             </button>
             <button mat-icon-button color="warn" (click)="delete()">
-              <mat-icon fontSet="fas" fontIcon="fa-trash"
+              <fa-icon icon="trash"
                         [matTooltip]="'anms.examples.crud.tooltip.delete' | translate"
                         matTooltipPosition="above">
-              </mat-icon>
+              </fa-icon>
             </button>
             <button mat-icon-button (click)="deselect()">
-              <mat-icon fontSet="fas" fontIcon="fa-times"
+              <fa-icon icon="times"
                         [matTooltip]="'anms.examples.crud.tooltip.deselect' | translate"
                         matTooltipPosition="above">
-              </mat-icon>
+              </fa-icon>
             </button>
           </span>
         </span>

diff --git a/src/app/examples/crud/components/crud.component.scss b/src/app/examples/crud/components/crud.component.scss
@@ -9,7 +9,7 @@ mat-card {
 }
 
 .mat-fab {
-  .mat-icon {
+  .fa-icon {
     position: relative;
     top: 4px;
   }

diff --git a/src/app/examples/stock-market/components/stock-market-container.component.html b/src/app/examples/stock-market/components/stock-market-container.component.html
@@ -25,17 +25,17 @@ <h1 class="main-heading">{{ 'anms.examples.stocks.title' | translate }}</h1>
         <mat-card-title>{{stocks.stock.symbol}} <span>{{stocks.stock.last}} {{stocks.stock.ccy}}</span></mat-card-title>
         <mat-card-subtitle>
           <p [ngClass]="{ negative: stocks.stock.changeNegative }">
-            <mat-icon fontSet="fas" fontIcon="fa-caret-up"
-                      *ngIf="stocks.stock.changePositive"></mat-icon>
-            <mat-icon fontSet="fas" fontIcon="fa-caret-down"
-                      *ngIf="stocks.stock.changeNegative"></mat-icon>
+            <fa-icon icon="caret-up"
+                      *ngIf="stocks.stock.changePositive"></fa-icon>
+            <fa-icon icon="caret-down"
+                      *ngIf="stocks.stock.changeNegative"></fa-icon>
             {{stocks.stock.change}} ({{stocks.stock.changePercent}})
           </p>
         </mat-card-subtitle>
         <mat-card-content>{{stocks.stock.exchange}}</mat-card-content>
       </mat-card>
       <p *ngIf="stocks.error" class="error">
-        <mat-icon fontSet="fas" fontIcon="fa-exclamation-triangle"></mat-icon>
+        <fa-icon icon="exclamation-triangle"></fa-icon>
         <br><br>
         <span>
           {{ 'anms.examples.stocks.error1' | translate }}

diff --git a/src/app/examples/stock-market/components/stock-market-container.component.scss b/src/app/examples/stock-market/components/stock-market-container.component.scss
@@ -19,7 +19,7 @@ mat-card {
   mat-card-subtitle {
     text-align: right;
 
-    mat-icon {
+    fa-icon {
       width: 8px;
     }
   }

diff --git a/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss b/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss
@@ -11,7 +11,7 @@
     }
 
     .error {
-      mat-icon {
+      fa-icon {
         color: mat-color($warn);
       }
     }

diff --git a/src/app/examples/stock-market/components/stock-market-container.component.spec.ts b/src/app/examples/stock-market/components/stock-market-container.component.spec.ts
@@ -36,9 +36,7 @@ describe('StockMarketContainerComponent', () => {
     fixture.debugElement.query(By.css('mat-card mat-card-subtitle'));
 
   const getCaretUpDownItem = () =>
-    fixture.debugElement.query(
-      By.css('mat-card mat-icon[fontIcon="fa-caret-down"]')
-    );
+    fixture.debugElement.query(By.css('mat-card fa-icon[icon="caret-down"]'));
 
   describe('given component booted', () => {
     beforeEach(

diff --git a/src/app/examples/todos/components/todos-container.component.html b/src/app/examples/todos/components/todos-container.component.html
@@ -6,13 +6,13 @@
                       (keyup)="onNewTodoChange($event.target.value)"
                       (keyup.enter)="!isAddTodoDisabled && onAddTodo()"
                       (keyup.escape)="onNewTodoClear()">
-        <anms-big-input-action fontSet="fas" fontIcon="fa-plus" color="accent"
+        <anms-big-input-action fontSet="fas" fontIcon="fa-plus" faIcon="plus" color="accent"
                                (action)="onAddTodo()"
                                [disabled]="isAddTodoDisabled"
                                [matTooltip]="'anms.examples.todos.tooltip.add' | translate"
                                matTooltipPosition="before">
         </anms-big-input-action>
-        <anms-big-input-action fontSet="fas" fontIcon="fa-trash" color="warn"
+        <anms-big-input-action fontSet="fas" fontIcon="fa-trash" faIcon="trash" color="warn"
                                (action)="onRemoveDoneTodos()"
                                [disabled]="isRemoveDoneTodosDisabled"
                                matTooltip="Remove done todos"
@@ -27,19 +27,19 @@
       <h2>
         {{ 'anms.examples.todos.list' | translate }}
         <button class="todos-filter" mat-icon-button [matMenuTriggerFor]="todosFilter">
-          <mat-icon fontSet="fas" fontIcon="fa-filter"></mat-icon>
+          <fa-icon icon="filter"></fa-icon>
         </button>
         <mat-menu class="todos-filter-menu-overlay" #todosFilter="matMenu" xPosition="before">
           <button mat-menu-item (click)="onFilterTodos('ALL')" [ngClass]="{ active: todos.filter === 'ALL' }">
-            <mat-icon fontSet="fas" fontIcon="fa-tasks"></mat-icon>
+            <mat-icon><fa-icon icon="tasks"></fa-icon></mat-icon>
             <span>{{ 'anms.examples.todos.filter.all' | translate }}</span>
           </button>
           <button mat-menu-item (click)="onFilterTodos('DONE')" [ngClass]="{ active: todos.filter === 'DONE' }">
-            <mat-icon fontSet="fas" fontIcon="fa-check"></mat-icon>
+            <mat-icon><fa-icon icon="check"></fa-icon></mat-icon>
             <span>{{ 'anms.examples.todos.filter.done' | translate }}</span>
           </button>
           <button mat-menu-item (click)="onFilterTodos('ACTIVE')" [ngClass]="{ active: todos.filter === 'ACTIVE' }">
-            <mat-icon fontSet="fas" fontIcon="fa-square"></mat-icon>
+            <mat-icon><fa-icon icon="square"></fa-icon></mat-icon>
             <span>{{ 'anms.examples.todos.filter.active' | translate }}</span>
           </button>
         </mat-menu>