@fortawesome/vue-fontawesome - npm Package Compare versions

Comparing version 3.0.0-5 to 3.0.0

CHANGELOG.md

@@ -8,2 +8,17 @@ # Change Log
 
+## [3.0.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0) - 2022-06-07
+
+### Added
+
+*  New animations for bounce and shake
+*  Feature to call icons using a string format
+
+### Fixed
+
+*  Animations for beat, fade, beat-fade, flash, spin-pulse, and spin-reverse
+*  Tee-shirt sizes to include 2xs, lg, xl, and 2xl
+*  Flip animation when used by itself
+
+---
+
 ## [3.0.0-5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-5) - 2021-10-18
@@ -10,0 +25,0 @@

index.d.ts

@@ -6,3 +6,3 @@ import { ComponentPublicInstance } from 'vue'
   fixedWidth: boolean
-  flip: 'horizontal' | 'vertical' | 'both' | null
+  flip: boolean | 'horizontal' | 'vertical' | 'both'
   icon: object | Array<string> | string
@@ -9,0 +9,0 @@ mask: object | Array<string> | string | null

index.es.js

@@ -0,201 +1,263 @@
+import { parse, icon, config, text } from '@fortawesome/fontawesome-svg-core';
 import { h, defineComponent, computed, watch } from 'vue';
-import { parse, icon, config, text } from '@fortawesome/fontawesome-svg-core';
 
-var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
 }
 
-var humps = createCommonjsModule(function (module) {
-(function(global) {
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
 
-  var _processKeys = function(convert, obj, options) {
-    if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
-      return obj;
-    }
+  return target;
+}
 
-    var output,
-        i = 0,
-        l = 0;
+function _typeof(obj) {
+  "@babel/helpers - typeof";
 
-    if(_isArray(obj)) {
-      output = [];
-      for(l=obj.length; i<l; i++) {
-        output.push(_processKeys(convert, obj[i], options));
-      }
-    }
-    else {
-      output = {};
-      for(var key in obj) {
-        if(Object.prototype.hasOwnProperty.call(obj, key)) {
-          output[convert(key, options)] = _processKeys(convert, obj[key], options);
-        }
-      }
-    }
-    return output;
-  };
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
 
-  // String conversion methods
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-  var separateWords = function(string, options) {
-    options = options || {};
-    var separator = options.separator || '_';
-    var split = options.split || /(?=[A-Z])/;
+  return obj;
+}
 
-    return string.split(split).join(separator);
-  };
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-  var camelize = function(string) {
-    if (_isNumerical(string)) {
-      return string;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
     }
-    string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
-      return chr ? chr.toUpperCase() : '';
-    });
-    // Ensure 1st char is always lowercase
-    return string.substr(0, 1).toLowerCase() + string.substr(1);
-  };
+  }
 
-  var pascalize = function(string) {
-    var camelized = camelize(string);
-    // Ensure 1st char is always uppercase
-    return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
-  };
+  return target;
+}
 
-  var decamelize = function(string, options) {
-    return separateWords(string, options).toLowerCase();
-  };
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
-  // Utilities
-  // Taken from Underscore.js
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-  var toString = Object.prototype.toString;
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 
-  var _isFunction = function(obj) {
-    return typeof(obj) === 'function';
-  };
-  var _isObject = function(obj) {
-    return obj === Object(obj);
-  };
-  var _isArray = function(obj) {
-    return toString.call(obj) == '[object Array]';
-  };
-  var _isDate = function(obj) {
-    return toString.call(obj) == '[object Date]';
-  };
-  var _isRegExp = function(obj) {
-    return toString.call(obj) == '[object RegExp]';
-  };
-  var _isBoolean = function(obj) {
-    return toString.call(obj) == '[object Boolean]';
-  };
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 
-  // Performant way to determine if obj coerces to a number
-  var _isNumerical = function(obj) {
-    obj = obj - 0;
-    return obj === obj;
-  };
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
 
-  // Sets up function which handles processing keys
-  // allowing the convert function to be modified by a callback
-  var _processor = function(convert, options) {
-    var callback = options && 'process' in options ? options.process : options;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 
-    if(typeof(callback) !== 'function') {
-      return convert;
-    }
+  return arr2;
+}
 
-    return function(string, options) {
-      return callback(string, convert, options);
-    }
-  };
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-  var humps = {
-    camelize: camelize,
-    decamelize: decamelize,
-    pascalize: pascalize,
-    depascalize: decamelize,
-    camelizeKeys: function(object, options) {
-      return _processKeys(_processor(camelize, options), object);
-    },
-    decamelizeKeys: function(object, options) {
-      return _processKeys(_processor(decamelize, options), object, options);
-    },
-    pascalizeKeys: function(object, options) {
-      return _processKeys(_processor(pascalize, options), object);
-    },
-    depascalizeKeys: function () {
-      return this.decamelizeKeys.apply(this, arguments);
-    }
-  };
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  if (typeof undefined === 'function' && undefined.amd) {
-    undefined(humps);
-  } else if ('object' !== 'undefined' && module.exports) {
-    module.exports = humps;
-  } else {
-    global.humps = humps;
-  }
+var humps$1 = {exports: {}};
 
-})(commonjsGlobal);
-});
+(function (module) {
+(function(global) {
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-  return typeof obj;
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-};
+	  var _processKeys = function(convert, obj, options) {
+	    if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
+	      return obj;
+	    }
 
-var defineProperty = function (obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
+	    var output,
+	        i = 0,
+	        l = 0;
 
-  return obj;
-};
+	    if(_isArray(obj)) {
+	      output = [];
+	      for(l=obj.length; i<l; i++) {
+	        output.push(_processKeys(convert, obj[i], options));
+	      }
+	    }
+	    else {
+	      output = {};
+	      for(var key in obj) {
+	        if(Object.prototype.hasOwnProperty.call(obj, key)) {
+	          output[convert(key, options)] = _processKeys(convert, obj[key], options);
+	        }
+	      }
+	    }
+	    return output;
+	  };
 
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+	  // String conversion methods
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
+	  var separateWords = function(string, options) {
+	    options = options || {};
+	    var separator = options.separator || '_';
+	    var split = options.split || /(?=[A-Z])/;
 
-  return target;
-};
+	    return string.split(split).join(separator);
+	  };
 
-var objectWithoutProperties = function (obj, keys) {
-  var target = {};
+	  var camelize = function(string) {
+	    if (_isNumerical(string)) {
+	      return string;
+	    }
+	    string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
+	      return chr ? chr.toUpperCase() : '';
+	    });
+	    // Ensure 1st char is always lowercase
+	    return string.substr(0, 1).toLowerCase() + string.substr(1);
+	  };
 
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
-    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-    target[i] = obj[i];
-  }
+	  var pascalize = function(string) {
+	    var camelized = camelize(string);
+	    // Ensure 1st char is always uppercase
+	    return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
+	  };
 
