Integrate font-awesome. Use it in SideBar.

src/components/SideBar/Item.js

@@ -15,6 +15,7 @@ import type { Location } from 'react-router'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import Icon from 'components/base/Icon'
 
 const mapStateToProps: MapStateToProps<*, *, *> = (state, { modal }: any) => ({
   // connect router here only to make components re-render
@@ -33,6 +34,7 @@ const Container = styled(Box).attrs({
   align: 'center',
   color: 'lead',
   p: 2,
+  flow: 2,
 })`
   cursor: pointer;
   color: ${p => (p.isActive ? p.theme.colors.white : '')};
@@ -46,12 +48,6 @@ const Container = styled(Box).attrs({
   }
 `
 
-const IconWrapper = styled(Box)`
-  width: 25px;
-  height: 25px;
-  border: 2px solid ${p => (p.isActive ? p.theme.colors.blue : 'rgba(255, 255, 255, 0.1)')};
-`
-
 type Props = {
   children: string,
   linkTo?: string | null,
@@ -86,9 +82,7 @@ function Item({
       }
       isActive={isActive}
     >
-      <IconWrapper isActive={isActive} mr={2}>
-        {icon || null}
-      </IconWrapper>
+      {icon && <Icon fontSize={3} color={isActive ? 'blue' : void 0} name={icon} />}
       <div>
         <Text fontWeight="bold" fontSize={1}>
           {children}

src/components/SideBar/index.js

@@ -67,10 +67,18 @@ class SideBar extends PureComponent<Props> {
           <Box flow={2}>
             <CapsSubtitle>{'Menu'}</CapsSubtitle>
             <div>
-              <Item linkTo="/">{'Dashboard'}</Item>
-              <Item modal="send">{'Send'}</Item>
-              <Item modal="receive">{'Receive'}</Item>
-              <Item linkTo="/settings">{'Settings'}</Item>
+              <Item icon="bar-chart" linkTo="/">
+                {'Dashboard'}
+              </Item>
+              <Item icon="upload" modal="send">
+                {'Send'}
+              </Item>
+              <Item icon="download" modal="receive">
+                {'Receive'}
+              </Item>
+              <Item icon="cog" linkTo="/settings">
+                {'Settings'}
+              </Item>
             </div>
           </Box>
           <Box flow={2}>

src/components/base/Icon.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import { fontSize, color } from 'styled-system'
+
+const Container = styled.div`
+  ${fontSize};
+  ${color};
+`
+
+export default ({ name, ...props }: { name: string }) => (
+  <Container {...props}>
+    <i className={`fa fa-${name}`} />
+  </Container>
+)

src/renderer/head.js

@@ -0,0 +1,8 @@
+const list = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css']
+
+list.forEach(href => {
+  const tag = document.createElement('link')
+  tag.setAttribute('rel', 'stylesheet')
+  tag.setAttribute('href', href)
+  document.head.appendChild(tag)
+})

src/renderer/index.js

@@ -17,6 +17,7 @@ import { getLanguage } from 'reducers/settings'
 import App from 'components/App'
 
 import 'styles/global'
+import 'renderer/head'
 
 if (__PROD__ && __SENTRY_URL__) {
   Raven.config(__SENTRY_URL__, { allowSecretKey: true }).install()