@fortawesome/react-fontawesome - npm Package Compare versions

Comparing version 0.1.14 to 0.2.0

index.d.ts

 /// <reference types="react" />
-import { CSSProperties, SVGAttributes } from 'react'
+import { CSSProperties, SVGAttributes, RefAttributes } from 'react'
 import {
@@ -23,10 +23,17 @@ Transform,
 
-export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'> {
-  forwardedRef?: ((e: any) => void) | React.MutableRefObject<any> | null
+export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>, RefAttributes<SVGSVGElement> {
   icon: IconProp
   mask?: IconProp
+  maskId?: string
   className?: string
   color?: string
   spin?: boolean
+  spinPulse?: boolean
+  spinReverse?: boolean
   pulse?: boolean
+  beat?: boolean
+  fade?: boolean
+  beatFade?: boolean
+  bounce?: boolean
+  shake?: boolean
   border?: boolean
@@ -45,3 +52,4 @@ fixedWidth?: boolean
   title?: string;
+  titleId?: string;
   swapOpacity?: boolean;
 }

index.es.js

@@ -5,16 +5,38 @@ import { parse, icon } from '@fortawesome/fontawesome-svg-core';
 
-function _typeof(obj) {
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  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 _typeof(obj);
+  return keys;
 }
 
+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));
+    });
+  }
+
+  return target;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  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);
+}
+
 function _defineProperty(obj, key, value) {
@@ -35,36 +57,2 @@ if (key in obj) {
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -107,19 +95,32 @@ if (source == null) return {};
 function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 
 function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(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 _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -131,3 +132,11 @@
 
-  var spin = props.spin,
+  var beat = props.beat,
+      fade = props.fade,
+      beatFade = props.beatFade,
+      bounce = props.bounce,
+      shake = props.shake,
+      flash = props.flash,
+      spin = props.spin,
+      spinPulse = props.spinPulse,
+      spinReverse = props.spinReverse,
       pulse = props.pulse,
@@ -144,3 +153,11 @@ fixedWidth = props.fixedWidth,
   var classes = (_classes = {
+    'fa-beat': beat,
+    'fa-fade': fade,
+    'fa-beat-fade': beatFade,
+    'fa-bounce': bounce,
+    'fa-shake': shake,
+    'fa-flash': flash,
     'fa-spin': spin,
+    'fa-spin-reverse': spinReverse,
+    'fa-spin-pulse': spinPulse,
     'fa-pulse': pulse,
@@ -151,2 +168,3 @@ 'fa-fw': fixedWidth,
     'fa-li': listItem,
+    'fa-flip': flip === true,
     'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
@@ -187,2 +205,4 @@ 'fa-flip-vertical': flip === 'vertical' || flip === 'both'
 
+var _excluded = ["style"];
+
 function capitalize(val) {
@@ -247,8 +267,8 @@ return val.charAt(0).toUpperCase() + val.slice(1);
       existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
-      remaining = _objectWithoutProperties(extraProps, ["style"]);
+      remaining = _objectWithoutProperties(extraProps, _excluded);
 
-  mixins.attrs['style'] = _objectSpread2({}, mixins.attrs['style'], {}, existingStyle);
+  mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);
   /* eslint-enable */
 
-  return createElement.apply(void 0, [element.tag, _objectSpread2({}, mixins.attrs, {}, remaining)].concat(_toConsumableArray(children)));
+  return createElement.apply(void 0, [element.tag, _objectSpread2(_objectSpread2({}, mixins.attrs), remaining)].concat(_toConsumableArray(children)));
 }
@@ -271,2 +291,8 @@
 function normalizeIconArgs(icon) {
+  // this has everything that it needs to be rendered which means it was probably imported
+  // directly from an icon svg package
+  if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+    return icon;
+  }
+
   if (parse.icon) {
@@ -282,3 +308,3 @@ return parse.icon(icon);
 
-  if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
+  if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {
     return icon;
@@ -316,6 +342,3 @@ } // if it's an array with length of two
 
-function FontAwesomeIcon(_ref) {
-  var forwardedRef = _ref.forwardedRef,
-      props = _objectWithoutProperties(_ref, ["forwardedRef"]);
-
+var FontAwesomeIcon = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var iconArgs = props.icon,
@@ -326,3 +349,4 @@ maskArgs = props.mask,
       title = props.title,
-      titleId = props.titleId;
+      titleId = props.titleId,
+      maskId = props.maskId;
   var iconLookup = normalizeIconArgs(iconArgs);
@@ -332,6 +356,7 @@ var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));
   var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-  var renderedIcon = icon(iconLookup, _objectSpread2({}, classes, {}, transform, {}, mask, {
+  var renderedIcon = icon(iconLookup, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes), transform), mask), {}, {
     symbol: symbol,
     title: title,
-    titleId: titleId
+    titleId: titleId,
+    maskId: maskId
   }));
@@ -346,3 +371,3 @@
   var extraProps = {
-    ref: forwardedRef
+    ref: ref
   };
@@ -356,11 +381,17 @@ Object.keys(props).forEach(function (key) {
   return convertCurry(abstract[0], extraProps);
-}
+});
 FontAwesomeIcon.displayName = 'FontAwesomeIcon';
 FontAwesomeIcon.propTypes = {
+  beat: PropTypes.bool,
   border: PropTypes.bool,
+  beatFade: PropTypes.bool,
+  bounce: PropTypes.bool,
   className: PropTypes.string,
+  fade: PropTypes.bool,
+  flash: PropTypes.bool,
   mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+  maskId: PropTypes.string,
   fixedWidth: PropTypes.bool,
   inverse: PropTypes.bool,
-  flip: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  flip: PropTypes.oneOf([true, false, 'horizontal', 'vertical', 'both']),
   icon: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
@@ -371,6 +402,10 @@ listItem: PropTypes.bool,
   rotation: PropTypes.oneOf([0, 90, 180, 270]),
-  size: PropTypes.oneOf(['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
+  shake: PropTypes.bool,
+  size: PropTypes.oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
   spin: PropTypes.bool,
+  spinPulse: PropTypes.bool,
+  spinReverse: PropTypes.bool,
   symbol: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   title: PropTypes.string,
+  titleId: PropTypes.string,
   transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
@@ -383,5 +418,6 @@ swapOpacity: PropTypes.bool
   mask: null,
+  maskId: null,
   fixedWidth: false,
   inverse: false,
-  flip: null,
+  flip: false,
   icon: null,
@@ -394,4 +430,12 @@ listItem: false,
   spin: false,
+  spinPulse: false,
+  spinReverse: false,
+  beat: false,
+  fade: false,
+  beatFade: false,
+  bounce: false,
+  shake: false,
   symbol: false,
   title: '',
+  titleId: null,
   transform: null,
@@ -398,0 +442,0 @@ swapOpacity: false

index.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fortawesome/fontawesome-svg-core'), require('prop-types'), require('react')) :
   typeof define === 'function' && define.amd ? define(['exports', '@fortawesome/fontawesome-svg-core', 'prop-types', 'react'], factory) :
-  (global = global || self, factory(global['react-fontawesome'] = {}, global.FontAwesome, global.PropTypes, global.React));
-}(this, (function (exports, fontawesomeSvgCore, PropTypes, React) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["react-fontawesome"] = {}, global.FontAwesome, global.PropTypes, global.React));
+})(this, (function (exports, fontawesomeSvgCore, PropTypes, React) { 'use strict';
 
-  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
+  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    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 _typeof(obj);
+    return keys;
   }
 
+  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));
+      });
+    }
+
+    return target;
+  }
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    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);
+  }
+
   function _defineProperty(obj, key, value) {
@@ -39,36 +63,2 @@ if (key in obj) {
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
@@ -111,19 +101,32 @@ if (source == null) return {};
   function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
 
   function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-      return arr2;
-    }
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
 
   function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(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 _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -135,3 +138,11 @@
 
-    var spin = props.spin,
+    var beat = props.beat,
+        fade = props.fade,
+        beatFade = props.beatFade,
+        bounce = props.bounce,
+        shake = props.shake,
+        flash = props.flash,
+        spin = props.spin,
+        spinPulse = props.spinPulse,
+        spinReverse = props.spinReverse,
         pulse = props.pulse,
@@ -148,3 +159,11 @@ fixedWidth = props.fixedWidth,
     var classes = (_classes = {
+      'fa-beat': beat,
+      'fa-fade': fade,
+      'fa-beat-fade': beatFade,
+      'fa-bounce': bounce,
+      'fa-shake': shake,
+      'fa-flash': flash,
       'fa-spin': spin,
+      'fa-spin-reverse': spinReverse,
+      'fa-spin-pulse': spinPulse,
       'fa-pulse': pulse,
@@ -155,2 +174,3 @@ 'fa-fw': fixedWidth,
       'fa-li': listItem,
+      'fa-flip': flip === true,
       'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
@@ -191,2 +211,4 @@ 'fa-flip-vertical': flip === 'vertical' || flip === 'both'
 
+  var _excluded = ["style"];
+
   function capitalize(val) {
@@ -251,8 +273,8 @@ return val.charAt(0).toUpperCase() + val.slice(1);
         existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
-        remaining = _objectWithoutProperties(extraProps, ["style"]);
+        remaining = _objectWithoutProperties(extraProps, _excluded);
 
-    mixins.attrs['style'] = _objectSpread2({}, mixins.attrs['style'], {}, existingStyle);
+    mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);
     /* eslint-enable */
 
-    return createElement.apply(void 0, [element.tag, _objectSpread2({}, mixins.attrs, {}, remaining)].concat(_toConsumableArray(children)));
+    return createElement.apply(void 0, [element.tag, _objectSpread2(_objectSpread2({}, mixins.attrs), remaining)].concat(_toConsumableArray(children)));
   }
@@ -275,2 +297,8 @@
   function normalizeIconArgs(icon) {
+    // this has everything that it needs to be rendered which means it was probably imported
+    // directly from an icon svg package
+    if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+      return icon;
+    }
+
     if (fontawesomeSvgCore.parse.icon) {
@@ -286,3 +314,3 @@ return fontawesomeSvgCore.parse.icon(icon);
 
-    if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
+    if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {
       return icon;
@@ -320,6 +348,3 @@ } // if it's an array with length of two
 
-  function FontAwesomeIcon(_ref) {
-    var forwardedRef = _ref.forwardedRef,
-        props = _objectWithoutProperties(_ref, ["forwardedRef"]);
-
+  var FontAwesomeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var iconArgs = props.icon,
@@ -330,3 +355,4 @@ maskArgs = props.mask,
         title = props.title,
-        titleId = props.titleId;
+        titleId = props.titleId,
+        maskId = props.maskId;
     var iconLookup = normalizeIconArgs(iconArgs);
@@ -336,6 +362,7 @@ var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));
     var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-    var renderedIcon = fontawesomeSvgCore.icon(iconLookup, _objectSpread2({}, classes, {}, transform, {}, mask, {
+    var renderedIcon = fontawesomeSvgCore.icon(iconLookup, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes), transform), mask), {}, {
       symbol: symbol,
       title: title,
-      titleId: titleId
+      titleId: titleId,
+      maskId: maskId
     }));
@@ -350,3 +377,3 @@
     var extraProps = {
-      ref: forwardedRef
+      ref: ref
     };
@@ -360,22 +387,32 @@ Object.keys(props).forEach(function (key) {
     return convertCurry(abstract[0], extraProps);
-  }
+  });
   FontAwesomeIcon.displayName = 'FontAwesomeIcon';
   FontAwesomeIcon.propTypes = {
-    border: PropTypes.bool,
-    className: PropTypes.string,
-    mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    fixedWidth: PropTypes.bool,
-    inverse: PropTypes.bool,
-    flip: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    listItem: PropTypes.bool,
-    pull: PropTypes.oneOf(['right', 'left']),
-    pulse: PropTypes.bool,
-    rotation: PropTypes.oneOf([0, 90, 180, 270]),
-    size: PropTypes.oneOf(['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
-    spin: PropTypes.bool,
-    symbol: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    title: PropTypes.string,
-    transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    swapOpacity: PropTypes.bool
+    beat: PropTypes__default["default"].bool,
+    border: PropTypes__default["default"].bool,
+    beatFade: PropTypes__default["default"].bool,
+    bounce: PropTypes__default["default"].bool,
+    className: PropTypes__default["default"].string,
+    fade: PropTypes__default["default"].bool,
+    flash: PropTypes__default["default"].bool,
+    mask: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array, PropTypes__default["default"].string]),
+    maskId: PropTypes__default["default"].string,
+    fixedWidth: PropTypes__default["default"].bool,
+    inverse: PropTypes__default["default"].bool,
+    flip: PropTypes__default["default"].oneOf([true, false, 'horizontal', 'vertical', 'both']),
+    icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array, PropTypes__default["default"].string]),
+    listItem: PropTypes__default["default"].bool,
+    pull: PropTypes__default["default"].oneOf(['right', 'left']),
+    pulse: PropTypes__default["default"].bool,
+    rotation: PropTypes__default["default"].oneOf([0, 90, 180, 270]),
+    shake: PropTypes__default["default"].bool,
+    size: PropTypes__default["default"].oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
+    spin: PropTypes__default["default"].bool,
+    spinPulse: PropTypes__default["default"].bool,
+    spinReverse: PropTypes__default["default"].bool,
+    symbol: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].string]),
+    title: PropTypes__default["default"].string,
+    titleId: PropTypes__default["default"].string,
+    transform: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
+    swapOpacity: PropTypes__default["default"].bool
   };
