Support some new Font Awesome 6 feature (#398)

.github/workflows/tests.yml → .github/workflows/ci.yml

@@ -1,9 +1,9 @@
-name: Tests
+name: CI
 
 on: [push, pull_request]
 
 jobs:
-  test:
+  build:
     runs-on: ubuntu-latest
 
     strategy:
@@ -29,10 +29,17 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node }}
-      - name: npm install and test
+      - name: npm install, build, and test
         run: |
           npm install
+          npm run build
           npm install react@${{ matrix.react }} react-dom@${{ matrix.react }} react-test-renderer@${{ matrix.react }}
           npm list react react-dom react-test-renderer
           npm run lint
-          npm run test
+          npm run test.latest
+          npm run test.next.proregistry
+        env:
+          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}

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 10.16.0
+nodejs 10.16.2
 python 3.7.5

package.json

@@ -35,7 +35,10 @@
     "prettier": "pretty-quick --pattern src/** --staged",
     "precommit": "npm run lint && npm run prettier && lint-staged",
     "prepack": "npm run dist",
-    "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",
     "clean": "rm -f index.js && rm -f index.es.js"
   },
   "lint-staged": {
@@ -46,6 +49,7 @@
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.20",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "react": ">=16.x"
   },
   "devDependencies": {

src/components/__fixtures__/helpers.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import FontAwesomeIcon from '../FontAwesomeIcon'
+import renderer from 'react-test-renderer'
+import { parse } from '@fortawesome/fontawesome-svg-core'
+
+export const REFERENCE_ICON_BY_STYLE = 0x00
+export const ICON_ALIASES = 0x01
+
+export function coreHasFeature (feature) {
+  if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES) {
+    return parse.icon
+  }
+}
+
+export function mount(props = {}, { createNodeMock } = {}) {
+  const component = renderer.create(<FontAwesomeIcon {...props} />, {
+    createNodeMock
+  })
+
+  return component.toJSON()
+}

src/components/__fixtures__/icons.js

@@ -0,0 +1,35 @@
+export const faCoffee = {
+  prefix: 'fas',
+  iconName: 'coffee',
+  icon: [
+    640,
+    512,
+    [],
+    'f0f4',
+    'M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'
+  ]
+}
+
+export const faCircle = {
+  prefix: 'fas',
+  iconName: 'circle',
+  icon: [
+    640,
+    512,
+    [],
+    'f0f4',
+    'M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'
+  ]
+}
+
+export const faSpartan = {
+  prefix: 'fat',
+  iconName: 'spartan',
+  icon: [
+    640,
+    512,
+    [],
+    'f0f4',
+    'M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'
+  ]
+}

src/components/__tests__/FontAwesomeIcon.test.js

@@ -1,43 +1,58 @@
 import * as fontawesome from '@fortawesome/fontawesome-svg-core'
-import FontAwesomeIcon from '../FontAwesomeIcon'
-import React from 'react'
-import renderer from 'react-test-renderer'
 import log from '../../logger'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import { faCoffee, faCircle, faSpartan } from '../__fixtures__/icons'
+import { coreHasFeature, REFERENCE_ICON_BY_STYLE, ICON_ALIASES, mount } from '../__fixtures__/helpers'
 
 jest.mock('../../logger')
 
-const faCoffee = {
-  prefix: 'fas',
-  iconName: 'coffee',
-  icon: [
-    640,
-    512,
-    [],
-    'f0f4',
-    'M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'
-  ]
-}
+beforeEach(() => {
+  fontawesome.library.add(faCoffee, faCircle, faSpartan)
+})
+
+test('using a FAT icon using array format', () => {
+  const vm = mount({
+    icon: ['fat', 'spartan']
+  })
+
+  expect(vm.type).toBe('svg')
+  expect(vm.props.className.includes('fa-spartan')).toBeTruthy()
+})
 
-const faCircle = {
-  prefix: 'fas',
-  iconName: 'circle',
-  icon: [
-    640,
-    512,
-    [],
-    'f0f4',
-    'M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'
-  ]
+if (coreHasFeature(ICON_ALIASES)) {
+  test('find a free-solid-svg-icon with array format', () => {
+    fontawesome.library.reset()
+    fontawesome.library.add(faClose)
+    const vm = mount({ icon: ['fas', 'xmark'] })
+
+    expect(vm.type).toBe('svg')
+    expect(vm.props.className.includes('fa-xmark')).toBeTruthy()
+  })
+
+  test('find a free-solid-svg-icon that is an alias ', () => {
+    fontawesome.library.reset()
+    fontawesome.library.add(faClose)
+    const vm = mount({ icon: ['fas', 'close'] })
+
+    expect(vm.type).toBe('svg')
+    expect(vm.props.className.includes('fa-close')).toBeTruthy()
+  })
 }
 
-fontawesome.library.add(faCoffee, faCircle)
+if (coreHasFeature(REFERENCE_ICON_BY_STYLE)) {
+  test('find a THIN icon with array format', () => {
+    const vm = mount({ icon: ['thin', 'spartan'] })
 
-function mount(props = {}, { createNodeMock } = {}) {
-  const component = renderer.create(<FontAwesomeIcon {...props} />, {
-    createNodeMock
+    expect(vm.type).toBe('svg')
+    expect(vm.props.className.includes('fa-spartan')).toBeTruthy()
   })
 
-  return component.toJSON()
+  test('find a FA-THIN icon with array format', () => {
+    const vm = mount({ icon: ['fa-thin', 'spartan'] })
+
+    expect(vm.type).toBe('svg')
+    expect(vm.props.className.includes('fa-spartan')).toBeTruthy()
+  })
 }
 
 test('using pack and name', () => {

src/utils/normalize-icon-args.js

@@ -1,5 +1,11 @@
+import { parse as faParse } from '@fortawesome/fontawesome-svg-core'
+
 // Normalize icon arguments
 export default function normalizeIconArgs(icon) {
+  if (faParse.icon) {
+    return faParse.icon(icon)
+  }
+
   // if the icon is null, there's nothing to do
   if (icon === null) {
     return null