@fortawesome/react-fontawesome - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

CHANGELOG.md

@@ -9,2 +9,10 @@ # Change Log
 
+## [0.1.5](https://github.com/FortAwesome/react-fontawesome/releases/tag/0.1.5) - 2019-09-29
+
+### Added
+
+- Full support for Duotone icons
+
+---
+
 ## [0.1.4](https://github.com/FortAwesome/react-fontawesome/releases/tag/0.1.4) - 2019-01-15
@@ -11,0 +19,0 @@

index.d.ts

@@ -13,5 +13,10 @@ /// <reference types="react" />
 
-export function FontAwesomeIcon(props: Props): JSX.Element
+export function FontAwesomeIcon(props: FontAwesomeIconProps): JSX.Element
 
-export interface Props {
+/**
+ * @deprecated use FontAwesomeIconProps
+ */
+export type Props = FontAwesomeIconProps
+
+export interface FontAwesomeIconProps {
   icon: IconProp
@@ -36,2 +41,2 @@ mask?: IconProp
   title?: string;
-}
+}

index.es.js

@@ -109,140 +109,59 @@ import { parse, icon } from '@fortawesome/fontawesome-svg-core';
 
-var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+// Get CSS class list from a props object
+function classList(props) {
+  var _classes;
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+  var spin = props.spin,
+      pulse = props.pulse,
+      fixedWidth = props.fixedWidth,
+      inverse = props.inverse,
+      border = props.border,
+      listItem = props.listItem,
+      flip = props.flip,
+      size = props.size,
+      rotation = props.rotation,
+      pull = props.pull; // map of CSS class names to properties
 
-var humps = createCommonjsModule(function (module) {
-(function(global) {
+  var classes = (_classes = {
+    'fa-spin': spin,
+    'fa-pulse': pulse,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-border': border,
+    'fa-li': listItem,
+    'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
+    'fa-flip-vertical': flip === 'vertical' || flip === 'both'
+  }, _defineProperty(_classes, "fa-".concat(size), typeof size !== 'undefined'), _defineProperty(_classes, "fa-rotate-".concat(rotation), typeof rotation !== 'undefined'), _defineProperty(_classes, "fa-pull-".concat(pull), typeof pull !== 'undefined'), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object
+  // return an array of the keys where the value for the key is not null
 
-  var _processKeys = function(convert, obj, options) {
-    if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
-      return obj;
-    }
+  return Object.keys(classes).map(function (key) {
+    return classes[key] ? key : null;
+  }).filter(function (key) {
+    return key;
+  });
+}
 
-    var output,
-        i = 0,
-        l = 0;
+// Camelize taken from humps
+// humps is copyright © 2012+ Dom Christie
+// Released under the MIT license.
+// Performant way to determine if object coerces to a number
+function _isNumerical(obj) {
+  obj = obj - 0; // eslint-disable-next-line no-self-compare
 
-    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 obj === obj;
+}
 
-  // String conversion methods
+function camelize(string) {
+  if (_isNumerical(string)) {
+    return string;
+  } // eslint-disable-next-line no-useless-escape
 
-  var separateWords = function(string, options) {
-    options = options || {};
-    var separator = options.separator || '_';
-    var split = options.split || /(?=[A-Z])/;
 
-    return string.split(split).join(separator);
-  };
+  string = string.replace(/[\-_\s]+(.)?/g, function (match, chr) {
+    return chr ? chr.toUpperCase() : '';
+  }); // Ensure 1st char is always lowercase
 
-  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);
-  };
+  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);
-  };
-
-  var decamelize = function(string, options) {
-    return separateWords(string, options).toLowerCase();
-  };
-
-  // Utilities
-  // Taken from Underscore.js
-
-  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);
-});
-
 function capitalize(val) {
@@ -259,3 +178,3 @@ return val.charAt(0).toUpperCase() + val.slice(1);
     var i = pair.indexOf(':');
-    var prop = humps.camelize(pair.slice(0, i));
+    var prop = camelize(pair.slice(0, i));
     var value = pair.slice(i + 1).trim();
@@ -294,3 +213,3 @@ prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;
         } else {
-          acc.attrs[humps.camelize(key)] = val;
+          acc.attrs[camelize(key)] = val;
         }
@@ -327,36 +246,17 @@
 
-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-inverse': props.inverse,
-    'fa-border': props.border,
-    'fa-li': props.listItem,
-    '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), _classes);
-  return Object.keys(classes).map(function (key) {
-    return classes[key] ? key : null;
-  }).filter(function (key) {
-    return key;
-  });
-}
-
+// Normalize icon arguments
 function normalizeIconArgs(icon$$1) {
+  // if the icon is null, there's nothing to do
   if (icon$$1 === null) {
     return null;
-  }
+  } // if the icon is an object and has a prefix and an icon name, return it
 