-  return target;
-};
+	  var decamelize = function(string, options) {
+	    return separateWords(string, options).toLowerCase();
+	  };
 
-var toConsumableArray = function (arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+	  // Utilities
+	  // Taken from Underscore.js
 
-    return arr2;
-  } else {
-    return Array.from(arr);
-  }
-};
+	  var toString = Object.prototype.toString;
 
+	  var _isFunction = function(obj) {
+	    return typeof(obj) === 'function';
+	  };
+	  var _isObject = function(obj) {
+	    return obj === Object(obj);
+	  };
+	  var _isArray = function(obj) {
+	    return toString.call(obj) == '[object Array]';
+	  };
+	  var _isDate = function(obj) {
+	    return toString.call(obj) == '[object Date]';
+	  };
+	  var _isRegExp = function(obj) {
+	    return toString.call(obj) == '[object RegExp]';
+	  };
+	  var _isBoolean = function(obj) {
+	    return toString.call(obj) == '[object Boolean]';
+	  };
+
+	  // Performant way to determine if obj coerces to a number
+	  var _isNumerical = function(obj) {
+	    obj = obj - 0;
+	    return obj === obj;
+	  };
+
+	  // Sets up function which handles processing keys
+	  // allowing the convert function to be modified by a callback
+	  var _processor = function(convert, options) {
+	    var callback = options && 'process' in options ? options.process : options;
+
+	    if(typeof(callback) !== 'function') {
+	      return convert;
+	    }
+
+	    return function(string, options) {
+	      return callback(string, convert, options);
+	    }
+	  };
+
+	  var humps = {
+	    camelize: camelize,
+	    decamelize: decamelize,
+	    pascalize: pascalize,
+	    depascalize: decamelize,
+	    camelizeKeys: function(object, options) {
+	      return _processKeys(_processor(camelize, options), object);
+	    },
+	    decamelizeKeys: function(object, options) {
+	      return _processKeys(_processor(decamelize, options), object, options);
+	    },
+	    pascalizeKeys: function(object, options) {
+	      return _processKeys(_processor(pascalize, options), object);
+	    },
+	    depascalizeKeys: function () {
+	      return this.decamelizeKeys.apply(this, arguments);
+	    }
+	  };
+
+	  if (module.exports) {
+	    module.exports = humps;
+	  } else {
+	    global.humps = humps;
+	  }
+
+	})(commonjsGlobal);
+} (humps$1));
+
+var humps = humps$1.exports;
+
+var _excluded = ["class", "style"];
 /**
@@ -206,2 +268,3 @@ * Converts a CSS style into a plain Javascript object.
  */
+
 function styleToObject(style) {
@@ -216,3 +279,2 @@ return style.split(';').map(function (s) {
     var value = pair.slice(idx + 1).trim();
-
     output[prop] = value;
@@ -222,3 +284,2 @@ return output;
 }
-
 /**
@@ -229,2 +290,4 @@ * Converts a CSS class list into a plain Javascript object.
  */
+
+
 function classToObject(classes) {
@@ -236,3 +299,2 @@ return classes.split(/\s+/).reduce(function (output, className) {
 }
-
 /**
@@ -245,2 +307,4 @@ * Converts a FontAwesome abstract element of an icon into a Vue VNode.
  */
+
+
 function convert(abstractElement) {
@@ -253,10 +317,9 @@ var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return abstractElement;
-  }
+  } // Converting abstract element children into Vue VNodes
 
-  // Converting abstract element children into Vue VNodes
+
   var children = (abstractElement.children || []).map(function (child) {
     return convert(child);
-  });
+  }); // Converting abstract element attributes into valid Vue format
 
-  // Converting abstract element attributes into valid Vue format
   var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
@@ -269,5 +332,7 @@ var value = abstractElement.attributes[key];
         break;
+
       case 'style':
         mixins.style = styleToObject(value);
         break;
+
       default:
@@ -282,15 +347,13 @@ mixins.attrs[key] = value;
     style: {}
-  });
+  }); // Now, we'll return the VNode
 
-  // Now, we'll return the VNode
+  attrs.class;
+      var _attrs$style = attrs.style,
+      aStyle = _attrs$style === void 0 ? {} : _attrs$style,
+      otherAttrs = _objectWithoutProperties(attrs, _excluded);
 
-  var _attrs$class = attrs.class,
-      _attrs$style = attrs.style,
-      aStyle = _attrs$style === undefined ? {} : _attrs$style,
-      otherAttrs = objectWithoutProperties(attrs, ['class', 'style']);
-
-  return h(abstractElement.tag, _extends({}, props, {
+  return h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
     class: mixins.class,
-    style: _extends({}, mixins.style, aStyle)
-  }, mixins.attrs, otherAttrs), children);
+    style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
+  }, mixins.attrs), otherAttrs), children);
 }
@@ -313,5 +376,4 @@
 function objectWithKey(key, value) {
-  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? defineProperty({}, key, value) : {};
+  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
 }
