Implement custom FontAwesome component to avoid cold cache issues

1 files changed, 23 insertions, 0 deletions

diff --git a/src/components/font-awesome.js b/src/components/font-awesome.js
new file mode 100644
index 0000000..6dc9e17
--- /dev/null
+++ b/src/components/font-awesome.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+const DEFAULT_SIZE = '20px'
+
+export const FontAwesome = ({ icon: outerIcon, size, fill }) => {
+  const svgStyle = css`
+    width: ${size || DEFAULT_SIZE};
+    height: ${size || DEFAULT_SIZE};
+    ${fill
+      ? `& path {
+      fill: ${fill};
+    }`
+      : ''}
+  `
+  const { icon, iconName } = outerIcon
+  return (
+    <svg css={svgStyle} viewBox={`0 0 ${icon[1]} ${icon[1]}`}>
+      <path d={icon[4]} />
+      <desc>{iconName}</desc>
+    </svg>
+  )
+}