Support some new Font Awesome 6 feature (#271)

.github/workflows/ci.yml

@@ -21,9 +21,11 @@ jobs:
       run: |
         npm install
         npm run build
-        npm run test
+        npm run test.latest
+        npm run test.next.proregistry
       env:
         CI: true
+        FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     - name: dist
       run: |
         npm run dist

.npmrc.proregistry

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

package-lock.json

@@ -62,18 +62,35 @@
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
-      "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==",
+      "version": "0.2.32",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.32/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==",
       "dev": true
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.8.tgz",
-      "integrity": "sha512-cvcMQZ5F8WSNSGMk9uWlkmZNfDzmdsWLRrTMrNwwihHcEmWRlIuSbDt+PQ/rXsnGmJnmLQJLFBT1cse/3swxbg==",
+      "version": "1.2.32",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.32/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
       "dev": true,
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.8"
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.32",
+          "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.32/fontawesome-common-types-0.2.32.tgz",
+          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==",
+          "dev": true
+        }
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.15.1/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
     "@iamstarkov/listr-update-renderer": {

package.json

@@ -26,7 +26,10 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "dist": "cross-env NODE_ENV=production npm run build",
-    "test": "jest",
+    "test": "npm run test.latest && npm run test.next",
+    "test.latest": "npm --no-save install @fortawesome/fontawesome-svg-core@latest @fortawesome/free-solid-svg-icons@latest && jest --silent",
+    "test.next": "npm --no-save install @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
+    "test.next.proregistry": "npm --userconfig .npmrc.proregistry --registry https://npm.fontawesome.com install --no-save @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
     "prepack": "npm run dist"
   },
   "lint-staged": {
@@ -40,7 +43,8 @@
     "vue": "~2"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "babel-core": "^6.26.0",
     "babel-jest": "^23.6.0",
     "babel-plugin-external-helpers": "^6.22.0",

src/components/FontAwesomeIcon.js

@@ -4,6 +4,10 @@ import log from '../logger'
 import { objectWithKey, classList } from '../utils'
 
 function normalizeIconArgs (icon) {
+  if (faParse.icon) {
+    return faParse.icon(icon)
+  }
+
   if (icon === null) {
     return null
   }
@@ -99,13 +103,11 @@ export default {
 
   render (createElement, context) {
     const { props } = context
-
     const { icon: iconArgs, mask: maskArgs, symbol, title } = props
     const icon = normalizeIconArgs(iconArgs)
     const classes = objectWithKey('classes', classList(props))
     const transform = objectWithKey('transform', (typeof props.transform === 'string') ? faParse.transform(props.transform) : props.transform)
     const mask = objectWithKey('mask', normalizeIconArgs(maskArgs))
-
     const renderedIcon = faIcon(
       icon,
       { ...classes, ...transform, ...mask, symbol, title }

src/components/__fixtures__/helpers.js

@@ -1,5 +1,6 @@
 import Vue from 'vue/dist/vue'
 import FontAwesomeIcon from '../FontAwesomeIcon'
+import { parse } from '@fortawesome/fontawesome-svg-core'
 
 export function compileAndMount (str, params = {}) {
   const res = Vue.compile(str)
@@ -27,3 +28,12 @@ export function mountFromProps (propsData = {}) {
 
   return vm
 }
+
+export function coreHasFeature (feature) {
+  if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES) {
+    return parse.icon
+  }
+}
+
+export const REFERENCE_ICON_BY_STYLE = 0x00
+export const ICON_ALIASES = 0x01

src/components/__fixtures__/icons.js

@@ -21,3 +21,15 @@ export const faCircle = {
     "..."
   ]
 }
+
+export const faSpartan = {
+  prefix: 'fat',
+  iconName: 'spartan',
+  icon: [
+    640,
+    512,
+    [],
+    "f100",
+    "..."
+  ]
+}

src/components/__tests__/FontAwesomeIcon.test.js

@@ -1,14 +1,58 @@
 import Vue from 'vue/dist/vue'
 import FontAwesomeIcon from '../FontAwesomeIcon'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee, faCircle } from '../__fixtures__/icons'
-import { compileAndMount, mountFromProps } from '../__fixtures__/helpers'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import { faCoffee, faCircle, faSpartan } from '../__fixtures__/icons'
+import { coreHasFeature, REFERENCE_ICON_BY_STYLE, ICON_ALIASES, compileAndMount, mountFromProps } from '../__fixtures__/helpers'
 
 beforeEach(() => {
-  library.add(faCoffee, faCircle)
+  library.add(faCoffee, faCircle, faSpartan)
   Vue.component('font-awesome-icon', FontAwesomeIcon)
 })
 
+test('using a FAT icon with array format', () => {
+  const vm = mountFromProps({ icon: ['fat', 'spartan'] })
+
+  expect(vm.$el.tagName).toBe('svg')
+  expect(vm.$el.classList.contains('fa-spartan')).toBeTruthy()
+})
+
+if(coreHasFeature(ICON_ALIASES)) {
+  test('find a free-solid-svg-icon with array format', () => {
+    library.reset()
+    library.add(faClose)
+    const vm = mountFromProps({ icon: ['fas', 'xmark'] })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-xmark')).toBeTruthy()
+  })
+
+  test('find a free-solid-svg-icon that is an alias ', () => {
+    library.reset()
+    library.add(faClose)
+    const vm = mountFromProps({ icon: ['fas', 'close'] })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-close')).toBeTruthy()
+  })
+}
+
+if (coreHasFeature(REFERENCE_ICON_BY_STYLE)) {
+  test('find a THIN icon with array format', () => {
+    const vm = mountFromProps({ icon: ['thin', 'spartan'] })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-spartan')).toBeTruthy()
+  })
+
+  test('find a FA-THIN icon with array format', () => {
+    const vm = mountFromProps({ icon: ['fa-thin', 'spartan'] })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-spartan')).toBeTruthy()
+  })
+}
+
 test('using array format', () => {
   const vm = mountFromProps({ icon: ['fas', 'coffee'] })