-
 function classList(props) {
@@ -327,6 +389,6 @@ var _classes;
     'fa-inverse': props.inverse,
+    'fa-flip': props.flip === true,
     'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
     'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
-  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes);
-
+  }, _defineProperty(_classes, "fa-".concat(props.size), props.size !== null), _defineProperty(_classes, "fa-rotate-".concat(props.rotation), props.rotation !== null), _defineProperty(_classes, "fa-pull-".concat(props.pull), props.pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _defineProperty(_classes, 'fa-bounce', props.bounce), _defineProperty(_classes, 'fa-shake', props.shake), _defineProperty(_classes, 'fa-beat', props.beat), _defineProperty(_classes, 'fa-fade', props.fade), _defineProperty(_classes, 'fa-beat-fade', props.beatFade), _defineProperty(_classes, 'fa-flash', props.flash), _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), _classes);
   return Object.keys(classes).map(function (key) {
@@ -339,17 +401,31 @@ return classes[key] ? key : null;
 
-function normalizeIconArgs(icon$$1) {
-  if (icon$$1 === null) {
+function normalizeIconArgs(icon) {
+  if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+    return icon;
+  }
+
+  if (parse.icon) {
+    return parse.icon(icon);
+  }
+
+  if (icon === null) {
     return null;
   }
 
-  if ((typeof icon$$1 === 'undefined' ? 'undefined' : _typeof(icon$$1)) === 'object' && icon$$1.prefix && icon$$1.iconName) {
-    return icon$$1;
+  if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
+    return icon;
   }
 
-  if (Array.isArray(icon$$1) && icon$$1.length === 2) {
-    return { prefix: icon$$1[0], iconName: icon$$1[1] };
+  if (Array.isArray(icon) && icon.length === 2) {
+    return {
+      prefix: icon[0],
+      iconName: icon[1]
+    };
   }
 
-  if (typeof icon$$1 === 'string') {
-    return { prefix: 'fas', iconName: icon$$1 };
+  if (typeof icon === 'string') {
+    return {
+      prefix: 'fas',
+      iconName: icon
+    };
   }
@@ -360,3 +436,2 @@ }
   name: 'FontAwesomeIcon',
-
   props: {
@@ -372,6 +447,6 @@ border: {
     flip: {
-      type: String,
-      default: null,
+      type: [Boolean, String],
+      default: false,
       validator: function validator(value) {
-        return ['horizontal', 'vertical', 'both'].indexOf(value) > -1;
+        return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1;
       }
@@ -417,3 +492,3 @@ },
       validator: function validator(value) {
-        return ['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
+        return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
       }
@@ -440,9 +515,39 @@ },
       default: false
+    },
+    bounce: {
+      type: Boolean,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      default: false
+    },
+    beat: {
+      type: Boolean,
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    },
+    beatFade: {
+      type: Boolean,
+      default: false
+    },
+    flash: {
+      type: Boolean,
+      default: false
+    },
+    spinPulse: {
+      type: Boolean,
+      default: false
+    },
+    spinReverse: {
+      type: Boolean,
+      default: false
     }
   },
-
   setup: function setup(props, _ref) {
     var attrs = _ref.attrs;
-
-    var icon$$1 = computed(function () {
+    var icon$1 = computed(function () {
       return normalizeIconArgs(props.icon);
@@ -459,5 +564,4 @@ });
     });
-
     var renderedIcon = computed(function () {
-      return icon(icon$$1.value, _extends({}, classes.value, transform.value, mask.value, {
+      return icon(icon$1.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
         symbol: props.symbol,
@@ -467,9 +571,9 @@ title: props.title
     });
-
     watch(renderedIcon, function (value) {
       if (!value) {
-        return log('Could not find one or more icon(s)', icon$$1.value, mask.value);
+        return log('Could not find one or more icon(s)', icon$1.value, mask.value);
       }
-    }, { immediate: true });
-
+    }, {
+      immediate: true
+    });
     var vnode = computed(function () {
@@ -486,3 +590,2 @@ return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null;
   name: 'FontAwesomeLayers',
-
   props: {
@@ -494,14 +597,12 @@ fixedWidth: {
   },
-
   setup: function setup(props, _ref) {
     var slots = _ref.slots;
     var familyPrefix = config.familyPrefix;
-
-
     var className = computed(function () {
-      return [familyPrefix + '-layers'].concat(toConsumableArray(props.fixedWidth ? [familyPrefix + '-fw'] : []));
+      return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : []));
     });
-
     return function () {
-      return h('div', { class: className.value }, slots.default ? slots.default() : []);
+      return h('div', {
+        class: className.value
+      }, slots.default ? slots.default() : []);
     };
@@ -513,3 +614,2 @@ }
   name: 'FontAwesomeLayersText',
-
   props: {
@@ -536,10 +636,7 @@ value: {
   },
-
   setup: function setup(props, _ref) {
     var attrs = _ref.attrs;
     var familyPrefix = config.familyPrefix;
-
-
     var classes = computed(function () {
-      return objectWithKey('classes', [].concat(toConsumableArray(props.counter ? [familyPrefix + '-layers-counter'] : []), toConsumableArray(props.position ? [familyPrefix + '-layers-' + props.position] : [])));
+      return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : [])));
     });
@@ -550,3 +647,3 @@ var transform = computed(function () {
     var abstractElement = computed(function () {
-      var _text = text(props.value.toString(), _extends({}, transform.value, classes.value)),
+      var _text = text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
           abstract = _text.abstract;
@@ -557,5 +654,5 @@
       }
+
       return abstract[0];
     });
-
     var vnode = computed(function () {
@@ -562,0 +659,0 @@ return convert(abstractElement.value, {}, attrs);

index.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@fortawesome/fontawesome-svg-core')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'vue', '@fortawesome/fontawesome-svg-core'], factory) :
-	(factory((global['vue-fontawesome'] = {}),global.vue,global.FontAwesome));
-}(this, (function (exports,vue,fontawesomeSvgCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@fortawesome/fontawesome-svg-core', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vue-fontawesome"] = {}, global.FontAwesome, global.vue));
+})(this, (function (exports, fontawesomeSvgCore, vue) { 'use strict';
 
-	var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
 
-	function createCommonjsModule(fn, module) {
-		return module = { exports: {} }, fn(module, module.exports), module.exports;
-	}
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
 
-	var humps = createCommonjsModule(function (module) {
-	(function(global) {
+    return keys;
+  }
 
-	  var _processKeys = function(convert, obj, options) {
-	    if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
-	      return obj;
-	    }
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
 
-	    var output,
-	        i = 0,
-	        l = 0;
+    return target;
+  }
 
-	    if(_isArray(obj)) {
-	      output = [];
-	      for(l=obj.length; i<l; i++) {
-	        output.push(_processKeys(convert, obj[i], options));
-	      }
-	    }
-	    else {
-	      output = {};
-	      for(var key in obj) {
-	        if(Object.prototype.hasOwnProperty.call(obj, key)) {
-	          output[convert(key, options)] = _processKeys(convert, obj[key], options);
-	        }
-	      }
-	    }
-	    return output;
-	  };
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
 
-	  // String conversion methods
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
 
-	  var separateWords = function(string, options) {
-	    options = options || {};
-	    var separator = options.separator || '_';
-	    var split = options.split || /(?=[A-Z])/;
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
 
-	    return string.split(split).join(separator);
-	  };
+    return obj;
+  }
 
-	  var camelize = function(string) {
-	    if (_isNumerical(string)) {
-	      return string;
-	    }
-	    string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
-	      return chr ? chr.toUpperCase() : '';
-	    });
-	    // Ensure 1st char is always lowercase
-	    return string.substr(0, 1).toLowerCase() + string.substr(1);
-	  };
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
 
-	  var pascalize = function(string) {
-	    var camelized = camelize(string);
-	    // Ensure 1st char is always uppercase
-	    return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
-	  };
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
 
-	  var decamelize = function(string, options) {
-	    return separateWords(string, options).toLowerCase();
-	  };
+    return target;
+  }
 
-	  // Utilities
-	  // Taken from Underscore.js
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
 
-	  var toString = Object.prototype.toString;
+    var target = _objectWithoutPropertiesLoose(source, excluded);
 
-	  var _isFunction = function(obj) {
-	    return typeof(obj) === 'function';
-	  };
-	  var _isObject = function(obj) {
-	    return obj === Object(obj);
-	  };
-	  var _isArray = function(obj) {
-	    return toString.call(obj) == '[object Array]';
-	  };
-	  var _isDate = function(obj) {
-	    return toString.call(obj) == '[object Date]';
-	  };
-	  var _isRegExp = function(obj) {
-	    return toString.call(obj) == '[object RegExp]';
-	  };
-	  var _isBoolean = function(obj) {
-	    return toString.call(obj) == '[object Boolean]';
-	  };
+    var key, i;
 
-	  // Performant way to determine if obj coerces to a number
-	  var _isNumerical = function(obj) {
-	    obj = obj - 0;
-	    return obj === obj;
-	  };
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-	  // Sets up function which handles processing keys
-	  // allowing the convert function to be modified by a callback
-	  var _processor = function(convert, options) {
-	    var callback = options && 'process' in options ? options.process : options;
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
 
-	    if(typeof(callback) !== 'function') {
-	      return convert;
-	    }
+    return target;
+  }
 
-	    return function(string, options) {
-	      return callback(string, convert, options);
-	    }
-	  };
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
 
-	  var humps = {
-	    camelize: camelize,
-	    decamelize: decamelize,
-	    pascalize: pascalize,
-	    depascalize: decamelize,
-	    camelizeKeys: function(object, options) {
-	      return _processKeys(_processor(camelize, options), object);
-	    },
-	    decamelizeKeys: function(object, options) {
-	      return _processKeys(_processor(decamelize, options), object, options);
-	    },
-	    pascalizeKeys: function(object, options) {
-	      return _processKeys(_processor(pascalize, options), object);
-	    },
-	    depascalizeKeys: function () {
-	      return this.decamelizeKeys.apply(this, arguments);
-	    }
-	  };
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
 
-	  if (typeof undefined === 'function' && undefined.amd) {
-	    undefined(humps);
-	  } else if ('object' !== 'undefined' && module.exports) {
-	    module.exports = humps;
-	  } else {
-	    global.humps = humps;
-	  }
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
 
-	})(commonjsGlobal);
-	});
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
 
-	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-	  return typeof obj;
-	} : function (obj) {
-	  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	};
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
 
-	var defineProperty = function (obj, key, value) {
-	  if (key in obj) {
-	    Object.defineProperty(obj, key, {
-	      value: value,
-	      enumerable: true,
-	      configurable: true,
-	      writable: true
-	    });
-	  } else {
-	    obj[key] = value;
-	  }
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 
-	  return obj;
-	};
+    return arr2;
+  }
 
-	var _extends = Object.assign || function (target) {
-	  for (var i = 1; i < arguments.length; i++) {
-	    var source = arguments[i];
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
 
-	    for (var key in source) {
-	      if (Object.prototype.hasOwnProperty.call(source, key)) {
-	        target[key] = source[key];
-	      }
-	    }
-	  }
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-	  return target;
-	};
+  var humps$1 = {exports: {}};
 
-	var objectWithoutProperties = function (obj, keys) {
-	  var target = {};
+  (function (module) {
+  (function(global) {
 
-	  for (var i in obj) {
-	    if (keys.indexOf(i) >= 0) continue;
-	    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-	    target[i] = obj[i];
-	  }
+  	  var _processKeys = function(convert, obj, options) {
+  	    if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
+  	      return obj;
+  	    }
 
-	  return target;
-	};
+  	    var output,
+  	        i = 0,
+  	        l = 0;
 
-	var toConsumableArray = function (arr) {
-	  if (Array.isArray(arr)) {
-	    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+  	    if(_isArray(obj)) {
+  	      output = [];
+  	      for(l=obj.length; i<l; i++) {
+  	        output.push(_processKeys(convert, obj[i], options));
+  	      }
+  	    }
+  	    else {
+  	      output = {};
+  	      for(var key in obj) {
+  	        if(Object.prototype.hasOwnProperty.call(obj, key)) {
+  	          output[convert(key, options)] = _processKeys(convert, obj[key], options);
+  	        }
+  	      }
+  	    }
+  	    return output;
+  	  };
 
-	    return arr2;
-	  } else {
-	    return Array.from(arr);
-	  }
-	};
+  	  // String conversion methods
 
-	/**
-	 * Converts a CSS style into a plain Javascript object.
-	 * @param {String} style The style to converts into a plain Javascript object.
-	 * @returns {Object}
-	 */
-	function styleToObject(style) {
-	  return style.split(';').map(function (s) {
-	    return s.trim();
-	  }).filter(function (s) {
-	    return s;
-	  }).reduce(function (output, pair) {
-	    var idx = pair.indexOf(':');
-	    var prop = humps.camelize(pair.slice(0, idx));
-	    var value = pair.slice(idx + 1).trim();
+  	  var separateWords = function(string, options) {
+  	    options = options || {};
+  	    var separator = options.separator || '_';
+  	    var split = options.split || /(?=[A-Z])/;
 
-	    output[prop] = value;
-	    return output;
-	  }, {});
-	}
+  	    return string.split(split).join(separator);
+  	  };
 
-	/**
-	 * Converts a CSS class list into a plain Javascript object.
-	 * @param {Array<String>} classes The class list to convert.
-	 * @returns {Object}
-	 */
-	function classToObject(classes) {
-	  return classes.split(/\s+/).reduce(function (output, className) {
-	    output[className] = true;
-	    return output;
-	  }, {});
-	}
+  	  var camelize = function(string) {
+  	    if (_isNumerical(string)) {
+  	      return string;
+  	    }
+  	    string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
+  	      return chr ? chr.toUpperCase() : '';
+  	    });
+  	    // Ensure 1st char is always lowercase
+  	    return string.substr(0, 1).toLowerCase() + string.substr(1);
+  	  };
 
-	/**
-	 * Converts a FontAwesome abstract element of an icon into a Vue VNode.
-	 * @param {AbstractElement | String} abstractElement The element to convert.
-	 * @param {Object} props The user-defined props.
-	 * @param {Object} attrs The user-defined native HTML attributes.
-	 * @returns {VNode}
-	 */
-	function convert(abstractElement) {
-	  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-	  var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  	  var pascalize = function(string) {
+  	    var camelized = camelize(string);
+  	    // Ensure 1st char is always uppercase
+  	    return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
+  	  };
 
-	  // If the abstract element is a string, we'll just return a string render function
-	  if (typeof abstractElement === 'string') {
-	    return abstractElement;
-	  }
+  	  var decamelize = function(string, options) {
+  	    return separateWords(string, options).toLowerCase();
+  	  };
 
-	  // Converting abstract element children into Vue VNodes
-	  var children = (abstractElement.children || []).map(function (child) {
-	    return convert(child);
-	  });
+  	  // Utilities
+  	  // Taken from Underscore.js
 
-	  // Converting abstract element attributes into valid Vue format
-	  var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
-	    var value = abstractElement.attributes[key];
+  	  var toString = Object.prototype.toString;
 
-	    switch (key) {
-	      case 'class':
-	        mixins.class = classToObject(value);
-	        break;
-	      case 'style':
-	        mixins.style = styleToObject(value);
-	        break;
-	      default:
-	        mixins.attrs[key] = value;
-	    }
+  	  var _isFunction = function(obj) {
+  	    return typeof(obj) === 'function';
+  	  };
+  	  var _isObject = function(obj) {
+  	    return obj === Object(obj);
+  	  };
+  	  var _isArray = function(obj) {
+  	    return toString.call(obj) == '[object Array]';
+  	  };
+  	  var _isDate = function(obj) {
+  	    return toString.call(obj) == '[object Date]';
+  	  };
+  	  var _isRegExp = function(obj) {
+  	    return toString.call(obj) == '[object RegExp]';
+  	  };
+  	  var _isBoolean = function(obj) {
+  	    return toString.call(obj) == '[object Boolean]';
+  	  };
 
-	    return mixins;
-	  }, {
-	    attrs: {},
-	    class: {},
-	    style: {}
-	  });
+  	  // Performant way to determine if obj coerces to a number
+  	  var _isNumerical = function(obj) {
+  	    obj = obj - 0;
+  	    return obj === obj;
+  	  };
 
-	  // Now, we'll return the VNode
+  	  // Sets up function which handles processing keys
+  	  // allowing the convert function to be modified by a callback
+  	  var _processor = function(convert, options) {
+  	    var callback = options && 'process' in options ? options.process : options;
 
-	  var _attrs$class = attrs.class,
-	      _attrs$style = attrs.style,
-	      aStyle = _attrs$style === undefined ? {} : _attrs$style,
-	      otherAttrs = objectWithoutProperties(attrs, ['class', 'style']);
+  	    if(typeof(callback) !== 'function') {
+  	      return convert;
+  	    }
 
-	  return vue.h(abstractElement.tag, _extends({}, props, {
-	    class: mixins.class,
-	    style: _extends({}, mixins.style, aStyle)
-	  }, mixins.attrs, otherAttrs), children);
-	}
+  	    return function(string, options) {
+  	      return callback(string, convert, options);
+  	    }
+  	  };
 
-	var PRODUCTION = false;
+  	  var humps = {
+  	    camelize: camelize,
+  	    decamelize: decamelize,
+  	    pascalize: pascalize,
+  	    depascalize: decamelize,
+  	    camelizeKeys: function(object, options) {
+  	      return _processKeys(_processor(camelize, options), object);
+  	    },
+  	    decamelizeKeys: function(object, options) {
+  	      return _processKeys(_processor(decamelize, options), object, options);
+  	    },
+  	    pascalizeKeys: function(object, options) {
+  	      return _processKeys(_processor(pascalize, options), object);
+  	    },
+  	    depascalizeKeys: function () {
+  	      return this.decamelizeKeys.apply(this, arguments);
+  	    }
+  	  };
 
-	try {
-	  PRODUCTION = process.env.NODE_ENV === 'production';
-	} catch (e) {}
+  	  if (module.exports) {
+  	    module.exports = humps;
+  	  } else {
+  	    global.humps = humps;
+  	  }
 
-	function log () {
-	  if (!PRODUCTION && console && typeof console.error === 'function') {
-	    var _console;
+  	})(commonjsGlobal);
+  } (humps$1));
 
-	    (_console = console).error.apply(_console, arguments);
-	  }
-	}
+  var humps = humps$1.exports;
 
