@fortawesome/vue-fontawesome 3.0.8 → 3.1.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.1.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.1) - 2025-07-24
+
+### Changed
+
+- Removed version checks related to `props.fixedWidth`, `iconProps.title`, and `iconProps.title`.
+
+- The use of `require` to retrieve the version from `@fortawesome/fontawesome-svg-core` for version checks has been
+  removed to help ensure compatibility with ESM builds.
+
+---
+
+## [3.1.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.0) - 2025-07-22
+
+### Changed
+
+- Font Awesome Pro+ icons are now available with an active Pro+ subscription.
+
+- Added `widthAuto` prop
+
+- Added `rotateBy` prop
+
+- Deprecated `fa-fw` prop
+
+---
+
 ## [3.0.8](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.8) - 2024-05-21
 
 ### Changed

package/index.d.ts

@@ -12,6 +12,7 @@ interface FontAwesomeIconProps {
   pull?: 'right' | 'left'
   pulse?: boolean
   rotation?: 90 | 180 | 270 | '90' | '180' | '270'
+  rotateBy?: boolean
   swapOpacity?: boolean
   size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
   spin?: boolean
@@ -27,6 +28,7 @@ interface FontAwesomeIconProps {
   beatFade?: boolean
   spinPulse?: boolean
   spinReverse?: boolean
+  widthAuto?: boolean
 }
 
 interface FontAwesomeLayersProps {

package/index.es.js

@@ -1,6 +1,28 @@
-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';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+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.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -22,6 +44,29 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -45,70 +90,36 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  for (var key in source) {
-    if (Object.prototype.hasOwnProperty.call(source, key)) {
-      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];
-    }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return target;
-}
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-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);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
+
+function objectWithKey(key, value) {
+  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
 }
-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.");
+function classList(props) {
+  var _classes;
+  var classes = (_classes = {
+    'fa-spin': props.spin,
+    'fa-pulse': props.pulse,
+    // the fixedWidth property has been deprecated as of version 7.0.0
+    '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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), 'fa-rotate-by', props.rotateBy), "fa-pull-".concat(props.pull), props.pull !== null), '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), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-flash', props.flash), 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse), 'fa-width-auto', props.widthAuto));
+  return Object.keys(classes).map(function (key) {
+    return classes[key] ? key : null;
+  }).filter(function (key) {
+    return key;
+  });
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -344,29 +355,6 @@ function log () {
   }
 }
 
-function objectWithKey(key, value) {
-  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
-}
-function classList(props) {
-  var _classes;
-  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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), "fa-pull-".concat(props.pull), props.pull !== null), '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), _defineProperty(_defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse));
-  return Object.keys(classes).map(function (key) {
-    return classes[key] ? key : null;
-  }).filter(function (key) {
-    return key;
-  });
-}
-
 function normalizeIconArgs(icon) {
   if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
     return icon;
@@ -400,6 +388,7 @@ var FontAwesomeIcon = defineComponent({
       type: Boolean,
       default: false
     },
+    // the fixedWidth property has been deprecated as of version 7
     fixedWidth: {
       type: Boolean,
       default: false
@@ -445,6 +434,11 @@ var FontAwesomeIcon = defineComponent({
         return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
       }
     },
+    // the rotateBy property is only supported in version 7.0.0 and later
+    rotateBy: {
+      type: Boolean,
+      default: false
+    },
     swapOpacity: {
       type: Boolean,
       default: false
@@ -511,6 +505,11 @@ var FontAwesomeIcon = defineComponent({
     spinReverse: {
       type: Boolean,
       default: false
+    },
+    // the widthAuto property is only supported in version 7.0.0 and later
+    widthAuto: {
+      type: Boolean,
+      default: false
     }
   },
   setup: function setup(props, _ref) {
@@ -528,12 +527,15 @@ var FontAwesomeIcon = defineComponent({
       return objectWithKey('mask', normalizeIconArgs(props.mask));
     });
     var renderedIcon = computed(function () {
-      return icon(icon$1.value, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
+      var iconProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
         symbol: props.symbol,
-        title: props.title,
-        titleId: props.titleId,
         maskId: props.maskId
-      }));
+      });
+
+      // the title attribute will only apply to versions prior to version 7.0.0
+      iconProps.title = props.title;
+      iconProps.titleId = props.titleId;
+      return icon(icon$1.value, iconProps);
     });
     watch(renderedIcon, function (value) {
       if (!value) {

package/index.js

@@ -1,9 +1,31 @@
 (function (global, factory) {
-  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';
-
+  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) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vue-fontawesome"] = {}, global.vue, global.FontAwesome));
+})(this, (function (exports, vue, fontawesomeSvgCore) { 'use strict';
+
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+  function _arrayWithoutHoles(r) {
+    if (Array.isArray(r)) return _arrayLikeToArray(r);
+  }
+  function _defineProperty(e, r, t) {
+    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }) : e[r] = t, e;
+  }
+  function _iterableToArray(r) {
+    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+  }
+  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.");
+  }
   function ownKeys(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -25,6 +47,29 @@
     }
     return e;
   }
+  function _objectWithoutProperties(e, t) {
+    if (null == e) return {};
+    var o,
+      r,
+      i = _objectWithoutPropertiesLoose(e, t);
+    if (Object.getOwnPropertySymbols) {
+      var n = Object.getOwnPropertySymbols(e);
+      for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    }
+    return i;
+  }
+  function _objectWithoutPropertiesLoose(r, e) {
+    if (null == r) return {};
+    var t = {};
+    for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+      if (-1 !== e.indexOf(n)) continue;
+      t[n] = r[n];
+    }
+    return t;
+  }
+  function _toConsumableArray(r) {
+    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+  }
   function _toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -48,70 +93,36 @@
       return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
     }, _typeof(o);
   }