@@ -386,5 +423,6 @@ FontAwesomeIcon.defaultProps = {
     mask: null,
+    maskId: null,
     fixedWidth: false,
     inverse: false,
-    flip: null,
+    flip: false,
     icon: null,
@@ -397,8 +435,16 @@ listItem: false,
     spin: false,
+    spinPulse: false,
+    spinReverse: false,
+    beat: false,
+    fade: false,
+    beatFade: false,
+    bounce: false,
+    shake: false,
     symbol: false,
     title: '',
+    titleId: null,
     transform: null,
     swapOpacity: false
   };
-  var convertCurry = convert.bind(null, React.createElement);
+  var convertCurry = convert.bind(null, React__default["default"].createElement);
 
@@ -409,2 +455,2 @@ exports.FontAwesomeIcon = FontAwesomeIcon;
 
-})));
+}));

package.json

 {
   "name": "@fortawesome/react-fontawesome",
   "description": "Official React component for Font Awesome 5",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "main": "index.js",
@@ -28,3 +28,5 @@ "module": "index.es.js",
     "Proudust <github.com/proudust>",
-    "Tiago Sousa <github.com/TiagoPortfolio>"
+    "Tiago Sousa <github.com/TiagoPortfolio>",
+    "Alexey Victorov <github.com/AliMamed>",
+    "Calum Smith <github.com/cpmsmith>"
   ],