-	function objectWithKey(key, value) {
-	  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? defineProperty({}, key, value) : {};
-	}
+  var _excluded = ["class", "style"];
+  /**
+   * Converts a CSS style into a plain Javascript object.
+   * @param {String} style The style to converts into a plain Javascript object.
+   * @returns {Object}
+   */
 
-	function classList(props) {
-	  var _classes;
+  function styleToObject(style) {
+    return style.split(';').map(function (s) {
+      return s.trim();
+    }).filter(function (s) {
+      return s;
+    }).reduce(function (output, pair) {
+      var idx = pair.indexOf(':');
+      var prop = humps.camelize(pair.slice(0, idx));
+      var value = pair.slice(idx + 1).trim();
+      output[prop] = value;
+      return output;
+    }, {});
+  }
+  /**
+   * Converts a CSS class list into a plain Javascript object.
+   * @param {Array<String>} classes The class list to convert.
+   * @returns {Object}
+   */
 
-	  var classes = (_classes = {
-	    'fa-spin': props.spin,
-	    'fa-pulse': props.pulse,
-	    'fa-fw': props.fixedWidth,
-	    'fa-border': props.border,
-	    'fa-li': props.listItem,
-	    'fa-inverse': props.inverse,
-	    'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
-	    'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
-	  }, defineProperty(_classes, 'fa-' + props.size, props.size !== null), defineProperty(_classes, 'fa-rotate-' + props.rotation, props.rotation !== null), defineProperty(_classes, 'fa-pull-' + props.pull, props.pull !== null), defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes);
 
-	  return Object.keys(classes).map(function (key) {
-	    return classes[key] ? key : null;
-	  }).filter(function (key) {
-	    return key;
-	  });
-	}
+  function classToObject(classes) {
+    return classes.split(/\s+/).reduce(function (output, className) {
+      output[className] = true;
+      return output;
+    }, {});
+  }
+  /**
+   * Converts a FontAwesome abstract element of an icon into a Vue VNode.
+   * @param {AbstractElement | String} abstractElement The element to convert.
+   * @param {Object} props The user-defined props.
+   * @param {Object} attrs The user-defined native HTML attributes.
+   * @returns {VNode}
+   */
 
