import * as React from "react" ; import styled from "styled-components" ; import { colors } from "../colors" ; export interface LinkedInIconProps { className ? : string ; height ? : number ; width ? : number ; } const _LinkedInIcon = ( props ) => { const height = props . height || 23 ; const width = props . width || 23 ; return ( < svg width = { width } height = { height } viewBox = "0 0 50 50" xmlns = "http://www.w3.org/2000/svg" className = { props . className } > < g fill = "none" fillRule = "evenodd" stroke = "none" strokeWidth = "1" > < g fill = { colors . accent . CIVIL_GRAY_1 } > < path d = "M25,50 C38.8071194,50 50,38.8071194 50,25 C50,11.1928806 38.8071194,0 25,0 C11.1928806,0 0,11.1928806 0,25 C0,38.8071194 11.1928806,50 25,50 Z M25,47 C37.1502651,47 47,37.1502651 47,25 C47,12.8497349 37.1502651,3 25,3 C12.8497349,3 3,12.8497349 3,25 C3,37.1502651 12.8497349,47 25,47 Z M14,20.1180479 L14,34.6581834 L18.7100851,34.6581834 L18.7100851,20.1180479 L14,20.1180479 Z M16.6646962,13 C15.0534058,13 14,14.0858611 14,15.5115122 C14,16.9076331 15.0222711,18.0247614 16.6035556,18.0247614 L16.6336556,18.0247614 C18.2759867,18.0247614 19.2988222,16.9076331 19.2988222,15.5115122 C19.2682519,14.0858611 18.2759867,13 16.6646962,13 Z M30.5769213,20.1180479 C28.076176,20.1180479 26.9565501,21.5293199 26.3314108,22.5193527 L26.3314108,20.4598644 L21.6207614,20.4598644 C21.6828427,21.8242356 21.6207614,35 21.6207614,35 L26.3314108,35 L26.3314108,26.8795887 C26.3314108,26.445032 26.3619812,26.0115368 26.4865199,25.7004084 C26.826932,24.83226 27.6020069,23.9334233 28.9032674,23.9334233 C30.6083381,23.9334233 31.2899149,25.2667202 31.2899149,27.2206333 L31.2899149,34.999614 L35.9998119,34.999614 L36,26.6627446 C36,22.1966439 33.6763743,20.1180479 30.5769213,20.1180479 Z M30.5769213,20.1180479" / > < /g> < /g> < /svg>); } ; export const LinkedInIcon = styled ( _LinkedInIcon ) `
  &:hover g > g {
    fill: ${ colors . accent . CIVIL_BLUE };
  }
` ;