@@ -37,8 +39,6 @@ "license": "MIT",
     "prettier": "pretty-quick --pattern src/** --staged",
-    "precommit": "npm run lint && npm run prettier && lint-staged",
     "prepack": "npm run dist",
-    "test": "npm run test.latest && npm run test.next",
-    "test.latest": "npm --no-save install @fortawesome/fontawesome-svg-core@latest @fortawesome/free-solid-svg-icons@latest && jest --silent",
-    "test.next": "npm --no-save install @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
-    "test.next.proregistry": "npm --userconfig .npmrc.proregistry --registry https://npm.fontawesome.com install --no-save @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
+    "test": "jest --silent",
+    "install.5": "npm --no-save install @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x",
+    "install.6": "npm --no-save install @fortawesome/fontawesome-svg-core@6.x @fortawesome/free-solid-svg-icons@6.x",
     "clean": "rm -f index.js && rm -f index.es.js"
@@ -53,19 +53,22 @@ },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "react": ">=16.x"
+    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+    "react": ">=16.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-external-helpers": "^7.7.4",
-    "@babel/preset-env": "^7.7.5",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-stage-3": "^7.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@types/react": "^16.9.15",
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-external-helpers": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-stage-3": "^7.8.3",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@types/react": "^17.0.38",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "browserslist": "^4.8.2",
-    "caniuse-lite": "^1.0.30001015",
-    "cross-env": "^6.0.3",
+    "babel-jest": "^27.4.6",
+    "browserslist": "^4.19.1",
+    "caniuse-lite": "^1.0.30001299",
+    "cross-env": "^7.0.3",
     "eslint": "^6.7.2",
