@fortawesome/vue-fontawesome 0.1.10 → 2.0.3

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,55 @@ 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.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
+for supporting two different versions of Vue.
+
+### What is the difference between 0.1.10 and 2.0.0?
+
+There is no difference. We've jumped the version to 2.0.0 so you know which
+version of vue-fontawesome you should install based on what version of Vue you
+are using.
+
+### What version should you install?
+
+|         | Vue | vue-fontawesome |
+| ------- |-----|-----------------|
+| Version | 2.x | 2.x or 0.1.x    |
+| Version | 3.x | 3.x             |
+
+While you can still use 0.1 with Vue 2.x, we recommend upgrade to the 2.x
+release. The 0.1 release line will not be getting any further updates.
+
+---
+
 ## [0.1.10](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.10)  - 2020-06-15
 
 ### Fixed

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. `git add index.js index.es.js`
+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

@@ -9,14 +9,21 @@
 
 > Font Awesome 5 Vue component using SVG with JS
 
+---
+
+**Vue 3 is just around the corner!**
+
+**If you have been using 0.1.x of vue-fontawesome, you can safely upgrade to
+2.x. We have some upgrading information in the [CHANGELOG](./CHANGELOG.md)**
+
+---
+
 <!-- 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)
@@ -61,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
@@ -86,18 +89,31 @@ the web fonts implementation that was used in version 4 and older of Font Awesom
 
 > https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
 
-### Going from 0.0.x to 0.1.0
-
-See [UPGRADING.md](./UPGRADING.md).
-
-You might also be interested in the larger umbrella project [UPGRADING.md](https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md)
-
 ## Installation
 
+Install the core package and icon content.
+
 ```
 $ npm i --save @fortawesome/fontawesome-svg-core
 $ npm i --save @fortawesome/free-solid-svg-icons
-$ npm i --save @fortawesome/vue-fontawesome
+```
+
+Or with Yarn:
+```
+$ yarn add @fortawesome/fontawesome-svg-core
+$ yarn add @fortawesome/free-solid-svg-icons
+```
+
+**Using Vue 2.x**
+
+```
+$ npm i --save @fortawesome/vue-fontawesome@latest
+```
+
+**Using Vue 3.x**
+
+```
+$ npm i --save @fortawesome/vue-fontawesome@prerelease
 ```
 
 ## Add more styles or Pro icons
@@ -121,16 +137,6 @@ $ npm i --save @fortawesome/pro-light-svg-icons
 $ npm i --save @fortawesome/pro-duotone-svg-icons
 ```
 
-**Duotone icons are currently in pre-release and are coming soon to this component.**
-
-Or with Yarn:
-
-```
-$ yarn add @fortawesome/fontawesome-svg-core
-$ yarn add @fortawesome/free-solid-svg-icons
-$ yarn add @fortawesome/vue-fontawesome
-```
-
 ## Usage
 
 ### Recommended
@@ -541,7 +547,7 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 
 ### Advanced
 
-[Power Transforms]((https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)):
+[Power Transforms](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms):
 
 ```html
 <font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
@@ -855,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

@@ -204,9 +204,9 @@
       }
     },
     "@fortawesome/vue-fontawesome": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.2.tgz",
-      "integrity": "sha512-K/3awMf8AZmTyiYfNVuTHAtjToro6tE/yNV8dsmFk/2v6CXj+6wGltMzX8VBF9vC9rz3iv1zTwMdwtYaQYrAmQ=="
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA=="
     },
     "accepts": {
       "version": "1.3.5",
@@ -3064,9 +3064,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
-      "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -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": {
@@ -5823,9 +5825,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
       "dev": true
     },
     "lodash.camelcase": {
@@ -11405,9 +11407,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "whet.extend": {

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": "0.1.10",
+  "version": "2.0.3",
   "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": {
@@ -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",

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'] })