Use provided theme

1 files changed, 8 insertions, 8 deletions

diff --git a/src/components/font-awesome.js b/src/components/font-awesome.js
index b8aec1e..db14a8b 100644
--- a/src/components/font-awesome.js
+++ b/src/components/font-awesome.js
@@ -3,19 +3,19 @@ import { css } from '@emotion/core'
 
 const DEFAULT_SIZE = '20px'
 
-export const FontAwesome = ({ icon: outerIcon, size, fill, cssProp }) => {
-  const svgStyle = css`
+export const FontAwesome = p => {
+  const { icon: outerIcon, size, fill, cssProp } = p
+  const svgStyle = t => css`
     width: ${size || DEFAULT_SIZE};
     height: ${size || DEFAULT_SIZE};
-    ${fill
-      ? `& path {
-      fill: ${fill};
-    }`
-      : ''}
+    & path {
+      fill: ${fill || t.colours.main};
+    }
+    ${typeof cssProp === 'function' ? cssProp(t) : cssProp}
   `
   const { icon, iconName } = outerIcon
   return (
-    <svg css={[svgStyle, cssProp]} viewBox={`0 0 ${icon[1]} ${icon[1]}`}>
+    <svg css={svgStyle} viewBox={`0 0 ${icon[1]} ${icon[1]}`}>
       <path d={icon[4]} />
       <desc>{iconName}</desc>
     </svg>