-  function _defineProperty(obj, key, value) {
-    key = _toPropertyKey(key);
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
     }
-    return obj;
   }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        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];
-      }
-    }
-    return target;
-  }
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-  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);
-  }
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-    return arr2;
+
+  function objectWithKey(key, value) {
+    return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
   }
-  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.");
+  function classList(props) {
+    var _classes;
+    var classes = (_classes = {
+      'fa-spin': props.spin,
+      'fa-pulse': props.pulse,
+      // the fixedWidth property has been deprecated as of version 7.0.0
+      '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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), 'fa-rotate-by', props.rotateBy), "fa-pull-".concat(props.pull), props.pull !== null), '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), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-flash', props.flash), 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse), 'fa-width-auto', props.widthAuto));
+    return Object.keys(classes).map(function (key) {
+      return classes[key] ? key : null;
+    }).filter(function (key) {
+      return key;
+    });
   }
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -347,29 +358,6 @@
     }
   }
 
-  function objectWithKey(key, value) {
-    return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
-  }
-  function classList(props) {
-    var _classes;
-    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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), "fa-pull-".concat(props.pull), props.pull !== null), '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), _defineProperty(_defineProperty(_classes, 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse));
-    return Object.keys(classes).map(function (key) {
-      return classes[key] ? key : null;
-    }).filter(function (key) {
-      return key;
-    });
-  }
-
   function normalizeIconArgs(icon) {
     if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
       return icon;
@@ -403,6 +391,7 @@
         type: Boolean,
         default: false
       },
+      // the fixedWidth property has been deprecated as of version 7
       fixedWidth: {
         type: Boolean,
         default: false
@@ -448,6 +437,11 @@
           return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
         }
       },