+
   if (_typeof(icon$$1) === 'object' && icon$$1.prefix && icon$$1.iconName) {
     return icon$$1;
-  }
+  } // if it's an array with length of two
 
+
   if (Array.isArray(icon$$1) && icon$$1.length === 2) {
+    // use the first item as prefix, second as icon name
     return {
@@ -366,4 +266,5 @@ prefix: icon$$1[0],
     };
-  }
+  } // if it's a string, use it as the icon name
 
+
   if (typeof icon$$1 === 'string') {
@@ -377,2 +278,13 @@ return {
 
+// creates an object with a key of key
+// and a value of value
+// if certain conditions are met
+function objectWithKey(key, value) {
+  // if the value is a non-empty array
+  // or it's not an array but it is truthy
+  // then create the object with the key and the value
+  // if not, return an empty array
+  return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
+}
+
 function FontAwesomeIcon(props) {
@@ -424,3 +336,4 @@ var iconArgs = props.icon,
   title: PropTypes.string,
-  transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  swapOpacity: PropTypes.bool
 };
@@ -443,3 +356,4 @@ FontAwesomeIcon.defaultProps = {
   title: '',
-  transform: null
+  transform: null,
+  swapOpacity: false
 };
@@ -446,0 +360,0 @@ var convertCurry = convert.bind(null, React.createElement);

index.js

@@ -114,140 +114,59 @@ (function (global, factory) {
 
-  var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+  // Get CSS class list from a props object
+  function classList(props) {
+    var _classes;
 
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
+    var spin = props.spin,
+        pulse = props.pulse,
+        fixedWidth = props.fixedWidth,
+        inverse = props.inverse,
+        border = props.border,
+        listItem = props.listItem,
+        flip = props.flip,
+        size = props.size,
+        rotation = props.rotation,
+        pull = props.pull; // map of CSS class names to properties
 
-  var humps = createCommonjsModule(function (module) {
-  (function(global) {
+    var classes = (_classes = {
+      'fa-spin': spin,
+      'fa-pulse': pulse,
+      'fa-fw': fixedWidth,
+      'fa-inverse': inverse,
+      'fa-border': border,
+      'fa-li': listItem,
+      'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
+      'fa-flip-vertical': flip === 'vertical' || flip === 'both'
+    }, _defineProperty(_classes, "fa-".concat(size), typeof size !== 'undefined'), _defineProperty(_classes, "fa-rotate-".concat(rotation), typeof rotation !== 'undefined'), _defineProperty(_classes, "fa-pull-".concat(pull), typeof pull !== 'undefined'), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object
+    // return an array of the keys where the value for the key is not null
 
-    var _processKeys = function(convert, obj, options) {
-      if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
-        return obj;
-      }
+    return Object.keys(classes).map(function (key) {
+      return classes[key] ? key : null;
+    }).filter(function (key) {
+      return key;
+    });
+  }
 
-      var output,
-          i = 0,
-          l = 0;
+  // Camelize taken from humps
+  // humps is copyright © 2012+ Dom Christie
+  // Released under the MIT license.
+  // Performant way to determine if object coerces to a number
+  function _isNumerical(obj) {
+    obj = obj - 0; // eslint-disable-next-line no-self-compare
 
-      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 obj === obj;
+  }
 
-    // String conversion methods
+  function camelize(string) {
+    if (_isNumerical(string)) {
+      return string;
+    } // eslint-disable-next-line no-useless-escape
 
-    var separateWords = function(string, options) {
-      options = options || {};
-      var separator = options.separator || '_';
-      var split = options.split || /(?=[A-Z])/;
 
-      return string.split(split).join(separator);
-    };
+    string = string.replace(/[\-_\s]+(.)?/g, function (match, chr) {
+      return chr ? chr.toUpperCase() : '';
+    }); // Ensure 1st char is always lowercase
 
-    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);
-    };
+    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);
-    };
-
-    var decamelize = function(string, options) {
-      return separateWords(string, options).toLowerCase();
-    };
-
-    // Utilities
-    // Taken from Underscore.js
-
-    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);
-  });
-
   function capitalize(val) {
@@ -264,3 +183,3 @@ return val.charAt(0).toUpperCase() + val.slice(1);
       var i = pair.indexOf(':');
-      var prop = humps.camelize(pair.slice(0, i));
+      var prop = camelize(pair.slice(0, i));
       var value = pair.slice(i + 1).trim();
@@ -299,3 +218,3 @@ prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;
           } else {
-            acc.attrs[humps.camelize(key)] = val;
+            acc.attrs[camelize(key)] = val;
           }
@@ -332,36 +251,17 @@
 
-  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-inverse': props.inverse,
-      'fa-border': props.border,
-      'fa-li': props.listItem,
-      '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), _classes);
-    return Object.keys(classes).map(function (key) {
-      return classes[key] ? key : null;
-    }).filter(function (key) {
-      return key;
-    });
-  }
-
+  // Normalize icon arguments
   function normalizeIconArgs(icon) {
+    // if the icon is null, there's nothing to do
     if (icon === null) {
       return null;
-    }
+    } // if the icon is an object and has a prefix and an icon name, return it
 
+
     if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
       return icon;
-    }
+    } // if it's an array with length of two
 