-	function normalizeIconArgs(icon) {
-	  if (icon === null) {
-	    return null;
-	  }
 
-	  if ((typeof icon === 'undefined' ? 'undefined' : _typeof(icon)) === 'object' && icon.prefix && icon.iconName) {
-	    return icon;
-	  }
+  function convert(abstractElement) {
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-	  if (Array.isArray(icon) && icon.length === 2) {
-	    return { prefix: icon[0], iconName: icon[1] };
-	  }
+    // If the abstract element is a string, we'll just return a string render function
+    if (typeof abstractElement === 'string') {
+      return abstractElement;
+    } // Converting abstract element children into Vue VNodes
 
-	  if (typeof icon === 'string') {
-	    return { prefix: 'fas', iconName: icon };
-	  }
-	}
 
-	var FontAwesomeIcon = vue.defineComponent({
-	  name: 'FontAwesomeIcon',
+    var children = (abstractElement.children || []).map(function (child) {
+      return convert(child);
+    }); // Converting abstract element attributes into valid Vue format
 
-	  props: {
-	    border: {
-	      type: Boolean,
-	      default: false
-	    },
-	    fixedWidth: {
-	      type: Boolean,
-	      default: false
-	    },
-	    flip: {
-	      type: String,
-	      default: null,
-	      validator: function validator(value) {
-	        return ['horizontal', 'vertical', 'both'].indexOf(value) > -1;
-	      }
-	    },
-	    icon: {
-	      type: [Object, Array, String],
-	      required: true
-	    },
-	    mask: {
-	      type: [Object, Array, String],
-	      default: null
-	    },
-	    listItem: {
-	      type: Boolean,
-	      default: false
-	    },
-	    pull: {
-	      type: String,
-	      default: null,
-	      validator: function validator(value) {
-	        return ['right', 'left'].indexOf(value) > -1;
-	      }
-	    },
-	    pulse: {
-	      type: Boolean,
-	      default: false
-	    },
-	    rotation: {
-	      type: [String, Number],
-	      default: null,
-	      validator: function validator(value) {
-	        return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
-	      }
-	    },
-	    swapOpacity: {
-	      type: Boolean,
-	      default: false
-	    },
-	    size: {
-	      type: String,
-	      default: null,
-	      validator: function validator(value) {
-	        return ['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
-	      }
-	    },
-	    spin: {
-	      type: Boolean,
-	      default: false
-	    },
-	    transform: {
-	      type: [String, Object],
-	      default: null
-	    },
-	    symbol: {
-	      type: [Boolean, String],
-	      default: false
-	    },
-	    title: {
-	      type: String,
-	      default: null
-	    },
-	    inverse: {
-	      type: Boolean,
-	      default: false
-	    }
-	  },
+    var mixins = Object.keys(abstractElement.attributes || {}).reduce(function (mixins, key) {
+      var value = abstractElement.attributes[key];
 
-	  setup: function setup(props, _ref) {
-	    var attrs = _ref.attrs;
+      switch (key) {
+        case 'class':
+          mixins.class = classToObject(value);
+          break;
 
-	    var icon = vue.computed(function () {
-	      return normalizeIconArgs(props.icon);
-	    });
-	    var classes = vue.computed(function () {
-	      return objectWithKey('classes', classList(props));
-	    });
-	    var transform = vue.computed(function () {
-	      return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
-	    });
-	    var mask = vue.computed(function () {
-	      return objectWithKey('mask', normalizeIconArgs(props.mask));
-	    });
+        case 'style':
+          mixins.style = styleToObject(value);
+          break;
 
-	    var renderedIcon = vue.computed(function () {
-	      return fontawesomeSvgCore.icon(icon.value, _extends({}, classes.value, transform.value, mask.value, {
-	        symbol: props.symbol,
-	        title: props.title
-	      }));
-	    });
+        default:
+          mixins.attrs[key] = value;
+      }
 
-	    vue.watch(renderedIcon, function (value) {
-	      if (!value) {
-	        return log('Could not find one or more icon(s)', icon.value, mask.value);
-	      }
-	    }, { immediate: true });
+      return mixins;
+    }, {
+      attrs: {},
+      class: {},
+      style: {}
+    }); // Now, we'll return the VNode
 
-	    var vnode = vue.computed(function () {
-	      return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null;
-	    });
-	    return function () {
-	      return vnode.value;
-	    };
-	  }
-	});
+    attrs.class;
+        var _attrs$style = attrs.style,
+        aStyle = _attrs$style === void 0 ? {} : _attrs$style,
+        otherAttrs = _objectWithoutProperties(attrs, _excluded);
 
-	var FontAwesomeLayers = vue.defineComponent({
-	  name: 'FontAwesomeLayers',
+    return vue.h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, {
+      class: mixins.class,
+      style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
+    }, mixins.attrs), otherAttrs), children);
+  }
 
