@fortawesome/react-native-fontawesome 0.2.7 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@
 
 [![npm](https://img.shields.io/npm/v/@fortawesome/react-native-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/react-native-fontawesome)
 
-> Font Awesome 5 React Native component using SVG with JS
+> Font Awesome React Native component using SVG with JS
 
 <!-- toc -->
 
@@ -21,13 +21,13 @@
   * [Explicit Import](#explicit-import)
   * [Build a Library to Reference Icons Throughout Your App More Conveniently](#build-a-library-to-reference-icons-throughout-your-app-more-conveniently)
   * [Color](#color)
-    + [Color Prop](#color-prop) 
+    + [Color Prop](#color-prop)
     + [Change Color with a StyleSheet](#color-stylesheet-property)
-  * [Size](#size)  
+  * [Size](#size)
 - [Features](#features)
   * [Duotone](#duotone)
   * [Masking](#masking)
-  * [Power Transforms](#power-transforms)    
+  * [Power Transforms](#power-transforms)
 - [Frequent questions](#frequent-questions)
   * [How do I import the same icon from two different styles?](#how-do-i-import-the-same-icon-from-two-different-styles)
   * [I don't think tree-shaking is working; got any advice?](#i-dont-think-tree-shaking-is-working-got-any-advice)
@@ -42,24 +42,24 @@ Hey there! We're glad you're here...
 
 #### Upgrading Font Awesome?
 
-If you've used Font Awesome in the past (version 4 or older) there are some
+If you've used Font Awesome in the past (version 5 or older) there are some
 things that you should learn before you dive in.
 
-> https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
+> https://fontawesome.com/v6/docs/web/setup/upgrade/
 
 #### Get started
 
 This package is for integrating with React Native. If you aren't using React Native then it's
 not going to help you. Head over to our "Get Started" page for some guidance.
 
-> https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
+> https://fontawesome.com/v6/docs/web/setup/quick-start
 
 #### Learn about our new SVG implementation
 
 This package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from
 the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
 
-> https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
+> https://fontawesome.com/v6/docs/web/dig-deeper/svg-core
 
 ## Installation
 
@@ -92,7 +92,7 @@ $ npm i --save @fortawesome/free-brands-svg-icons
 $ npm i --save @fortawesome/free-regular-svg-icons
 ```
 
-If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages; this requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
+If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages; this requires [additional configuration](https://fontawesome.com/v6/docs/web/setup/packages).
 
 ```
 $ npm i --save @fortawesome/pro-solid-svg-icons
@@ -120,13 +120,13 @@ $ yarn add @fortawesome/react-native-fontawesome
 You can use Font Awesome icons in your React Native components as simply as this:
 
 ```javascript
-<FontAwesomeIcon icon="coffee" />
+<FontAwesomeIcon icon="mug-saucer" />
 ```
 
-That simple usage is made possible when you add the `"coffee"` icon, to the
+That simple usage is made possible when you add the `"mug-saucer"` icon, to the
 _library_.
 
-This is one of the two ways you can use Font Awesome 5 with React Native. We'll
+This is one of the two ways you can use Font Awesome with React Native. We'll
 summarize both ways briefly and then get into the details of each below.
 
 1.  **Explicit Import**
@@ -164,22 +164,22 @@ Now, a simple React Native component might look like this:
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-import { faCoffee } from '@fortawesome/free-solid-svg-icons'
+import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'
 
 type Props = {}
 export default class App extends Component<Props> {
   render() {
     return (
       <View>
-        <FontAwesomeIcon icon={ faCoffee } />
+        <FontAwesomeIcon icon={ faMugSaucer } />
       </View>
     )
   }
 }
 ```
 
-Notice that the `faCoffee` icon is imported from
-`@fortawesome/free-solid-svg-icons` as an object and then provided to the
+Notice that the `faMugSaucer` icon is imported from
+`@fortawesome/free-solid-svg-icons/faMugSaucer` as an object and then provided to the
 `icon` prop as an object.
 
 Explicitly importing icons like this allows us to subset Font Awesome's
@@ -197,7 +197,7 @@ So, add them to the _library_. Do this setup once in some initializing module
 of your app, adding all of the icons you'll use in your app's React components.
 
 Suppose `App.js` initializes my app, including the library. For this example,
-we'll add two individual icons, `faCheckSquare` and `faCoffee`. We also add all
+we'll add two individual icons, `faSquareCheck` and `faMugSaucer`. We also add all
 of the brands in `@fortawesome/free-brands-svg-icons`. This example would
 illustrate the benefits of building a library even more clearly if it involved
 fifty or a hundred icons, but we'll keep the example brief and leave it to your
@@ -221,9 +221,10 @@ In `App.js`, where our app is initialized:
 // ...
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
-import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
+import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'
+import { faMugEmpty } from '@fortawesome/free-solid-svg-icons/faMugEmpty'
 
-library.add(fab, faCheckSquare, faCoffee)
+library.add(fab, faSquareCheck, faMugSaucer)
 ```
 
 OK, so what's happening here?
@@ -235,9 +236,9 @@ In our call to <span style="white-space:nowrap;">`library.add()`</span> we're pa
   So any of the brand icons in that package may be referenced by icon name
   as a string anywhere else in our app.
   For example: `"apple"`, `"microsoft"`, or `"google"`.
-- `faCheckSquare` and `faCoffee`: Adding each of these icons individually
+- `faSquareCheck` and `faMugSaucer`: Adding each of these icons individually
   allows us to refer to them throughout our app by their icon string names,
-  `"check-square"` and `"coffee"`, respectively.
+  `"square-check"` and `"mug-saucer"`, respectively.
 
 Now, suppose you also have React Native components `Beverage` and `Gadget` in your app.
 You don't have to re-import your icons into them. Just import the `FontAwesomeIcon`
@@ -252,8 +253,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 export const Beverage = () => (
   <View>
-    <FontAwesomeIcon icon="check-square" />
-    <Text>Favorite beverage: </Text><FontAwesomeIcon icon="coffee" />
+    <FontAwesomeIcon icon="square-check" />
+    <Text>Favorite beverage: </Text><FontAwesomeIcon icon="mug-saucer" />
   </View>
 )
 ```
@@ -272,7 +273,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 export const Gadget = () => (
   <View>
-    <FontAwesomeIcon icon="check-square" />
+    <FontAwesomeIcon icon="square-check" />
     <Text>Popular gadgets come from vendors like:</Text>
     <FontAwesomeIcon icon={['fab', 'apple']} />
     <FontAwesomeIcon icon={['fab', 'microsoft']} />
@@ -283,7 +284,7 @@ export const Gadget = () => (
 
 Notice:
 
-- We used the `"check-square"` icon name again in this component, though we
+- We used the `"square-check"` icon name again in this component, though we
   didn't have to explicitly import it into this component. With one explicit import of
   that icon in `App.js`, and adding it to the library, we've managed to use
   it by name in multiple components.
@@ -296,10 +297,10 @@ Notice:
 Adding a prefix—and the syntax we used to do it—are new. So what's
 going on here?
 
-First, recall when we introduced `<FontAwesomeIcon icon="coffee"/>` and learned
-that a prefix of `fas` was being added to `"coffee"` by default.
+First, recall when we introduced `<FontAwesomeIcon icon="mug-saucer"/>` and learned
+that a prefix of `fas` was being added to `"mug-saucer"` by default.
 
-The `"check-square"` icon is getting a default prefix of `fas` here too, which
+The `"square-check"` icon is getting a default prefix of `fas` here too, which
 is what we want, because that icon also lives in the
 `@fortawesome/free-solid-svg-icons` package.
 
@@ -314,8 +315,8 @@ Now, what about that syntax?
 
 The `icon` prop expects a single object:
 
-- It could be an icon object, like `{faCoffee}`.
-- It could a string object, like `"coffee"`.
+- It could be an icon object, like `{faMugSaucer}`.
+- It could a string object, like `"mug-saucer"`.
   (The curly braces around a string object supplied to a prop are optional,
   so we've omitted them.)
 - Or it could be an `Array` of strings, where the first element is a prefix,
@@ -335,7 +336,7 @@ Using the color prop should be preferred over using the StyleSheet.
 #### Color Prop
 
 ```javascript
-  <FontAwesomeIcon icon={ faCoffee } color={ 'red' } />
+  <FontAwesomeIcon icon={ faMugSaucer } color={ 'red' } />
 ```
 
 #### Color StyleSheet property
@@ -346,8 +347,7 @@ To set the color of an icon, provide a `StyleSheet` like this:
 import React, { Component } from 'react'
 import { View, StyleSheet } from 'react-native'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-import { faCoffee } from '@fortawesome/free-solid-svg-icons'
-
+import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'
 
 type Props = {}
 
@@ -361,7 +361,7 @@ export default class App extends Component<Props> {
   render() {
     return (
       <View>
-        <FontAwesomeIcon icon={ faCoffee } style={ style.icon } />
+        <FontAwesomeIcon icon={ faMugSaucer } style={ style.icon } />
       </View>
     )
   }
@@ -375,7 +375,7 @@ Default: 16
 To adjust the size, use the `size` prop:
 
 ```javascript
-<FontAwesomeIcon icon={ faCoffee } size={ 32 } />
+<FontAwesomeIcon icon={ faMugSaucer } size={ 32 } />
 ```
 
 Note: the `height` and `width` props have been deprecated.
@@ -385,7 +385,7 @@ Note: the `height` and `width` props have been deprecated.
 ### Duotone
 
 ```javascript
-<FontAwesomeIcon icon="coffee" color="blue" secondaryColor="red" secondaryOpacity={ 0.4 } />
+<FontAwesomeIcon icon="mug-saucer" color="blue" secondaryColor="red" secondaryOpacity={ 0.4 } />
 ```
 
 You can specify the color and opacity for Duotone's secondary layer using the `secondaryColor` and `secondaryOpacity` props. Note that these are optional, and will simply default to using your primary color at 40% opacity.
@@ -393,19 +393,19 @@ You can specify the color and opacity for Duotone's secondary layer using the `s
 ### Masking
 
 ```javascript
-<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
+<FontAwesomeIcon icon="mug-saucer" mask={['far', 'circle']} />
 ```
 
-[More on masking...](https://fontawesome.com/how-to-use/on-the-web/styling/masking)
+[More on masking...](https://fontawesome.com/v6/docs/web/style/mask#contentHeader)
 
 ### Power Transforms
 
 ```javascript
-<FontAwesomeIcon icon="arrows" transform="shrink-6 left-4" />
-<FontAwesomeIcon icon="arrow-rightr" transform={{ rotate: 42 }} />
+<FontAwesomeIcon icon="arrows-up-down-left-right" transform="shrink-6 left-4" />
+<FontAwesomeIcon icon="arrow-right" transform={{ rotate: 42 }} />
 ```
 
-[More on power transforms...](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)
+[More on power transforms...](https://fontawesome.com/v6/docs/web/style/power-transform#contentHeader)
 
 ## Frequent questions
 
@@ -415,15 +415,35 @@ With ES modules and `import` statements we can rename:
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons'
-import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons'
+import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
+import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons/faStroopwafel'
 
 library.add(fasFaStroopwafel, farFaStroopwafel)
 ```
 
 ### I don't think tree-shaking is working; got any advice?
 
-Check out our [docs here](https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking).
+Check out our [docs here](https://fontawesome.com/v6/docs/apis/javascript/tree-shaking).
+
+If you find that your build times are taking forever, check the way that you are importing icons.
+
+In past versions of `react-native-fontawesome` we've documented importing icons like this:
+
+```javascript
+import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'
+```
+
+This can cause build times for your project to skyrocket because React Native is trying to tree shake. The Font Awesome
+packages are so large that we _highly_ recommend that you avoid this.
+
+Instead, use "deep imports" by default.
+
+```javascript
+import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel' // <- notice the additional module here?
+```
+
+By directly importing from the `faStroopwafel.js` module there is no additional work that tree shaking needs to do in order to
+reduce your bundle size.
 
 ## How to Help
 
@@ -440,19 +460,11 @@ And then:
 
 Community:
 
-|                                                             | Name              | GitHub                                               |
-| :---------------------------------------------------------: | ----------------- | ---------------------------------------------------- |
-| <img src="https://github.com/dizy.png?size=72" />           | Dizy              | [@dizy](https://github.com/dizy)                     |
-| <img src="https://github.com/iamdavidmartin.png?size=72" /> | David Martin      | [@iamdavidmartin](https://github.com/iamdavidmartin) |
-| <img src="https://github.com/puremana.png?size=72" />       | Jeremey           | [@puremana](https://github.com/puremana)             |
-| <img src="https://github.com/schonfeld.png?size=72" />      | Michael Schonfeld | [@schonfeld](https://github.com/schonfeld)           |
-| <img src="https://github.com/golya.png?size=72" />          | Ádám Gólya        | [@golya](https://github.com/golya)                   |
-
-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)                 |
+| Name              | GitHub                                                    |
+| ----------------- | --------------------------------------------------------- |
+| Dizy              | [@dizy](https://github.com/dizy)                          |
+| David Martin      | [@iamdavidmartin](https://github.com/iamdavidmartin)      |
+| Jeremey           | [@puremana](https://github.com/puremana)                  |
+| Michael Schonfeld | [@schonfeld](https://github.com/schonfeld)                |
+| Ádám Gólya        | [@golya](https://github.com/golya)                        |
+| Font Awesome Team | [@FortAwesome](https://github.com/orgs/FortAwesome/people)|

package/dist/components/FontAwesomeIcon.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DEFAULT_SIZE = exports.DEFAULT_SECONDARY_OPACITY = exports.DEFAULT_COLOR = void 0;
 exports["default"] = FontAwesomeIcon;
-exports.DEFAULT_SECONDARY_OPACITY = exports.DEFAULT_COLOR = exports.DEFAULT_SIZE = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -18,45 +18,44 @@ var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
 
 var _logger = _interopRequireDefault(require("../logger"));
 
+var _excluded = ["color"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-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 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 keys; }
 
-function _objectSpread(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 _objectSpread(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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
-    windowWidth = _Dimensions$get.width,
-    windowHeight = _Dimensions$get.height;
-
 var DEFAULT_SIZE = 16;
 exports.DEFAULT_SIZE = DEFAULT_SIZE;
 var DEFAULT_COLOR = '#000';
 exports.DEFAULT_COLOR = DEFAULT_COLOR;
-var DEFAULT_SECONDARY_OPACITY = 0.4; // Deprecated height and width defaults
-
+var DEFAULT_SECONDARY_OPACITY = 0.4;
 exports.DEFAULT_SECONDARY_OPACITY = DEFAULT_SECONDARY_OPACITY;
-var DEFAULT_HEIGHT = windowHeight * 0.1;
-var DEFAULT_WIDTH = windowWidth * 0.1;
 
 function objectWithKey(key, value) {
   return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
 }
 
 function normalizeIconArgs(icon) {
-  if (icon === null) {
-    return null;
+  if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
+    return icon;
   }
 
-  if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
-    return icon;
+  if (_fontawesomeSvgCore.parse.icon) {
+    return _fontawesomeSvgCore.parse.icon(icon);
+  }
+
+  if (icon === null) {
+    return null;
   }
 
   if (Array.isArray(icon) && icon.length === 2) {
@@ -77,6 +76,7 @@ function normalizeIconArgs(icon) {
 function FontAwesomeIcon(props) {
   var iconArgs = props.icon,
       maskArgs = props.mask,
+      maskId = props.maskId,
       height = props.height,
       width = props.width,
       size = props.size;
@@ -86,10 +86,12 @@ function FontAwesomeIcon(props) {
   var iconLookup = normalizeIconArgs(iconArgs);
   var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
   var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-  var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread(_objectSpread({}, transform), mask));
+  var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread(_objectSpread(_objectSpread({}, transform), mask), {}, {
+    maskId: maskId
+  }));
 
   if (!renderedIcon) {
-    (0, _logger["default"])("ERROR: icon not found for icon = ", iconArgs);
+    (0, _logger["default"])('ERROR: icon not found for icon = ', iconArgs);
     return null;
   }
 
@@ -98,44 +100,29 @@ function FontAwesomeIcon(props) {
   var color = props.color || style.color || DEFAULT_COLOR; // This is the color that will be passed to the "fill" prop of the secondary Path element child (in Duotone Icons)
   // `null` value will result in using the primary color, at 40% opacity
 
-  var secondaryColor = props.secondaryColor || null; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
+  var secondaryColor = props.secondaryColor || color; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
 
-  var secondaryOpacity = props.secondaryOpacity || (secondaryColor ? 1 : DEFAULT_SECONDARY_OPACITY); // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
+  var secondaryOpacity = props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY; // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
   // or resolved in other ways, to avoid ambiguity as to which inputs cause which outputs in the underlying rendering process.
   // In other words, we don't want color (for example) to be specified via two different inputs.
 
   var styleColor = style.color,
-      modifiedStyle = _objectWithoutProperties(style, ["color"]);
+      modifiedStyle = _objectWithoutProperties(style, _excluded);
 
   var resolvedHeight, resolvedWidth;
 
   if (height || width) {
-    if (size) {
-      console.warn("DEPRECATION: height and width props on ".concat(FontAwesomeIcon.displayName, " have been deprecated.  ") + "Since you've also provided a size prop, we'll use it to override the height and width props given.  " + "You should probably go ahead and remove the height and width props to avoid confusion and resolve this warning.");
-      resolvedHeight = resolvedWidth = size;
-    } else {
-      console.warn("DEPRECATION: height and width props on ".concat(FontAwesomeIcon.displayName, " have been deprecated.  ") + "Use the size prop instead.");
-      resolvedHeight = height || DEFAULT_HEIGHT;
-      resolvedWidth = width || DEFAULT_WIDTH;
-    }
+    throw new Error("Prop height and width for component ".concat(FontAwesomeIcon.displayName, " have been deprecated. ") + "Use the size prop instead like <".concat(FontAwesomeIcon.displayName, " size={").concat(width, "} />."));
   } else {
     resolvedHeight = resolvedWidth = size || DEFAULT_SIZE;
   }
 
-  var extraProps = {
-    height: resolvedHeight,
-    width: resolvedWidth,
-    fill: color,
-    secondaryFill: secondaryColor,
-    secondaryOpacity: secondaryOpacity,
-    style: modifiedStyle
-  };
-  Object.keys(props).forEach(function (key) {
-    if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
-      extraProps[key] = props[key];
-    }
-  });
-  return convertCurry(_abstract[0], extraProps);
+  var rootAttributes = _abstract[0].attributes;
+  rootAttributes.height = resolvedHeight;
+  rootAttributes.width = resolvedWidth;
+  rootAttributes.style = modifiedStyle;
+  replaceCurrentColor(_abstract[0], color, secondaryColor, secondaryOpacity);
+  return convertCurry(_abstract[0]);
 }
 
 FontAwesomeIcon.displayName = 'FontAwesomeIcon';
@@ -151,20 +138,50 @@ FontAwesomeIcon.propTypes = {
   }), _propTypes["default"].array]),
   icon: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array, _propTypes["default"].string]),
   mask: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array, _propTypes["default"].string]),
+  maskId: _propTypes["default"].string,
   transform: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
 };
 FontAwesomeIcon.defaultProps = {
   icon: null,
   mask: null,
+  maskId: null,
   transform: null,
   style: {},
   color: null,
   secondaryColor: null,
   secondaryOpacity: null,
-  height: undefined,
-  width: undefined // Once the deprecation of height and width props is complete, let's put the real default prop value for size here.
-  // For now, adding it breaks the default/override logic for height/width/size.
-
+  size: DEFAULT_SIZE
 };
 
-var convertCurry = _converter["default"].bind(null, _react["default"].createElement);
+var convertCurry = _converter["default"].bind(null, _react["default"].createElement);
+
+function replaceCurrentColor(obj, primaryColor, secondaryColor, secondaryOpacity) {
+  obj.children.forEach(function (child, childIndex) {
+    replaceFill(child, primaryColor, secondaryColor, secondaryOpacity);
+
+    if (Object.prototype.hasOwnProperty.call(child, 'attributes')) {
+      replaceFill(child.attributes, primaryColor, secondaryColor, secondaryOpacity);
+    }
+
+    if (Array.isArray(child.children) && child.children.length > 0) {
+      replaceCurrentColor(child, primaryColor, secondaryColor, secondaryOpacity);
+    }
+  });
+}
+
+function replaceFill(obj, primaryColor, secondaryColor, secondaryOpacity) {
+  if (hasPropertySetToValue(obj, 'fill', 'currentColor')) {
+    if (hasPropertySetToValue(obj, 'class', 'fa-primary')) {
+      obj.fill = primaryColor;
+    } else if (hasPropertySetToValue(obj, 'class', 'fa-secondary')) {
+      obj.fill = secondaryColor;
+      obj.fillOpacity = secondaryOpacity;
+    } else {
+      obj.fill = primaryColor;
+    }
+  }
+}
+
+function hasPropertySetToValue(obj, property, value) {
+  return Object.prototype.hasOwnProperty.call(obj, property) && obj[property] === value;
+}

package/dist/converter.js

@@ -11,50 +11,41 @@ var _reactNativeSvg = require("react-native-svg");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 keys; }
+
+function _objectSpread(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 _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 obj; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
 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 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 _objectSpread(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 _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 obj; }
-
 var svgObjectMap = {
-  "svg": _reactNativeSvg.Svg,
-  "path": _reactNativeSvg.Path,
-  "rect": _reactNativeSvg.Rect,
-  "defs": _reactNativeSvg.Defs,
-  "mask": _reactNativeSvg.Mask,
-  "g": _reactNativeSvg.G,
-  "clipPath": _reactNativeSvg.ClipPath
+  svg: _reactNativeSvg.Svg,
+  path: _reactNativeSvg.Path,
+  rect: _reactNativeSvg.Rect,
+  defs: _reactNativeSvg.Defs,
+  mask: _reactNativeSvg.Mask,
+  g: _reactNativeSvg.G,
+  clipPath: _reactNativeSvg.ClipPath
 };
 
 function convert(createElement, element) {
-  var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
   if (typeof element === 'string') {
     return element;
   }
 
-  var isDuotone = (element.children || []).length === 2;
   var children = (element.children || []).map(function (child, childIndex) {
-    var isDuotoneSecondLayer = isDuotone && childIndex === 0;
-    var fill = isDuotoneSecondLayer ? extraProps.secondaryFill : extraProps.fill;
-    var fillOpacity = isDuotoneSecondLayer ? extraProps.secondaryOpacity : 1;
-    return convert(createElement, child, _objectSpread(_objectSpread({}, extraProps), {}, {
-      fill: fill,
-      fillOpacity: fillOpacity
-    }));
+    return convert(createElement, child);
   });
   var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
     var val = element.attributes[key];
@@ -62,17 +53,16 @@ function convert(createElement, element) {
     switch (key) {
       case 'class':
       case 'role':
-      case 'style':
       case 'xmlns':
         delete element.attributes[key];
         break;
 
       case 'focusable':
-        acc.attrs[key] = val === 'true' ? true : false;
+        acc.attrs[key] = val === 'true';
         break;
 
       default:
-        if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0 || 'fill' === key && 'currentColor' === val) {
+        if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0 || key === 'fill' && val === 'currentColor') {
           delete element.attributes[key];
         } else {
           acc.attrs[_humps["default"].camelize(key)] = val;
@@ -84,7 +74,7 @@ function convert(createElement, element) {
   }, {
     attrs: {}
   });
-  return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread(_objectSpread({}, mixins.attrs), extraProps)].concat(_toConsumableArray(children)));
+  return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread({}, mixins.attrs)].concat(_toConsumableArray(children)));
 }
 
 var _default = convert;

package/index.d.ts

@@ -20,8 +20,10 @@ export interface Props {
   secondaryColor?: string;
   secondaryOpacity?: number;
   mask?: IconProp;
+  maskId?: string;
   transform?: string | Transform;
   style?: FontAwesomeIconStyle;
+  testID?: string;
 }
 
 export function FontAwesomeIcon(props: Props): JSX.Element;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@fortawesome/react-native-fontawesome",
-  "version": "0.2.7",
-  "description": "Official React Native component for Font Awesome 5",
+  "version": "0.3.0",
+  "description": "Official React Native component for Font Awesome",
   "main": "index.js",
   "scripts": {
-    "test": "jest",
-    "dist": "babel --config-file ./babel.dist.config.js src --ignore src/components/__tests__ --out-dir dist",
+    "test": "jest --forceExit",
+    "lint": "eslint src",
+    "dist:watch": "babel --watch --config-file ./babel.dist.config.js src --ignore src/components/__tests__ --out-dir dist",
+    "dist": "babel --config-file ./babel.dist.config.js src --ignore src/components/__tests__ --ignore src/components/__fixtures__ --out-dir dist",
     "set.rnsvg": "yarn upgrade react-native-svg@$RNSVG_VERSION"
   },
   "types": "index.d.ts",
@@ -22,14 +24,15 @@
     "David Martin <github.com/iamdavidmartin>",
     "Jeremy <github.com/puremana>",
     "Michael Schonfeld <github.com/schonfeld>",
-    "Ádám Gólya <github.com/golya>"
+    "Ádám Gólya <github.com/golya>",
+    "Edward Emanuel <github.com/ej2>",
+    "Jason Lundien <github.com/jasonlundien>"
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.4",
-    "react": ">= 16.x",
-    "react-native": "> 0.57",
-    "react-native-svg": "> 7.0"
+    "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+    "react-native": ">= 0.67",
+    "react-native-svg": ">= 11.x"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.5",
@@ -37,15 +40,22 @@
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
     "@babel/runtime": "^7.7.6",
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/fontawesome-svg-core": "^6",
     "babel-core": "^7.0.0-bridge",
     "babel-jest": "^24.9.0",
-    "jest": "^24.9.0",
+    "eslint": "^8.16.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.2.2",
+    "eslint-plugin-n": "^15.2.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "jest": "^28.1.0",
     "metro-react-native-babel-preset": "^0.57.0",
-    "react": "16.9.0",
-    "react-native": "^0.62.3",
-    "react-native-svg": "^9.13.6",
-    "react-test-renderer": "^16.9.0"
+    "react": "^17",
+    "react-native": "^0.68.0",
+    "react-native-svg": "^12.3.0",
+    "react-test-renderer": "^17"
   },
   "dependencies": {
     "humps": "^2.0.1",

package/CHANGELOG.md

@@ -1,108 +0,0 @@
-# Change Log
-
-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/).
-
----
-
-## [0.2.7](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.7) - 2021-07-22
-
-### Changed
-
-- Dependency updates including support for react-native 0.64 and react 17
-
----
-
-## [0.2.6](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.6) - 2020-10-01
-
-### Fixed
-
-- Removed dependence on React Native for Web's ViewPropTypes #72
-
----
-
-## [0.2.5](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.5) - 2020-05-14
-
-### Added
-
-- Support for Duotone icons #59
-
----
-
-## [0.2.4](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.4) - 2020-04-27
-
-### Fixed
-
-- Loosen peerDependencies versions to allow newer react-native and react-native-svg packages
-
----
-
-## [0.2.3](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.3) - 2020-03-06
-
-### Fixed
-
-- Support arrays in style property #28 #40 #46
-
----
-
-## [0.2.2](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.2) - 2020-02-17
-
-### Fixed
-
-- Add index.d.ts to the package.json files
-
----
-
-## [0.2.1](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.1) - 2020-02-06
-
-### Fixed
-
-- Convert 'focusable' attribute to boolean from string #42
-
-## [0.2.0](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.2.0) - 2019-12-13
-
-### Added
-
-- TypeScript definition file #17
-
-### Changed
-
-- Loosened peer dependencies to prevent incorrect version warnings
-
-## [0.1.0](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.1.0) - 2019-01-07
-
-### Changed
-
-- Add color prop
-  -- Delete color property on style object after resolving the fill color to avoid ambiguity
-  -- Remove any fill="currentColor" attributes returned by fontawesome-svg-core
-
-- Add size prop
-  -- Deprecate height and width props
-
-## [0.0.4](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.0.4) - 2018-10-13
-
-### Changed
-
-- Internal clean-up, leveraging recent developments in react-native-svg
-
-## [0.0.3](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.0.3) - 2018-10-11
-
-### Added
-
-- Add support for masking and power transforms
-
-## [0.0.2](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.0.2) - 2018-10-11
-
-### Added
-
-- Add style prop with initial special-case support for setting icon color
-
-- Re-initialize example app to allow for using it with `react-native-svg` 7.x
-
-## [0.0.1](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.0.1) - 2018-10-08
-
-### Added
-
-- Initial, minimal implementation, based on [@fortawesome/react-fontawesome](https://github.com/FortAwesome/react-fontawesome/)