Add BrandIcon component

jest.mocks.js

@@ -10,6 +10,8 @@ const getIconType = (prefix) => {
       return 'solid'
     case 'fal':
       return 'light'
+    case 'fab':
+      return 'brand'
     default:
       throw new Error()
   }

src/components/BrandIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+
+import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
+import theme from '../styles/theme'
+
+type Props = {
+  name: BrandIconName
+  color?: string
+  size?: number
+}
+
+const BrandIcon = ({ name, color, size }: Props) => {
+  const icon = BrandIcons[name]
+  const iconColor = color ?? theme.color.primary
+  const iconSize = size ?? theme.icon.size.large
+
+  return <FontAwesomeIcon icon={icon as IconProp} color={iconColor} size={iconSize} />
+}
+
+export default BrandIcon

src/components/__tests__/BrandIcon.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { render } from '@testing-library/react-native'
+
+import { theme } from '../../styles'
+import BrandIcon from '../BrandIcon'
+
+describe('BrandIcon', () => {
+  describe('Rendering', () => {
+    test('Normal', () => {
+      const { toJSON } = render(<BrandIcon name="wikipedia-w" />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('With color', () => {
+      const { toJSON } = render(<BrandIcon name="wikipedia-w" color={theme.color.error} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('With size', () => {
+      const { toJSON } = render(<BrandIcon name="wikipedia-w" size={20} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+})

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BrandIcon Rendering Normal 1`] = `
+<Icon
+  color="#0066B1"
+  name="wikipedia-w"
+  size={16}
+  type="brand"
+/>
+`;
+
+exports[`BrandIcon Rendering With color 1`] = `
+<Icon
+  color="#EA554B"
+  name="wikipedia-w"
+  size={16}
+  type="brand"
+/>
+`;
+
+exports[`BrandIcon Rendering With size 1`] = `
+<Icon
+  color="#0066B1"
+  name="wikipedia-w"
+  size={20}
+  type="brand"
+/>
+`;

src/lib/BrandIcons.ts

@@ -2,10 +2,11 @@ import { IconName as FontawesomeIconName } from '@fortawesome/fontawesome-svg-co
 import { IconDefinition } from '@fortawesome/free-brands-svg-icons'
 import { faWikipediaW } from '@fortawesome/free-brands-svg-icons/faWikipediaW'
 
-type IconName = Extract<FontawesomeIconName, 'wikipedia-w'>
+type BrandIconName = Extract<FontawesomeIconName, 'wikipedia-w'>
 
-const BrandIcons: { [key in IconName]: IconDefinition } = {
+const BrandIcons: { [key in BrandIconName]: IconDefinition } = {
   'wikipedia-w': faWikipediaW,
 }
 
 export default BrandIcons
+export type { BrandIconName }