-	  props: {
-	    fixedWidth: {
-	      type: Boolean,
-	      default: false
-	    }
-	  },
+  var PRODUCTION = false;
 
-	  setup: function setup(props, _ref) {
-	    var slots = _ref.slots;
-	    var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
+  try {
+    PRODUCTION = process.env.NODE_ENV === 'production';
+  } catch (e) {}
 
+  function log () {
+    if (!PRODUCTION && console && typeof console.error === 'function') {
+      var _console;
 
-	    var className = vue.computed(function () {
-	      return [familyPrefix + '-layers'].concat(toConsumableArray(props.fixedWidth ? [familyPrefix + '-fw'] : []));
-	    });
+      (_console = console).error.apply(_console, arguments);
+    }
+  }
 
-	    return function () {
-	      return vue.h('div', { class: className.value }, slots.default ? slots.default() : []);
-	    };
-	  }
-	});
+  function objectWithKey(key, value) {
+    return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
+  }
+  function classList(props) {
+    var _classes;
 
-	var FontAwesomeLayersText = vue.defineComponent({
-	  name: 'FontAwesomeLayersText',
+    var classes = (_classes = {
+      'fa-spin': props.spin,
+      'fa-pulse': props.pulse,
+      'fa-fw': props.fixedWidth,
+      'fa-border': props.border,
+      'fa-li': props.listItem,
+      'fa-inverse': props.inverse,
+      'fa-flip': props.flip === true,
+      'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
+      'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
+    }, _defineProperty(_classes, "fa-".concat(props.size), props.size !== null), _defineProperty(_classes, "fa-rotate-".concat(props.rotation), props.rotation !== null), _defineProperty(_classes, "fa-pull-".concat(props.pull), props.pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _defineProperty(_classes, 'fa-bounce', props.bounce), _defineProperty(_classes, 'fa-shake', props.shake), _defineProperty(_classes, 'fa-beat', props.beat), _defineProperty(_classes, 'fa-fade', props.fade), _defineProperty(_classes, 'fa-beat-fade', props.beatFade), _defineProperty(_classes, 'fa-flash', props.flash), _defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), _defineProperty(_classes, 'fa-spin-reverse', props.spinReverse), _classes);
+    return Object.keys(classes).map(function (key) {
+      return classes[key] ? key : null;
+    }).filter(function (key) {
+      return key;
+    });
+  }
 
-	  props: {
-	    value: {
-	      type: [String, Number],
-	      default: ''
-	    },
-	    transform: {
-	      type: [String, Object],
-	      default: null
-	    },
-	    counter: {
-	      type: Boolean,
-	      default: false
-	    },
-	    position: {
-	      type: String,
-	      default: null,
-	      validator: function validator(value) {
-	        return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
-	      }
-	    }
-	  },
+  function normalizeIconArgs(icon) {
+    if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+      return icon;
+    }
 
-	  setup: function setup(props, _ref) {
-	    var attrs = _ref.attrs;
-	    var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
+    if (fontawesomeSvgCore.parse.icon) {
+      return fontawesomeSvgCore.parse.icon(icon);
+    }
 
+    if (icon === null) {
+      return null;
+    }
 
-	    var classes = vue.computed(function () {
-	      return objectWithKey('classes', [].concat(toConsumableArray(props.counter ? [familyPrefix + '-layers-counter'] : []), toConsumableArray(props.position ? [familyPrefix + '-layers-' + props.position] : [])));
-	    });
-	    var transform = vue.computed(function () {
-	      return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
-	    });
-	    var abstractElement = vue.computed(function () {
-	      var _text = fontawesomeSvgCore.text(props.value.toString(), _extends({}, transform.value, classes.value)),
-	          abstract = _text.abstract;
+    if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
+      return icon;
+    }
 
-	      if (props.counter) {
-	        abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
-	      }
-	      return abstract[0];
-	    });
+    if (Array.isArray(icon) && icon.length === 2) {
+      return {
+        prefix: icon[0],
+        iconName: icon[1]
+      };
+    }
 
-	    var vnode = vue.computed(function () {
-	      return convert(abstractElement.value, {}, attrs);
-	    });
-	    return function () {
-	      return vnode.value;
-	    };
-	  }
-	});
+    if (typeof icon === 'string') {
+      return {
+        prefix: 'fas',
+        iconName: icon
+      };
+    }
+  }
 
