Add LinkedIn icon

Author: zoltantothcom

src/components/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { ICON_TWITTER, ICON_FACEBOOK } from '../static/icons';
+import { ICON_TWITTER, ICON_FACEBOOK, ICON_LINKEDIN } from '../static/icons';
 
 const FooterContainer = styled.footer`
   display: flex;
@@ -11,7 +11,7 @@ const FooterContainer = styled.footer`
     border: 1px solid ${props => props.theme.buttonBackground};
     border-radius: 50%;
     display: inline-flex;
-    margin: 1rem;
+    margin: 0.75rem;
     padding: 0.5rem;
 
     :hover svg,
@@ -37,6 +37,12 @@ const Footer = () => (
     <a href="https://www.facebook.com/sharer.php?u=https://designpatternsgame.com/" target="_blank">
       {ICON_FACEBOOK}
     </a>
+    <a
+      href="https://www.linkedin.com/shareArticle?mini=true&url=https://designpatternsgame.com&title=Design%20Patterns%20Game&summary=A%20game%20to%20test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript."
+      target="_blank"
+    >
+      {ICON_LINKEDIN}
+    </a>
   </FooterContainer>
 );
 

src/static/icons/index.js

@@ -51,3 +51,12 @@ export const ICON_TWITTER = (
     <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z" />
   </svg>
 );
+
+export const ICON_LINKEDIN = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
+    <title>linkedin</title>
+    <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z" />
+    <path d="M2 12h6v18h-6v-18z" />
+    <path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z" />
+  </svg>
+);