@@ -80,18 +83,15 @@ "eslint-config-standard": "^14.1.0",
     "eslint-plugin-standard": "^4.0.1",
-    "husky": "^3.1.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.5.0",
+    "husky": "^7.0.4",
+    "jest": "^27.4.7",
+    "lint-staged": "^12.1.7",
     "markdown-toc": "^1.2.0",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1",
-    "react": "^16.4.2",
-    "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.2.0",
-    "rollup": "^1.27.8",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3",
+    "react": ">=17.x",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "rollup": "^2.64.0"
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.8.1"
   },
@@ -112,3 +112,8 @@ "files": [
     ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run prettier && lint-staged"
+    }
   }
 }

README.md

@@ -12,2 +12,3 @@ <a href="https://fontawesome.com">
 <!-- toc -->
+
 - [Documentation](#documentation)
@@ -22,5 +23,13 @@ - [How to Help](#how-to-help)
 
+`react-fontawesome` now supports `forwardRef` for version `0.2.x` or above. This was a breaking change so if you are using React older than version 16.3.0 choose the `0.1.x` version of this component.
+
+## Compatibility
+| React version | react-fontawesome version |
+| - | - |
+| < 16.3.0 | 0.1.x |
+| >= 16.3.0 | 0.2.x |
+
 Official documentation is hosted at fontawesome.com:
 
-[Check it out here](https://fontawesome.com/how-to-use/on-the-web/using-with/react)
+[Check it out here](https://fontawesome.com/v6/docs/web/use-with/react/)
 
@@ -44,31 +53,23 @@ ## How to Help
 
-|                                                             | Name           | GitHub                                               |
-| :---------------------------------------------------------: | -------------- | ---------------------------------------------------- |
-| <img src="https://github.com/NateRadebaugh.png?size=72" />  | Nate Radebaugh | [@NateRadebaugh](https://github.com/NateRadebaugh)   |
-|   <img src="https://github.com/kirkbross.png?size=72" />    | Kirk Ross      | [@kirkbross](https://github.com/kirkbross)           |
-|                                                             | Prateek Goel   | [@prateekgoel](https://github.com/prateekgoel)       |
-|    <img src="https://github.com/naortor.png?size=72" />     | Naor Torgeman  | [@naortor](https://github.com/naortor)               |
-|   <img src="https://github.com/mmhand123.png?size=72" />    | Matthew Hand   | [@mmhand123](https://github.com/mmhand123)           |
-|    <img src="https://github.com/calvinf.png?size=72" />     | calvinf        | [@calvinf](https://github.com/calvinf)               |
-| <img src="https://github.com/chimericdream.png?size=72" />  | Bill Parrott   | [@chimericdream](https://github.com/chimericdream)   |
-|    <img src="https://github.com/baelec.png?size=72" />      | Mike Lynch     | [@baelec](https://github.com/baelec)                 |
-|   <img src="https://github.com/rodlukas.png?size=72" />     | Lukáš Rod      | [@rodlukas](https://github.com/rodlukas)             |
-|   <img src="https://github.com/proudust.png?size=72" />     | Proudust       | [@proudust](https://github.com/proudust)             |
-| <img src="https://github.com/TiagoPortfolio.png?size=72" /> | Tiago Sousa    | [@TiagoPortfolio](https://github.com/TiagoPortfolio) |
+| Name              | GitHub                                                    |
+| ----------------- | --------------------------------------------------------- |
+| Nate Radebaugh    | [@NateRadebaugh](https://github.com/NateRadebaugh)        |
+| Kirk Ross         | [@kirkbross](https://github.com/kirkbross)                |
+| Prateek Goel      | [@prateekgoel](https://github.com/prateekgoel)            |
+| Naor Torgeman     | [@naortor](https://github.com/naortor)                    |
+| Matthew Hand      | [@mmhand123](https://github.com/mmhand123)                |
+| calvinf           | [@calvinf](https://github.com/calvinf)                    |
+| Bill Parrott      | [@chimericdream](https://github.com/chimericdream)        |
+| Mike Lynch        | [@baelec](https://github.com/baelec)                      |
+| Lukáš Rod         | [@rodlukas](https://github.com/rodlukas)                  |
+| Proudust          | [@proudust](https://github.com/proudust)                  |
+| Tiago Sousa       | [@TiagoPortfolio](https://github.com/TiagoPortfolio)      |
+| Alexey Victorov   | [@AliMamed](https://github.com/AliMamed)                  |
+| Calum Smith       | [@cpmsmith](https://github.com/cpmsmith)                  |
+| Font Awesome Team | [@FortAwesome](https://github.com/orgs/FortAwesome/people)|
 
 If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
 
-The Font Awesome team:
-
-|                                                            | Name           | GitHub                                             |
-| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
-| <img src="https://github.com/supercodepoet.png?size=72" /> | Travis Chase   | [@supercodepoet](https://github.com/supercodepoet) |
-|   <img src="https://github.com/robmadole.png?size=72" />   | Rob Madole     | [@robmadole](https://github.com/robmadole)         |
-|  <img src="https://github.com/mlwilkerson.png?size=72" />  | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson)     |
-|     <img src="https://github.com/talbs.png?size=72" />     | Brian Talbot   | [@talbs](https://github.com/talbs)                 |
-|     <img src="https://github.com/talbs.png?size=72" />     | Brian Talbot   | [@talbs](https://github.com/talbs)                 |
-| <img src="https://github.com/jasonlundien.png?size=72" />  | Jason Lundien  | [@jasonlundien](https://github.com/jasonlundien)   |
-
 ## Releasing this project (only project owners can do this)
 
 See [DEVELOPMENT.md](DEVELOPMENT.md#release)

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

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

Improved metrics

Lines of code

774

increased by13.32%

Number of lines in readme file

73

increased by1.39%

Worsened metrics

Total package byte prevSize

37353

decreased by-1.04%

Number of package files

6

decreased by-14.29%