-	exports.FontAwesomeIcon = FontAwesomeIcon;
-	exports.FontAwesomeLayers = FontAwesomeLayers;
-	exports.FontAwesomeLayersText = FontAwesomeLayersText;
+  var FontAwesomeIcon = vue.defineComponent({
+    name: 'FontAwesomeIcon',
+    props: {
+      border: {
+        type: Boolean,
+        default: false
+      },
+      fixedWidth: {
+        type: Boolean,
+        default: false
+      },
+      flip: {
+        type: [Boolean, String],
+        default: false,
+        validator: function validator(value) {
+          return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1;
+        }
+      },
+      icon: {
+        type: [Object, Array, String],
+        required: true
+      },
+      mask: {
+        type: [Object, Array, String],
+        default: null
+      },
+      listItem: {
+        type: Boolean,
+        default: false
+      },
+      pull: {
+        type: String,
+        default: null,
+        validator: function validator(value) {
+          return ['right', 'left'].indexOf(value) > -1;
+        }
+      },
+      pulse: {
+        type: Boolean,
+        default: false
+      },
+      rotation: {
+        type: [String, Number],
+        default: null,
+        validator: function validator(value) {
+          return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
+        }
+      },
+      swapOpacity: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        default: null,
+        validator: function validator(value) {
+          return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
+        }
+      },
+      spin: {
+        type: Boolean,
+        default: false
+      },
+      transform: {
+        type: [String, Object],
+        default: null
+      },
+      symbol: {
+        type: [Boolean, String],
+        default: false
+      },
+      title: {
+        type: String,
+        default: null
+      },
+      inverse: {
+        type: Boolean,
+        default: false
+      },
+      bounce: {
+        type: Boolean,
+        default: false
+      },
+      shake: {
+        type: Boolean,
+        default: false
+      },
+      beat: {
+        type: Boolean,
+        default: false
+      },
+      fade: {
+        type: Boolean,
+        default: false
+      },
+      beatFade: {
+        type: Boolean,
+        default: false
+      },
+      flash: {
+        type: Boolean,
+        default: false
+      },
+      spinPulse: {
+        type: Boolean,
+        default: false
+      },
+      spinReverse: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup: function setup(props, _ref) {
+      var attrs = _ref.attrs;
+      var icon = vue.computed(function () {
+        return normalizeIconArgs(props.icon);
+      });
+      var classes = vue.computed(function () {
+        return objectWithKey('classes', classList(props));
+      });
+      var transform = vue.computed(function () {
+        return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
+      });
+      var mask = vue.computed(function () {
+        return objectWithKey('mask', normalizeIconArgs(props.mask));
+      });
+      var renderedIcon = vue.computed(function () {
+        return fontawesomeSvgCore.icon(icon.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
+          symbol: props.symbol,
+          title: props.title
+        }));
+      });
+      vue.watch(renderedIcon, function (value) {
+        if (!value) {
+          return log('Could not find one or more icon(s)', icon.value, mask.value);
+        }
+      }, {
+        immediate: true
+      });
+      var vnode = vue.computed(function () {
+        return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null;
+      });
+      return function () {
+        return vnode.value;
+      };
+    }
+  });
 
-	Object.defineProperty(exports, '__esModule', { value: true });
+  var FontAwesomeLayers = vue.defineComponent({
+    name: 'FontAwesomeLayers',
+    props: {
+      fixedWidth: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+      var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
+      var className = vue.computed(function () {
+        return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : []));
+      });
+      return function () {
+        return vue.h('div', {
+          class: className.value
+        }, slots.default ? slots.default() : []);
+      };
+    }
+  });
 
