Issue 72 online presence icons and links

src/components/Header/Header.js

@@ -11,6 +11,7 @@ import ToggleButton from "./ToggleButton/ToggleButton";
 import TechIcons from "./TechIcons/TechIcons";
 import TechNames from "./TechNames/TechNames";
 import TeamMembers from "./TeamMembers/TeamMembers";
+import SocialIcons from "./SocialIcons/SocialIcons";
 
 const Header = styled.div`
   ${headerStyle}
@@ -37,6 +38,7 @@ const header = () => (
       <HeaderIconsContainer>
         {settings.display === "icon" ? <TechIcons /> : <TechNames />}
         {settings.header.teamMembers ? <TeamMembers /> : null}
+        {settings.socialIcons ? <SocialIcons /> : null}
       </HeaderIconsContainer>
     ) : null}
   </Header>

src/components/Header/SocialIcons/SocialIcons.js

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import { socialIconsStyle } from "./SocialIcons.style";
+import IconDisplayer from "../../UI/Icons/IconDisplayer";
+import settings from "../../../../settings/settings";
+
+const SocialIcons = styled.div`
+  ${socialIconsStyle}
+`;
+
+const socialIcons = () => (
+  <SocialIcons>
+    {settings.header.socialLinks.map(social =>
+      settings.socialIcons[social.name] ? (
+        <a
+          key={social.name}
+          href={social.link}
+          aria-label={social.name}
+          size="small"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <IconDisplayer
+            key={social.name}
+            name={settings.socialIcons[social.name].name}
+            src={settings.socialIcons[social.name].icon}
+          />
+        </a>
+      ) : (
+        /* eslint-disable-next-line no-console */
+        console.warn(
+          `There is no icon path specified in the settings for ${social.name} social icon`
+        )
+      )
+    )}
+  </SocialIcons>
+);
+
+export default socialIcons;

src/components/Header/SocialIcons/SocialIcons.style.js

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+
+export const socialIconsStyle = css`
+  margin-left: auto;
+`;