@fortawesome/react-native-fontawesome 0.2.7 → 0.3.1

package/README.md

@@ -6,453 +6,39 @@
 
 [![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 -->
 
-- [Introduction](#introduction)
-    + [Upgrading Font Awesome?](#upgrading-font-awesome)
-    + [Get started](#get-started)
-    + [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
-- [Installation](#installation)
-- [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
-- [or with Yarn](#or-with-yarn)
-- [Usage](#usage)
-  * [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) 
-    + [Change Color with a StyleSheet](#color-stylesheet-property)
-  * [Size](#size)  
-- [Features](#features)
-  * [Duotone](#duotone)
-  * [Masking](#masking)
-  * [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)
+- [Documentation](#documentation)
 - [How to Help](#how-to-help)
 - [Contributors](#contributors)
 
 <!-- tocstop -->
 
-## Introduction
+## Documentation
 
-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
-things that you should learn before you dive in.
-
-> https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
-
-#### 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
-
-#### 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
-
-## Installation
-
-```
-$ npm i --save react-native-svg # **
-$ npm i --save @fortawesome/fontawesome-svg-core
-$ npm i --save @fortawesome/free-solid-svg-icons
-$ npm i --save @fortawesome/react-native-fontawesome
-```
-
-** `create-react-native-app` uses Expo, which bundles `react-native-svg`. So if you're using `create-react-native-app`
-you shouldn't try to add `react-native-svg`. At the time of writing, `create-react-native-app` bundles
-`react-native-svg` version 6, which does not include support for SVG features such as `Mask`. In order to make use of `Mask`, make sure your dependencies have `react-native-svg` 7. The example app in this repo demonstrates.
-
-If you are using a bare react-native-cli project, run the following command to complete the setup on iOS.
-
-```
-$ cd ios && pod install
-```
-
-## Add more styles or Pro icons
-
-Brands are separated into their own style and for customers upgrading from
-version 4 to 5 we have a limited number of Regular icons available.
-
-**Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons**
-
-```
-$ 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).
-
-```
-$ npm i --save @fortawesome/pro-solid-svg-icons
-$ npm i --save @fortawesome/pro-regular-svg-icons
-$ npm i --save @fortawesome/pro-light-svg-icons
-```
-
-If you'd like to use Duotone icons, you'll need to add Duotone package:
-
-```
-$ 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-native-fontawesome
-```
-
-## Usage
-
-You can use Font Awesome icons in your React Native components as simply as this:
-
-```javascript
-<FontAwesomeIcon icon="coffee" />
-```
-
-That simple usage is made possible when you add the `"coffee"` icon, to the
-_library_.
-
-This is one of the two ways you can use Font Awesome 5 with React Native. We'll
-summarize both ways briefly and then get into the details of each below.
-
-1.  **Explicit Import**
-
-    Allows icons to be subsetted, optimizing your final bundle. Only the icons
-    you import are included in the bundle. However, explicitly importing icons
-    into each of many components in your app might become tedious, so you may
-    want to build a library.
-
-2.  **Build a Library**
-
-    Explicitly import icons just once in some init module. Then add them to the
-    library. Then reference any of them by icon name as a string from any
-    component. No need to import the icons into each component once they're in
-    the library.
-
-### Explicit Import
-
-For this example, we'll also reference the `@fortawesome/free-solid-svg-icons`
-module, so make sure you've added it to the project as well:
-
-```
-$ npm i --save @fortawesome/free-solid-svg-icons
-```
-
-or
-
-```
-$ yarn add @fortawesome/free-solid-svg-icons
-```
-
-Now, a simple React Native component might look like this:
-
-```javascript
-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'
-
-type Props = {}
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View>
-        <FontAwesomeIcon icon={ faCoffee } />
-      </View>
-    )
-  }
-}
-```
-
-Notice that the `faCoffee` icon is imported from
-`@fortawesome/free-solid-svg-icons` 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
-thousands of icons to include only those you use in your final bundled file.
-
-### Build a Library to Reference Icons Throughout Your App More Conveniently
-
-You probably want to use our icons in more than one component in your app,
-right?
-
-But with explicit importing, it could become tedious to import into each of
-your app's components every icon you want to reference in that component.
-
-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
-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
-imagination as to how this might scale up with lots of icons.
-
-Don't forget to add `@fortawesome/free-brands-svg-icons`:
-
-```
-$ npm i --save @fortawesome/free-brands-svg-icons
-```
-
-or
-
-```
-$ yarn add @fortawesome/free-brands-svg-icons
-```
-
-In `App.js`, where our app is initialized:
-
-```javascript
-// ...
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
-
-library.add(fab, faCheckSquare, faCoffee)
-```
-
-OK, so what's happening here?
-
-In our call to <span style="white-space:nowrap;">`library.add()`</span> we're passing
-
-- `fab`: which represents _all_ of the brand icons in
-  <span style="white-space:nowrap;">`@fortawesome/free-brands-svg-icons`</span>.
-  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
-  allows us to refer to them throughout our app by their icon string names,
-  `"check-square"` and `"coffee"`, 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`
-component, and when you use it, supply the icon prop an icon name as a string.
-
-We'll make `Beverage.js` a functional component:
-
-```javascript
-import React from 'react'
-import { View, Text } from 'react-native'
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-
-export const Beverage = () => (
-  <View>
-    <FontAwesomeIcon icon="check-square" />
-    <Text>Favorite beverage: </Text><FontAwesomeIcon icon="coffee" />
-  </View>
-)
-```
-
-There's one another piece of magic that's happening in the background when
-providing icon names as strings like this: the `fas` prefix (for Font Awesome
-Solid) is being inferred as the default. Later, we'll look at what that means
-and how we can do something different than the default.
-
-Now suppose `Gadget.js` looks like this:
-
-```javascript
-import React from 'react'
-import { View, Text } from 'react-native'
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
-
-export const Gadget = () => (
-  <View>
-    <FontAwesomeIcon icon="check-square" />
-    <Text>Popular gadgets come from vendors like:</Text>
-    <FontAwesomeIcon icon={['fab', 'apple']} />
-    <FontAwesomeIcon icon={['fab', 'microsoft']} />
-    <FontAwesomeIcon icon={['fab', 'google']} />
-  </View>
-)
-```
-
-Notice:
-
-- We used the `"check-square"` 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.
-- We used the `"apple"`, `"microsoft"`, and `"google"` brand icons, which were
-  never explicitly _individually_ imported, but they're available to us by
-  name as strings because `fab` was added to our library in `App.js`, and
-  `fab` includes all of those icons.
-- We added the `fab` prefix to reference those brand icons.
-
-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.
-
-The `"check-square"` 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.
-
-However, the `"apple"`, `"microsoft"`, and `"google"` brand icons live in the
-package `@fortawesome/free-brands-svg-icons`. So we need to specify a
-different prefix for them—not the default `fas`, but `fab`, for Font Awesome
-_Brand_.
-
-When specifying a prefix with an icon name, both are given as strings.
-
-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"`.
-  (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,
-  and the second element is the icon name: `{["fab", "apple"]}`
-
-### Color
-
-Priority: The color prop takes priority over setting color via StyleSheet. So if you end up with both set,
-the prop wins.
-
-In fact, when provided a style object (suppose you've declared other style properties other
-than `color`), if the color prop has been specified, then any color property on the style object is removed
- before the style object is passed through to the underlying SVG rendering library. This is to avoid ambiguity.
-
-Using the color prop should be preferred over using the StyleSheet.
-
-#### Color Prop
-
-```javascript
-  <FontAwesomeIcon icon={ faCoffee } color={ 'red' } />
-```
-
-#### Color StyleSheet property
-
-To set the color of an icon, provide a `StyleSheet` like this:
-
-```javascript
-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'
-
-
-type Props = {}
-
-const style = StyleSheet.create({
-  icon: {
-    color: 'blue'
-  }
-})
-
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View>
-        <FontAwesomeIcon icon={ faCoffee } style={ style.icon } />
-      </View>
-    )
-  }
-}
-```
-
-### Size
-
-Default: 16
-
-To adjust the size, use the `size` prop:
-
-```javascript
-<FontAwesomeIcon icon={ faCoffee } size={ 32 } />
-```
-
-Note: the `height` and `width` props have been deprecated.
-
-## Features
-
-### Duotone
-
-```javascript
-<FontAwesomeIcon icon="coffee" 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.
-
-### Masking
-
-```javascript
-<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
-```
-
-[More on masking...](https://fontawesome.com/how-to-use/on-the-web/styling/masking)
-
-### Power Transforms
-
-```javascript
-<FontAwesomeIcon icon="arrows" transform="shrink-6 left-4" />
-<FontAwesomeIcon icon="arrow-rightr" transform={{ rotate: 42 }} />
-```
-
-[More on power transforms...](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)
-
-## Frequent questions
-
-### How do I import the same icon from two different styles?
-
-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'
-
-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).
+Official documentation is hosted at fontawesome.com: [Check it out here](https://fontawesome.com/docs/web/use-with/react-native/)
 
 ## How to Help
 
-Review the following docs before diving in:
+1. Review the following docs before diving in:
 
 - [CONTRIBUTING.md](CONTRIBUTING.md)
 - [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
 
-And then:
-
-1.  Check the existing issues and see if you can help!
+2.  Check the existing issues and see if you can help!
 
 ## Contributors
 
 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)                        |
+| Greg Marut        | [@gregmarut](https://github.com/gregmarut)                |
+| 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) {
@@ -75,67 +74,67 @@ function normalizeIconArgs(icon) {
 }
 
 function FontAwesomeIcon(props) {
-  var iconArgs = props.icon,
-      maskArgs = props.mask,
-      height = props.height,
-      width = props.width,
-      size = props.size;
-
-  var style = _reactNative.StyleSheet.flatten(props.style);
+  var _props = _objectSpread({
+    icon: null,
+    mask: null,
+    maskId: null,
+    transform: null,
+    style: {},
+    color: null,
+    secondaryColor: null,
+    secondaryOpacity: null,
+    size: DEFAULT_SIZE
+  }, props);
+
+  var iconArgs = _props.icon,
+      maskArgs = _props.mask,
+      maskId = _props.maskId,
+      height = _props.height,
+      width = _props.width,
+      size = _props.size;
+
+  var style = _reactNative.StyleSheet.flatten(_props.style);
 
   var iconLookup = normalizeIconArgs(iconArgs);
-  var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
+  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;
   }
 
   var _abstract = renderedIcon["abstract"]; // This is the color that will be passed to the "fill" prop of the Svg element
 
-  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)
+  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 +150,39 @@ 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,
-  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.
 
-};
+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;
+    }
+  }
+}
 
-var convertCurry = _converter["default"].bind(null, _react["default"].createElement);
+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.1",
+  "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,16 @@
     "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>",
+    "Greg Marut <github.com/gregmarut>"
   ],
   "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 +41,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/)