-})));
+  var FontAwesomeLayersText = vue.defineComponent({
+    name: 'FontAwesomeLayersText',
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      transform: {
+        type: [String, Object],
+        default: null
+      },
+      counter: {
+        type: Boolean,
+        default: false
+      },
+      position: {
+        type: String,
+        default: null,
+        validator: function validator(value) {
+          return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
+        }
+      }
+    },
+    setup: function setup(props, _ref) {
+      var attrs = _ref.attrs;
+      var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
+      var classes = vue.computed(function () {
+        return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : [])));
+      });
+      var transform = vue.computed(function () {
+        return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
+      });
+      var abstractElement = vue.computed(function () {
+        var _text = fontawesomeSvgCore.text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
+            abstract = _text.abstract;
+
+        if (props.counter) {
+          abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
+        }
+
+        return abstract[0];
+      });
+      var vnode = vue.computed(function () {
+        return convert(abstractElement.value, {}, attrs);
+      });
+      return function () {
+        return vnode.value;
+      };
+    }
+  });
+
+  exports.FontAwesomeIcon = FontAwesomeIcon;
+  exports.FontAwesomeLayers = FontAwesomeLayers;
+  exports.FontAwesomeLayersText = FontAwesomeLayersText;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package.json

 {
   "name": "@fortawesome/vue-fontawesome",
-  "description": "Official Vue component for Font Awesome 5",
-  "version": "3.0.0-5",
+  "description": "Official Vue component for Font Awesome 6",
+  "version": "3.0.0",
   "main": "index.js",
+  "files": [
+    "README.md",
+    "LICENSE.txt",
+    "UPGRADING.md",
+    "CHANGELOG.md",
+    "index.d.ts",
+    "index.es.js",
+    "index.js",
+    "src/components/**.js",
+    "src/**.js"
+  ],
+  "jest": {
+    "verbose": true
+  },
   "module": "index.es.js",
@@ -31,3 +45,5 @@ "jsnext:main": "index.es.js",
     "dist": "cross-env NODE_ENV=production npm run build",
-    "test": "jest --silent",
+    "test": "npm run test.5 && npm run test.6",
+    "test.5": "npm --no-save install @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x && jest --silent",
+    "test.6": "npm --no-save install @fortawesome/fontawesome-svg-core@6.x @fortawesome/free-solid-svg-icons@6.x && jest --silent",
     "prepack": "npm run dist"
@@ -42,25 +58,31 @@ },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
+    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
     "vue": ">= 3.0.0 < 4"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@vue/test-utils": "^2.0.0-beta.2",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "concurrently": "^4.1.0",
-    "cross-env": "^5.1.1",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-external-helpers": "^7.17.12",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-json-strings": "^7.17.12",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/preset-env": "^7.18.2",
+    "@fortawesome/fontawesome-svg-core": "~6",
+    "@fortawesome/free-solid-svg-icons": "^6",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^28.1.1",
+    "concurrently": "^7.2.1",
+    "cross-env": "^7.0.3",
     "humps": "^2.0.1",
-    "husky": "^1.1.2",
-    "jest": "^23.6.0",
-    "lint-staged": "^8.1.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "lint-staged": "^13.0.0",
     "markdown-toc": "^1.2.0",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "vue": "3.0.0"
+    "rollup": "^2.75.6",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@vue/test-utils": "^2.0.0-beta.2",
+    "vue": "^3"
   },
@@ -67,0 +89,0 @@ "dependencies": {},

README.md

@@ -217,3 +217,3 @@ <a href="https://fontawesome.com">
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-regular-svg-icons'
@@ -232,3 +232,3 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-light-svg-icons'
@@ -247,3 +247,3 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-duotone-svg-icons'
@@ -304,4 +304,4 @@
 
-<font-awesome-icon :icon="['fas', 'spinner']" /> # Same as above
-<font-awesome-icon :icon="['fas', 'align-left']" /> # Same as above
+<font-awesome-icon :icon="['fas', 'spinner']" /> // Same as above
+<font-awesome-icon :icon="['fas', 'align-left']" /> // Same as above
 ```
@@ -322,3 +322,3 @@
 ```javascript
-<font-awesome-icon icon="address-card" />  # import { faAddressCard } from '@fortawesome/free-solid-svg-icons'
+<font-awesome-icon icon="address-card" />  // import { faAddressCard } from '@fortawesome/free-solid-svg-icons'
 ```
@@ -325,0 +325,0 @@

src/components/FontAwesomeIcon.js

@@ -8,2 +8,10 @@ import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core'
 function normalizeIconArgs (icon) {
+  if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
+    return icon
+  }
+
+  if (faParse.icon) {
+    return faParse.icon(icon)
+  }
+
   if (icon === null) {
@@ -39,5 +47,5 @@ return null
     flip: {
-      type: String,
-      default: null,
-      validator: (value) => ['horizontal', 'vertical', 'both'].indexOf(value) > -1
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1
     },
@@ -77,3 +85,3 @@ icon: {
       default: null,
-      validator: (value) => ['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1
+      validator: (value) => ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1
     },
@@ -99,3 +107,35 @@ spin: {
       default: false
-    }
+    },
+    bounce: {
+      type: Boolean,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      default: false
+    },
+    beat: {
+      type: Boolean,
+      default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
+    },
+    beatFade: {
+      type: Boolean,
+      default: false
+    },
+    flash: {
+      type: Boolean,
+      default: false
+    },
+    spinPulse: {
+      type: Boolean,
+      default: false
+    },
+    spinReverse: {
+      type: Boolean,
+      default: false
+    },
   },
@@ -102,0 +142,0 @@

src/utils.js

@@ -13,2 +13,3 @@ export function objectWithKey (key, value) {
     'fa-inverse': props.inverse,
+    'fa-flip': props.flip === true,
     'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
@@ -19,3 +20,11 @@ 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
     [`fa-pull-${props.pull}`]: props.pull !== null,
-    'fa-swap-opacity': props.swapOpacity
+    'fa-swap-opacity': props.swapOpacity,
+    'fa-bounce': props.bounce,
+    'fa-shake': props.shake,
+    'fa-beat': props.beat,
+    'fa-fade': props.fade,
+    'fa-beat-fade': props.beatFade,
+    'fa-flash': props.flash,
+    'fa-spin-pulse': props.spinPulse,
+    'fa-spin-reverse': props.spinReverse
   }
@@ -22,0 +31,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of medium maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

86814

decreased by-90.78%

Dev dependency count

25

increased by31.58%

Number of package files

15

decreased by-65.91%

Lines of code

1532

decreased by-93.13%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes