Basic UI elements in place

website/src/ui/Icon.js

@@ -1,28 +1,32 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { sizeInfo } from './style'
 
-// See https://www.flaticon.com/packs/web-button-compilation for more icons
+// See https://www.flaticon.com/packs/free-basic-ui-elements
 
 export default class Icon extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     size: PropTypes.number,
-    margin: PropTypes.number
   }
 
   static defaultProps = {
-    size: 50,
-    margin: 5,
-    name: 'shapes'
+    size: 50
   }
 
   static svgs = {
     logout: require('icons/logout.svg'),
-    shapes: require('icons/shapes.svg')
+    profile: require('icons/profile.svg'),
+    placeholder: require('icons/placeholder.svg'),
   }
 
   render() {
-    return <img style={{ width: this.props.size, height: this.props.size, margin: this.props.margin }}
-      src={Icon.svgs[this.props.name]} />
+    let { size, name } = this.props
+    let source = Icon.svgs[name] || Icon.svgs['placeholder']
+    const margin = sizeInfo.iconMargin
+
+    size -= margin * 2
+
+    return <img style={{ width: size, height: size, margin }} src={source} />
   }
 }