@fortawesome/vue-fontawesome 2.0.0 → 2.0.4

package/.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

package/.npmrc.proregistry

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

package/CHANGELOG.md

@@ -5,6 +5,39 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+- [Vue 3.x compatible version of this component](https://github.com/FortAwesome/vue-fontawesome/tree/3.x)
+- [CHANGELOG for version 3.x](https://github.com/FortAwesome/vue-fontawesome/blob/3.x/CHANGELOG.md)
+
+---
+
+## [2.0.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.4)  - 2021-10-15
+
+### Fixed
+* Relax the peer dependency for @fortawesome/fontawesome-svg-core
+
+---
+
+## [2.0.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.3)  - 2021-10-15
+
+### Fixed
+* Skip parse.icon if the icon is imported directly from an icon package
+
+---
+
+## [2.0.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.2)  - 2020-12-17
+
+### Fixed
+* Bumping version to fix a failed release for 2.0.1
+
+---
+
+## [2.0.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.1)  - 2020-12-17
+
+### Added
+* Support for the new parse.icon function from the Font Awesome version 6 @fortawesome/fontawesome-svg-core
+
+---
+
 ## [2.0.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/2.0.0)  - 2020-09-01
 
 This release marks the official major release of the component as preparation

package/DEVELOPMENT.md

@@ -17,9 +17,28 @@ test        | Execute unit tests
 1. Update `README.md` and `package.json`; adding any contributors
 1. Update the `CHANGELOG.md`
 1. `npm publish`
-1. `npm pack`
-1. `CLOUDSMITH_API_KEY=API_TOKEN cloudsmith upload npm fortawesome/fontawesome-pro ./fortawesome-vue-fontawesome-VERSION.tgz`
+1. `npm publish --registry https://npm.fontawesome.com`
 1. `git add .`
 1. `git commit -a -m 'Release VERSION'`
 1. `git push`
 1. Create a [new release](https://github.com/FortAwesome/vue-fontawesome/releases/new) with CHANGELOG details
+
+## Authenticating with the npm.fontawesome.com registry
+
+Contributors with authorization to publish to npm.fontawesome.com will receive an invite
+from a Font Awesome project owner.
+
+1. Respond to the invite in your email
+1. Let the owner know when you've setup your account
+1. Owner will add you to the team
+
+You can then run:
+
+```
+npm login --registry https://npm.fontawesome.com
+```
+
+- The username is the "slug" for your Cloudsmith account. For example mine is "rob-madole".
+- Enter the password that you setup just a few minutes ago.
+- It says the your email is PUBLIC. Pretty sure that's false since the auth is through Cloudsmith.
+- This doesn't overwrite your standard login, just adds to your `~/.npmrc`

package/README.md

@@ -21,11 +21,9 @@
 <!-- toc -->
 
 - [Introduction](#introduction)
-  * [CodeSandbox Starter Sample 🚀](#codesandbox-starter-sample-%F0%9F%9A%80)
   * [Upgrading Font Awesome?](#upgrading-font-awesome)
   * [Get started](#get-started)
   * [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
-  * [Going from 0.0.x to 0.1.0](#going-from-00x-to-010)
 - [Installation](#installation)
 - [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
 - [Usage](#usage)
@@ -70,10 +68,6 @@
 
 Hey there! We're glad you're here...
 
-### CodeSandbox Starter Sample 🚀
-
-Here's a [CodeSandbox Starter Sample](https://codesandbox.io/s/github/FortAwesome/vue-fontawesome/tree/master/examples/vue-cli-webpack) on how to display Solid, Regular, and Brand icons [using the Icon Library](https://github.com/FortAwesome/vue-fontawesome#usage).
-
 ### Upgrading Font Awesome?
 
 If you've used Font Awesome in the past (version 4 or older) there are some
@@ -113,13 +107,13 @@ $ yarn add @fortawesome/free-solid-svg-icons
 **Using Vue 2.x**
 
 ```
-$ npm i --save @fortawesome/vue-fontawesome@2
+$ npm i --save @fortawesome/vue-fontawesome@latest
 ```
 
 **Using Vue 3.x**
 
 ```
-$ npm i --save @fortawesome/vue-fontawesome@3
+$ npm i --save @fortawesome/vue-fontawesome@prerelease
 ```
 
 ## Add more styles or Pro icons
@@ -867,6 +861,7 @@ The Font Awesome team:
 | <img src="https://github.com/robmadole.png?size=72" />     | Rob Madole     | [@robmadole](https://github.com/robmadole)         |
 | <img src="https://github.com/mlwilkerson.png?size=72" />   | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson)     |
 | <img src="https://github.com/talbs.png?size=72" />         | Brian Talbot   | [@talbs](https://github.com/talbs)                 |
+| <img src="https://github.com/jasonlundien.png?size=72" />  | Jason Lundien  | [@jasonlundien](https://github.com/jasonlundien)   |
 
 ## Releasing this project
 

package/examples/vue-cli-webpack/package-lock.json

@@ -3603,12 +3603,6 @@
         "es5-ext": "~0.10.14"
       }
     },
-    "eventemitter3": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
-      "dev": true
-    },
     "events": {
       "version": "1.1.1",
       "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
@@ -5087,14 +5081,22 @@
       "dev": true
     },
     "http-proxy": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
-      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "requires": {
-        "eventemitter3": "^3.0.0",
+        "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
         "requires-port": "^1.0.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "4.0.7",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+          "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+          "dev": true
+        }
       }
     },
     "http-proxy-middleware": {

package/index.es.js

@@ -328,6 +328,16 @@ function addStaticClass(to, what) {
 }
 
 function normalizeIconArgs(icon$$1) {
+  // this has everything that it needs to be rendered which means it was probably imported
+  // directly from an icon svg package
+  if (icon$$1 && (typeof icon$$1 === 'undefined' ? 'undefined' : _typeof(icon$$1)) === 'object' && icon$$1.prefix && icon$$1.iconName && icon$$1.icon) {
+    return icon$$1;
+  }
+
+  if (parse.icon) {
+    return parse.icon(icon$$1);
+  }
+
   if (icon$$1 === null) {
     return null;
   }
@@ -440,7 +450,6 @@ var FontAwesomeIcon = {
     var classes = objectWithKey('classes', classList(props));
     var transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
     var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-
     var renderedIcon = icon(icon$$1, _extends({}, classes, transform, mask, { symbol: symbol, title: title }));
 
     if (!renderedIcon) {

package/index.js

@@ -332,6 +332,16 @@
 	}
 
 	function normalizeIconArgs(icon) {
+	  // this has everything that it needs to be rendered which means it was probably imported
+	  // directly from an icon svg package
+	  if (icon && (typeof icon === 'undefined' ? 'undefined' : _typeof(icon)) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+	    return icon;
+	  }
+
+	  if (fontawesomeSvgCore.parse.icon) {
+	    return fontawesomeSvgCore.parse.icon(icon);
+	  }
+
 	  if (icon === null) {
 	    return null;
 	  }
@@ -444,7 +454,6 @@
 	    var classes = objectWithKey('classes', classList(props));
 	    var transform = objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
 	    var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-
 	    var renderedIcon = fontawesomeSvgCore.icon(icon, _extends({}, classes, transform, mask, { symbol: symbol, title: title }));
 
 	    if (!renderedIcon) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 5",
-  "version": "2.0.0",
+  "version": "2.0.4",
   "main": "index.js",
   "module": "index.es.js",
   "jsnext:main": "index.es.js",
@@ -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": {
@@ -36,11 +39,12 @@
     ]
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": ">= 1.2.0 < 1.3",
+    "@fortawesome/fontawesome-svg-core": "~1",
     "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",

package/src/components/FontAwesomeIcon.js

@@ -4,6 +4,16 @@ import log from '../logger'
 import { objectWithKey, classList } from '../utils'
 
 function normalizeIconArgs (icon) {
+  // this has everything that it needs to be rendered which means it was probably imported
+  // directly from an icon svg package
+  if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
+    return icon
+  }
+
+  if (faParse.icon) {
+    return faParse.icon(icon)
+  }
+
   if (icon === null) {
     return null
   }
@@ -99,13 +109,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 }

package/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,13 @@ export function mountFromProps (propsData = {}) {
 
   return vm
 }
+
+export function coreHasFeature (feature) {
+  if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES || feature === REFERENCE_ICON_USING_STRING) {
+    return parse.icon
+  }
+}
+
+export const REFERENCE_ICON_BY_STYLE = 0x00
+export const ICON_ALIASES = 0x01
+export const REFERENCE_ICON_USING_STRING = 0x02

package/src/components/__fixtures__/icons.js

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

package/src/components/__tests__/FontAwesomeIcon.test.js

@@ -1,14 +1,78 @@
 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, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faCoffee, faCircle, faSpartan } from '../__fixtures__/icons'
+import { coreHasFeature, REFERENCE_ICON_USING_STRING, 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)
 })
 
+afterEach(() => {
+  library.reset()
+})
+
+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_USING_STRING)) {
+  test('find an icon using string format', () => {
+    const vm = mountFromProps({ icon: 'fa-coffee' })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-coffee')).toBeTruthy()
+  })
+
+  test('find an icon using string format with style', () => {
+    const vm = mountFromProps({ icon: 'fa-solid fa-coffee' })
+
+    expect(vm.$el.tagName).toBe('svg')
+    expect(vm.$el.classList.contains('fa-coffee')).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'] })
 
@@ -23,6 +87,12 @@ test('using string format', () => {
   expect(vm.$el.classList.contains('fa-coffee')).toBeTruthy()
 })
 
+test.only('using imported object from svg icons package', () => {
+  const vm = mountFromProps({ icon: faUser })
+
+  expect(vm.$el.tagName).toBe('svg')
+})
+
 test('missing icon', () => {
   const vm = mountFromProps({ icon: ['fas', 'noicon'] })