+
     if (Array.isArray(icon) && icon.length === 2) {
+      // use the first item as prefix, second as icon name
       return {
@@ -371,4 +271,5 @@ prefix: icon[0],
       };
-    }
+    } // if it's a string, use it as the icon name
 
+
     if (typeof icon === 'string') {
@@ -382,2 +283,13 @@ return {
 
+  // creates an object with a key of key
+  // and a value of value
+  // if certain conditions are met
+  function objectWithKey(key, value) {
+    // if the value is a non-empty array
+    // or it's not an array but it is truthy
+    // then create the object with the key and the value
+    // if not, return an empty array
+    return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
+  }
+
   function FontAwesomeIcon(props) {
@@ -429,3 +341,4 @@ var iconArgs = props.icon,
     title: PropTypes.string,
-    transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+    transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    swapOpacity: PropTypes.bool
   };
@@ -448,3 +361,4 @@ FontAwesomeIcon.defaultProps = {
     title: '',
-    transform: null
+    transform: null,
+    swapOpacity: false
   };
@@ -451,0 +365,0 @@ var convertCurry = convert.bind(null, React.createElement);

package.json

 {
   "name": "@fortawesome/react-fontawesome",
   "description": "Official React component for Font Awesome 5",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "index.js",
@@ -23,3 +23,3 @@ "module": "index.es.js",
     "Matthew Hand <github.com/mmhand123>",
-    "calvinf <github.com/calvinf>"
+    "Calvin Freitas <github.com/calvinf>"
   ],
@@ -44,3 +44,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0-7",
+    "@fortawesome/fontawesome-svg-core": "^1.2.20",
     "react": "16.x"
@@ -59,2 +59,4 @@ },
     "babel-jest": "^23.6.0",
+    "browserslist": "^4.6.6",
+    "caniuse-lite": "^1.0.30000987",
     "cross-env": "^5.1.1",
@@ -84,3 +86,2 @@ "eslint": "^5.3.0",
   "dependencies": {
-    "humps": "^2.0.1",
     "prop-types": "^15.5.10"
@@ -87,0 +88,0 @@ },

README.md

@@ -20,3 +20,2 @@ <a href="https://fontawesome.com">
 - [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
-- [or with Yarn](#or-with-yarn)
 - [Usage](#usage)
@@ -72,3 +71,3 @@ * [Explicit Import](#explicit-import)
 ## Installation
-
+Using NPM:
 ```
@@ -79,2 +78,8 @@ $ npm i --save @fortawesome/fontawesome-svg-core
 ```
+Or with Yarn:
+```
+$ yarn add @fortawesome/fontawesome-svg-core
+$ yarn add @fortawesome/free-solid-svg-icons
+$ yarn add @fortawesome/react-fontawesome
+```
 
@@ -99,12 +104,5 @@ ## Add more styles or Pro icons
 $ npm i --save @fortawesome/pro-light-svg-icons
+$ npm i --save @fortawesome/pro-duotone-svg-icons
 ```
 
-## or with Yarn
-
-```
-$ yarn add @fortawesome/fontawesome-svg-core
-$ yarn add @fortawesome/free-solid-svg-icons
-$ yarn add @fortawesome/react-fontawesome
-```
-
 ## Usage
@@ -378,2 +376,3 @@
 ```
+Note that icon size can be controlled with the CSS `font-size` attribute, and `FontAwesomeIcon`'s `size` prop determines icon size relative to the current `font-size`.
 
@@ -434,2 +433,9 @@ [Fixed width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):
 
+[Swap opacity](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons) (duotone icons only):
+
+```javascript
+<FontAwesomeIcon icon={['fad', 'stroopwafel']} />
+<FontAwesomeIcon icon={['fad', 'stroopwafel']} swapOpacity />
+```
+
 Your own class names:
@@ -436,0 +442,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

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

Dependency count

3

decreased by-25%

Number of lines in readme file

587

increased by1.03%

Worsened metrics

Total package byte prevSize

50501

decreased by-6.35%

Dev dependency count

34

increased by6.25%

Lines of code

632

decreased by-18.66%

Dependency changes

• - Removedhumps@^2.0.1

• - Removedhumps@2.0.1(transitive)