Add support for duotone icons (#59)

Author: schonfeld

Diff for: README.md

@@ -25,6 +25,7 @@
     + [Change Color with a StyleSheet](#color-stylesheet-property)
   * [Size](#size)  
 - [Features](#features)
+  * [Duotone](#duotone)
   * [Masking](#masking)
   * [Power Transforms](#power-transforms)    
 - [Frequent questions](#frequent-questions)
@@ -98,7 +99,13 @@ $ npm i --save @fortawesome/pro-solid-svg-icons
 $ npm i --save @fortawesome/pro-regular-svg-icons
 $ npm i --save @fortawesome/pro-light-svg-icons
 ```
-**Duotone icons are currently in pre-release and are coming soon to this component.**
+
+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
 
@@ -375,6 +382,14 @@ 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

Diff for: index.d.ts

@@ -17,6 +17,8 @@ export interface Props {
   width?: number;
   size?: number;
   color?: string;
+  secondaryColor?: string;
+  secondaryOpacity?: number;
   mask?: IconProp;
   transform?: string | Transform;
   style?: FontAwesomeIconStyle;

Diff for: package-lock.json

@@ -9,6 +9,7 @@ const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
 
 export const DEFAULT_SIZE = 16
 export const DEFAULT_COLOR = '#000'
+export const DEFAULT_SECONDARY_OPACITY = 0.4
 
 // Deprecated height and width defaults
 const DEFAULT_HEIGHT = windowHeight * 0.1
@@ -66,6 +67,13 @@ export default function FontAwesomeIcon(props) {
   // This is the color that will be passed to the "fill" prop of the Svg element
   const 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
+  const secondaryColor = props.secondaryColor || null
+
+  // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
+  const 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
   // 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.
@@ -89,7 +97,14 @@ export default function FontAwesomeIcon(props) {
     resolvedHeight = resolvedWidth = size || DEFAULT_SIZE
   }
 
-  const extraProps = { height: resolvedHeight, width: resolvedWidth, fill: color, style: modifiedStyle }
+  const extraProps = {
+    height: resolvedHeight,
+    width: resolvedWidth,
+    fill: color,
+    secondaryFill: secondaryColor,
+    secondaryOpacity: secondaryOpacity,
+    style: modifiedStyle
+  }
 
   Object.keys(props).forEach(key => {
     if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
@@ -112,6 +127,10 @@ FontAwesomeIcon.propTypes = {
 
   color: PropTypes.string,
 
+  secondaryColor: PropTypes.string,
+
+  secondaryOpacity: PropTypes.number,
+
   style: PropTypes.oneOfType([
     PropTypes.shape({ ...ViewPropTypes.style }),
     PropTypes.array
@@ -138,6 +157,8 @@ FontAwesomeIcon.defaultProps = {
   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.

Diff for: src/components/FontAwesomeIcon.js

@@ -31,6 +31,19 @@ const faCircle = {
   ]
 }
 
+const faAcorn = {
+  prefix: 'fad',
+  iconName: 'acorn',
+  icon: [
+    640,
+    512,
+    [],
+    'f0f4',
+    ['M32 256h384a258.87 258.87 0 0 1-143.11 231.55L224 512l-48.89-24.45A258.87 258.87 0 0 1 32 256z', 'M448 160v32a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32v-32a96 96 0 0 1 96-96h106a132.41 132.41 0 0 1 29.41-58.64 15.7 15.7 0 0 1 11.31-5.3 15.44 15.44 0 0 1 12 4.72L266 16.1a16 16 0 0 1 .66 21.9 84.32 84.32 0 0 0-15.16 26H352a96 96 0 0 1 96 96z']
+  ]
+}
+
+
 fontawesome.library.add(faCoffee, faCircle)
 
 test.skip('renders with icon specified as array', () => {
@@ -212,3 +225,60 @@ describe('when style is given an array and not an object', () => {
     expect(tree.props.style.filter(s => s.backgroundColor === 'yellow').length).toEqual(1)
   })
 });
+
+describe('duotone support', () => {
+  describe('when NO secondary color or opacity are given', () => {
+    test('use the primary color at 40% opacity as the secondary color', () => {
+      const styles = StyleSheet.create({
+        icon: {
+          color: 'blue'
+        }
+      })
+      const tree = renderer.create(<FontAwesomeIcon icon={ faAcorn } style={ styles.icon }/>).toJSON()
+      const primaryLayer = tree.children[0].children[0].children[1]
+      const secondaryLayer = tree.children[0].children[0].children[0]
+      expect(primaryLayer.props.fill[1].toString(16)).toEqual('ff0000ff')
+      expect(secondaryLayer.props.fillOpacity).toEqual(0.4)
+    })
+  })
+  describe('when secondary opacity was given, but NO secondary color is given', () => {
+    test('use the primary color with the secondary opacity given', () => {
+      const styles = StyleSheet.create({
+        icon: {
+          color: 'blue'
+        }
+      })
+      const tree = renderer.create(<FontAwesomeIcon icon={ faAcorn } style={ styles.icon } secondaryOpacity={ 0.123 } />).toJSON()
+      const primaryLayer = tree.children[0].children[0].children[1]
+      const secondaryLayer = tree.children[0].children[0].children[0]
+      expect(primaryLayer.props.fill[1].toString(16)).toEqual('ff0000ff')
+      expect(secondaryLayer.props.fillOpacity).toEqual(0.123)
+    })
+  })
+  describe('when secondary color is given, but no secondary opacity', () => {
+    test('use the given secondary color, with opacity set to 1', () => {
+      const styles = StyleSheet.create({
+        icon: {
+          color: 'blue'
+        }
+      })
+      const tree = renderer.create(<FontAwesomeIcon icon={ faAcorn } style={ styles.icon } secondaryColor={ "red" } />).toJSON()
+      const secondaryLayer = tree.children[0].children[0].children[0]
+      expect(secondaryLayer.props.fill[1].toString(16)).toEqual('ffff0000')
+      expect(secondaryLayer.props.fillOpacity).toEqual(1)
+    })
+  })
+  describe('when secondary color and secondary opacity are given', () => {
+    test('use both the given secondary color and opacity', () => {
+      const styles = StyleSheet.create({
+        icon: {
+          color: 'blue'
+        }
+      })
+      const tree = renderer.create(<FontAwesomeIcon icon={ faAcorn } style={ styles.icon } secondaryColor={ "red" } secondaryOpacity={ 0.123 } />).toJSON()
+      const secondaryLayer = tree.children[0].children[0].children[0]
+      expect(secondaryLayer.props.fill[1].toString(16)).toEqual('ffff0000')
+      expect(secondaryLayer.props.fillOpacity).toEqual(0.123)
+    })
+  })
+})

Diff for: src/components/__tests__/FontAwesomeIcon.test.js

@@ -16,9 +16,15 @@ function convert(createElement, element, extraProps = {}) {
     return element
   }
 
+  const isDuotone = (element.children || []).length === 2
   const children = (element.children || []).map(
-    child => {
-      return convert(createElement, child)
+    (child, childIndex) => {
+      const isDuotoneSecondLayer = isDuotone && childIndex === 0;
+      const fill = isDuotoneSecondLayer
+        ? extraProps.secondaryFill
+        : extraProps.fill;
+      const fillOpacity = isDuotoneSecondLayer ? extraProps.secondaryOpacity : 1;
+      return convert(createElement, child, { ...extraProps, fill, fillOpacity });
     }
   )