Enable rotation of icons

jest.mocks.js

@@ -25,6 +25,7 @@ jest.mock('@fortawesome/react-native-fontawesome', () => ({
       size={faIcon.size}
       style={faIcon.style}
       type={getIconType(faIcon.icon.prefix)}
+      transform={faIcon.transform}
     />
   ),
 }))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.58.0",
+  "version": "1.59.0",
   "main": "src/index.ts",
   "repository": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",

src/components/Icon.tsx

@@ -12,18 +12,19 @@ export type IconAppearanceProps = {
   color?: string
   size?: number
   testID?: string
+  rotation?: number
 }
 
 export type IconProps = IconAppearanceProps & {
   name: IconName
 }
 
-export const Icon = ({ name, color, size, testID, style }: IconProps): React.ReactElement => {
-  const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any
+export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): React.ReactElement => {
   const iconStyle = style ?? 'light'
   const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid
   const iconColor = color ?? theme.color.primary
   const iconSize = size ?? theme.icon.size.large
+  const transform = rotation ? { rotate: rotation } : undefined
 
-  return <FontAwesomeIconTypeErased icon={icon} color={iconColor} size={iconSize} testID={testID} />
+  return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} transform={transform} />
 }

src/components/__tests__/Icon.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { render } from '@testing-library/react-native'
+
+import { Icon } from '../Icon'
+
+describe('Icon', () => {
+  test('Light icon', () => {
+    const { toJSON } = render(<Icon name="info-circle" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('Solid icon', () => {
+    const { toJSON } = render(<Icon name="info-circle" style="solid" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('With color and size', () => {
+    const { toJSON } = render(<Icon name="info-circle" color="#ff0000" size={32} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('With rotation', () => {
+    const { toJSON } = render(<Icon name="info-circle" rotation={90} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

src/components/__tests__/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon Light icon 1`] = `
+<Icon
+  color="#0066B1"
+  name="circle-info"
+  size={16}
+  type="light"
+/>
+`;
+
+exports[`Icon Solid icon 1`] = `
+<Icon
+  color="#0066B1"
+  name="circle-info"
+  size={16}
+  type="solid"
+/>
+`;
+
+exports[`Icon With color and size 1`] = `
+<Icon
+  color="#ff0000"
+  name="circle-info"
+  size={32}
+  type="light"
+/>
+`;
+
+exports[`Icon With rotation 1`] = `
+<Icon
+  color="#0066B1"
+  name="circle-info"
+  size={16}
+  transform={
+    {
+      "rotate": 90,
+    }
+  }
+  type="light"
+/>
+`;