+      // the rotateBy property is only supported in version 7.0.0 and later
+      rotateBy: {
+        type: Boolean,
+        default: false
+      },
       swapOpacity: {
         type: Boolean,
         default: false
@@ -514,6 +508,11 @@
       spinReverse: {
         type: Boolean,
         default: false
+      },
+      // the widthAuto property is only supported in version 7.0.0 and later
+      widthAuto: {
+        type: Boolean,
+        default: false
       }
     },
     setup: function setup(props, _ref) {
@@ -531,12 +530,15 @@
         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), {}, {
+        var iconProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
           symbol: props.symbol,
-          title: props.title,
-          titleId: props.titleId,
           maskId: props.maskId
-        }));
+        });
+
+        // the title attribute will only apply to versions prior to version 7.0.0
+        iconProps.title = props.title;
+        iconProps.titleId = props.titleId;
+        return fontawesomeSvgCore.icon(icon.value, iconProps);
       });
       vue.watch(renderedIcon, function (value) {
         if (!value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/vue-fontawesome",
-  "description": "Official Vue component for Font Awesome 6",
-  "version": "3.0.8",
+  "description": "Official Vue component for Font Awesome 7",
+  "version": "3.1.1",
   "main": "index.js",
   "files": [
     "README.md",
@@ -65,7 +65,7 @@
     ]
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+    "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
     "vue": ">= 3.0.0 < 4"
   },
   "devDependencies": {
@@ -76,12 +76,13 @@
     "@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",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@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/test-utils": "^2.4.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^28.1.1",
     "concurrently": "^7.2.1",
@@ -96,11 +97,12 @@
     "npm": "^10.2.2",
     "prettier": "^3.0.3",
     "rollup": "^2.75.6",
-    "vue": "^3"
+    "vue": "^3.0.0"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "dependencies": {}
 }

package/src/components/FontAwesomeIcon.js

@@ -1,8 +1,9 @@
-import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core'
-import { defineComponent, computed, watch } from 'vue'
+import { classList, objectWithKey } from '../utils'
+import { computed, defineComponent, watch } from 'vue'
+import { icon as faIcon, parse as faParse } from '@fortawesome/fontawesome-svg-core'
+
 import convert from '../converter'
 import log from '../logger'
-import { objectWithKey, classList } from '../utils'
 
 function normalizeIconArgs(icon) {
   if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
@@ -38,6 +39,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    // the fixedWidth property has been deprecated as of version 7
     fixedWidth: {
       type: Boolean,
       default: false
@@ -77,6 +79,11 @@ export default defineComponent({
       default: null,
       validator: (value) => [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1
     },
+    // the rotateBy property is only supported in version 7.0.0 and later
+    rotateBy: {
+      type: Boolean,
+      default: false
+    },
     swapOpacity: {
       type: Boolean,
       default: false
@@ -141,6 +148,11 @@ export default defineComponent({
     spinReverse: {
       type: Boolean,
       default: false
+    },
+    // the widthAuto property is only supported in version 7.0.0 and later
+    widthAuto: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -150,17 +162,21 @@ export default defineComponent({
     const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? faParse.transform(props.transform) : props.transform))
     const mask = computed(() => objectWithKey('mask', normalizeIconArgs(props.mask)))
 
-    const renderedIcon = computed(() =>
-      faIcon(icon.value, {
+    const renderedIcon = computed(() => {
+      const iconProps = {
         ...classes.value,
         ...transform.value,
         ...mask.value,
         symbol: props.symbol,
-        title: props.title,
-        titleId: props.titleId,
         maskId: props.maskId
-      })
-    )
+      }
+
+      // the title attribute will only apply to versions prior to version 7.0.0
+      iconProps.title = props.title
+      iconProps.titleId = props.titleId
+
+      return faIcon(icon.value, iconProps)
+    })
 
     watch(
       renderedIcon,

package/src/components/FontAwesomeLayers.js

@@ -1,5 +1,5 @@
+import { computed, defineComponent, h } from 'vue'
 import { config } from '@fortawesome/fontawesome-svg-core'
-import { defineComponent, h, computed } from 'vue'
 
 export default defineComponent({
   name: 'FontAwesomeLayers',
@@ -11,13 +11,10 @@ export default defineComponent({
     }
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const { familyPrefix } = config
 
-    const className = computed(() => [
-      `${familyPrefix}-layers`,
-      ...(props.fixedWidth ? [`${familyPrefix}-fw`] : [])
-    ])
+    const className = computed(() => [`${familyPrefix}-layers`, ...(props.fixedWidth ? [`${familyPrefix}-fw`] : [])])
 
     return () => h('div', { class: className.value }, slots.default ? slots.default() : [])
   }

package/src/components/FontAwesomeLayersText.js

@@ -23,18 +23,19 @@ export default defineComponent({
       type: String,
       default: null,
       validator: (value) => ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1
-    },
+    }
   },
 
-  setup (props, { attrs }) {
+  setup(props, { attrs }) {
     const { familyPrefix } = config
 
-    const classes = computed(() => objectWithKey('classes', [
-      ...(props.counter ? [`${familyPrefix}-layers-counter`] : []),
-      ...(props.position ? [`${familyPrefix}-layers-${props.position}`] : [])
-    ]))
-    const transform = computed(() => objectWithKey('transform', 
-      typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform))
+    const classes = computed(() =>
+      objectWithKey('classes', [
+        ...(props.counter ? [`${familyPrefix}-layers-counter`] : []),
+        ...(props.position ? [`${familyPrefix}-layers-${props.position}`] : [])
+      ])
+    )
+    const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform))
     const abstractElement = computed(() => {
       const { abstract } = text(props.value.toString(), { ...transform.value, ...classes.value })
       if (props.counter) {

package/src/utils.js

@@ -1,11 +1,12 @@
-export function objectWithKey (key, value) {
-  return ((Array.isArray(value) && value.length > 0) || (!Array.isArray(value) && value)) ? {[key]: value} : {}
+export function objectWithKey(key, value) {
+  return (Array.isArray(value) && value.length > 0) || (!Array.isArray(value) && value) ? { [key]: value } : {}
 }
 
-export function classList (props) {
+export function classList(props) {
   let classes = {
     'fa-spin': props.spin,
     'fa-pulse': props.pulse,
+    // the fixedWidth property has been deprecated as of version 7.0.0
     'fa-fw': props.fixedWidth,
     'fa-border': props.border,
     'fa-li': props.listItem,
@@ -15,6 +16,7 @@ export function classList (props) {
     'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
     [`fa-${props.size}`]: props.size !== null,
     [`fa-rotate-${props.rotation}`]: props.rotation !== null,
+    'fa-rotate-by': props.rotateBy,
     [`fa-pull-${props.pull}`]: props.pull !== null,
     'fa-swap-opacity': props.swapOpacity,
     'fa-bounce': props.bounce,
@@ -24,12 +26,14 @@ export function classList (props) {
     'fa-beat-fade': props.beatFade,
     'fa-flash': props.flash,
     'fa-spin-pulse': props.spinPulse,
-    'fa-spin-reverse': props.spinReverse
+    'fa-spin-reverse': props.spinReverse,
+    // the widthAuto property is only supported in version 7.0.0 and later
+    'fa-width-auto': props.widthAuto
   }
 
   return Object.keys(classes)
-    .map(key => classes[key] ? key : null)
-    .filter(key => key)
+    .map((key) => (classes[key] ? key : null))
+    .filter((key) => key)
 }
 
 export function addStaticClass(to, what) {