Add official support for FontAwesome 6

FortAwesome · Nov 13, 2021 · 7c66246 · 7c66246
1 parent 2c9d6da
commit 7c66246
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 35 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -1,7 +1,8 @@
-name: check
+name: Check
 on: pull_request
 jobs:
-  check:
+  check5:
+    name: Font Awesome 5
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -21,3 +22,25 @@ jobs:
       - run: yarn build:schematics
       - run: yarn test:demo
       - run: yarn test:integration
+  check6:
+    name: Font Awesome 6
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+      - uses: actions/cache@v2
+        with:
+          path: .yarn/cache
+          key: ${{ hashFiles('yarn.lock') }}
+      - run: yarn
+      - run: yarn add -D @fortawesome/[email protected] @fortawesome/[email protected] @fortawesome/[email protected]
+      - run: yarn format:enforce
+      - run: yarn lint
+      - run: yarn test
+      - run: yarn test:schematics
+      - run: yarn build
+      - run: yarn build:schematics
+      - run: yarn test:demo
+      - run: yarn test:integration
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 [![npm](https://img.shields.io/npm/v/@fortawesome/angular-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)
 
-Official Angular component for Font Awesome 5
+Official Angular component for Font Awesome 5+
 
 ## Installation
 
@@ -35,17 +35,17 @@ $ npm install @fortawesome/angular-fontawesome@<version>
 
 ### Compatibility table
 
-|@fortawesome/angular-fontawesome|Angular|ng-add|
-|-|-|-|
-|0.1.x|5.x|not supported|
-|0.2.x|6.x|not supported|
-|0.3.x|6.x && 7.x|not supported|
-|0.4.x, 0.5.x|8.x|not supported|
-|0.6.x|9.x|supported|
-|0.7.x|10.x|supported|
-|0.8.x|11.x|supported|
-|0.9.x|12.x|supported|
-|0.10.x|13.x|supported|
+|@fortawesome/angular-fontawesome|Angular|Font Awesome|ng-add|
+|-|-|-|-|
+|0.1.x|5.x|5.x|not supported|
+|0.2.x|6.x|5.x|not supported|
+|0.3.x|6.x && 7.x|5.x|not supported|
+|0.4.x, 0.5.x|8.x|5.x|not supported|
+|0.6.x|9.x|5.x|supported|
+|0.7.x|10.x|5.x|supported|
+|0.8.x|11.x|5.x|supported|
+|0.9.x|12.x|5.x|supported|
+|0.10.x|13.x|5.x && 6.x|supported|
 
 ## Usage
 To get up and running using Font Awesome with Angular follow below steps:

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@angular/language-service": "~13.0.0",
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "~1.2.36",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@types/jasmine": "~3.10.2",
@@ -81,7 +81,7 @@
     "svg"
   ],
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.27"
+    "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2"
   },
   "ngPackage": {
     "lib": {

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -59,8 +59,8 @@ <h3>Layers</h3>
     <fa-icon [icon]="faTimes" [inverse]="true" transform="shrink-6"></fa-icon>
   </fa-layers>
   <fa-layers [fixedWidth]="true" size="4x">
-    <fa-icon [icon]="faMobile"></fa-icon>
-    <fa-icon [icon]="faBatteryQuarter" transform="shrink-11 up-1.5" [styles]="{ color: 'Tomato' }"></fa-icon>
+    <fa-icon [icon]="faSquare"></fa-icon>
+    <fa-icon [icon]="faBatteryQuarter" transform="shrink-8" [styles]="{ color: 'Tomato' }"></fa-icon>
   </fa-layers>
   <fa-layers [fixedWidth]="true" size="4x">
     <fa-icon [icon]="faFighterJet"></fa-icon>

diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -12,7 +12,6 @@ import {
   faFighterJet,
   faFlag as solidFlag,
   faMagic,
-  faMobile,
   faSquare,
   faSync,
   faTimes,
@@ -35,7 +34,6 @@ export class AppComponent {
   faCircle = faCircle;
   faCoffee = faCoffee;
   faSquare = faSquare;
-  faMobile = faMobile;
   regularUser = regularUser;
   faEllipsisH = faEllipsisH;
   faFighterJet = faFighterJet;

diff --git a/projects/schematics/src/ng-add/versions.ts b/projects/schematics/src/ng-add/versions.ts
@@ -1,3 +1,3 @@
-export const svgCoreVersion = '^1.2.36';
+export const svgCoreVersion = '~1.2.36';
 export const angularFontawesomeVersion = '~0.10.0';
 export const iconPackVersion = '^5.15.4';
diff --git a/src/lib/icon-library.spec.ts b/src/lib/icon-library.spec.ts
@@ -1,5 +1,5 @@
 import { inject } from '@angular/core/testing';
-import { far, faSun as farSun, faUser as farUser } from '@fortawesome/free-regular-svg-icons';
+import { far, faSun as farSun, faUser as farUser, faFileAlt } from '@fortawesome/free-regular-svg-icons';
 import { fas, faSun, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FaIconLibrary } from './icon-library';
 
@@ -39,4 +39,9 @@ describe('FaIconLibrary', () => {
     library.addIcons(faUser);
     expect(library.getIconDefinition('fas', 'sun')).toBeNull();
   }));
+
+  it('should be possible to look up icon by alias (FA6 feature)', inject([FaIconLibrary], (library: FaIconLibrary) => {
+    library.addIcons(faFileAlt);
+    expect(library.getIconDefinition('far', 'file-alt')).toBe(faFileAlt);
+  }));
 });
diff --git a/src/lib/icon-library.ts b/src/lib/icon-library.ts
@@ -17,6 +17,11 @@ export class FaIconLibrary implements FaIconLibraryInterface {
         this.definitions[icon.prefix] = {};
       }
       this.definitions[icon.prefix][icon.iconName] = icon;
+      for (const alias of icon.icon[2]) {
+        if (typeof alias === 'string') {
+          this.definitions[icon.prefix][alias] = icon;
+        }
+      }
     }
   }
 

