@fortawesome/vue-fontawesome 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -10,6 +10,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [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

package/README.md

@@ -21,7 +21,6 @@
 <!-- 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)
@@ -69,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

package/index.es.js

@@ -328,6 +328,12 @@ 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);
   }

package/index.js

@@ -332,6 +332,12 @@
 	}
 
 	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);
 	  }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 5",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "index.js",
   "module": "index.es.js",
   "jsnext:main": "index.es.js",

package/src/components/FontAwesomeIcon.js

@@ -4,6 +4,12 @@ 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)
   }

package/src/components/__fixtures__/helpers.js

@@ -30,10 +30,11 @@ export function mountFromProps (propsData = {}) {
 }
 
 export function coreHasFeature (feature) {
-  if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES) {
+  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 ICON_ALIASES = 0x01
+export const REFERENCE_ICON_USING_STRING = 0x02

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

@@ -1,15 +1,19 @@
 import Vue from 'vue/dist/vue'
 import FontAwesomeIcon from '../FontAwesomeIcon'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faClose } from '@fortawesome/free-solid-svg-icons'
+import { faClose, faUser } 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'
+import { coreHasFeature, REFERENCE_ICON_USING_STRING, REFERENCE_ICON_BY_STYLE, ICON_ALIASES, compileAndMount, mountFromProps } from '../__fixtures__/helpers'
 
 beforeEach(() => {
   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'] })
 
@@ -27,7 +31,7 @@ if(coreHasFeature(ICON_ALIASES)) {
     expect(vm.$el.classList.contains('fa-xmark')).toBeTruthy()
   })
 
-  test('find a free-solid-svg-icon that is an alias ', () => {
+  test('find a free-solid-svg-icon that is an alias', () => {
     library.reset()
     library.add(faClose)
     const vm = mountFromProps({ icon: ['fas', 'close'] })
@@ -37,6 +41,22 @@ if(coreHasFeature(ICON_ALIASES)) {
   })
 }
 
+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'] })
@@ -67,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'] })