diff --git a/src/lib/layers/layers.component.spec.ts b/src/lib/layers/layers.component.spec.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { faMobile, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faCoffee, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faDummy, initTest, queryByCss } from '../../testing/helpers';
 import { FaConfig } from '../config';
 
@@ -13,14 +13,14 @@ describe('FaLayersComponent', () => {
       template: `
         <fa-layers>
           <fa-icon [icon]="faUser"></fa-icon>
-          <fa-icon [icon]="faMobile"></fa-icon>
-          <fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-icon [icon]="faCoffee"></fa-icon>
+          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
         </fa-layers>
       `,
     })
     class HostComponent {
       faUser = faUser;
-      faMobile = faMobile;
+      faCoffee = faCoffee;
     }
 
     const fixture = initTest(HostComponent);
@@ -34,14 +34,14 @@ describe('FaLayersComponent', () => {
       template: `
         <fa-layers size="2x">
           <fa-icon [icon]="faUser"></fa-icon>
-          <fa-icon [icon]="faMobile"></fa-icon>
-          <fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-icon [icon]="faCoffee"></fa-icon>
+          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
         </fa-layers>
       `,
     })
     class HostComponent {
       faUser = faUser;
-      faMobile = faMobile;
+      faCoffee = faCoffee;
     }
 
     const fixture = initTest(HostComponent);
@@ -83,14 +83,14 @@ describe('FaLayersComponent', () => {
       template: `
         <fa-layers [fixedWidth]="false">
           <fa-icon [icon]="faUser"></fa-icon>
-          <fa-icon [icon]="faMobile"></fa-icon>
-          <fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-icon [icon]="faCoffee"></fa-icon>
+          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
         </fa-layers>
       `,
     })
     class HostComponent {
       faUser = faUser;
-      faMobile = faMobile;
+      faCoffee = faCoffee;
     }
 
     const fixture = initTest(HostComponent);

diff --git a/yarn.lock b/yarn.lock
@@ -1759,7 +1759,7 @@ __metadata:
     "@angular/language-service": ~13.0.0
     "@angular/platform-browser": ~13.0.0
     "@angular/platform-browser-dynamic": ~13.0.0
-    "@fortawesome/fontawesome-svg-core": ^1.2.36
+    "@fortawesome/fontawesome-svg-core": ~1.2.36
     "@fortawesome/free-regular-svg-icons": ^5.15.4
     "@fortawesome/free-solid-svg-icons": ^5.15.4
     "@types/jasmine": ~3.10.2
@@ -1787,7 +1787,7 @@ __metadata:
     typescript: ~4.4.4
     zone.js: ~0.11.4
   peerDependencies:
-    "@fortawesome/fontawesome-svg-core": ^1.2.27
+    "@fortawesome/fontawesome-svg-core": ~1.2.27 || ~1.3.0-beta2
   languageName: unknown
   linkType: soft
 
@@ -1798,7 +1798,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-svg-core@npm:^1.2.36":
+"@fortawesome/fontawesome-svg-core@npm:~1.2.36":
   version: 1.2.36
   resolution: "@fortawesome/fontawesome-svg-core@npm:1.2.36"
   dependencies: