text: import React, { Fragment }     from 'react';
  import PropTypes               from 'prop-types';
  
  const SocialIcon = ({ type, cssClass }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 40 40">
      {_getPath(type)}
    </svg>
  );
  
  const _getPath = (type) => {
    switch (type) {
      case "facebook":
        return <FacebookPath />;
      case "instagram":
        return <InstagramPath />;
      case "linkedin":
        return <LinkedInPath />;
      case "twitter":
        return <TwitterPath />;
    }
  
    return <DribblePath />;
  };
  
  const FacebookPath = () => (
    null //<path d="M20,4A15.36,15.36,0,0,0,13.7,5.28,16.27,16.27,0,0,0,8.63,8.73,15.83,15.83,0,0,0,4,20,15.84,15.84,0,0,0,5.23,26.2a15.64,15.64,0,0,0,3.4,5.07,16.27,16.27,0,0,0,5.07,3.45A15.36,15.36,0,0,0,20,36a15.36,15.36,0,0,0,6.25-1.28,16.42,16.42,0,0,0,8.52-8.52A15.36,15.36,0,0,0,36,20a15.13,15.13,0,0,0-1.28-6.15A16.42,16.42,0,0,0,26.2,5.28,15.36,15.36,0,0,0,20,4Zm1.38,16.44A22.42,22.42,0,0,0,15,23.79,20.36,20.36,0,0,0,10.2,29a12.56,12.56,0,0,1-3.54-8.37,9,9,0,0,1,.93.05,9.36,9.36,0,0,0,.94,0,34.11,34.11,0,0,0,6.05-.54,34.7,34.7,0,0,0,6-1.63A14.25,14.25,0,0,0,21.33,20.44Zm-2-4.33A31.79,31.79,0,0,1,8.53,18H6.76a13.39,13.39,0,0,1,7.09-9.84A51.34,51.34,0,0,1,19.36,16.11ZM12.17,30.88a19.09,19.09,0,0,1,10-7.88,40.57,40.57,0,0,1,2,9.65,12.68,12.68,0,0,1-4.23.69A13.65,13.65,0,0,1,12.17,30.88Zm17-20.48a30.58,30.58,0,0,1-7.39,4.73,55.65,55.65,0,0,0-5.32-8c.59-.13,1.17-.24,1.73-.34A9.66,9.66,0,0,1,20,6.66a13,13,0,0,1,5,1A14,14,0,0,1,29.21,10.4Zm-5.32,9.35-.44-1.08q-.25-.59-.45-1.08a35.92,35.92,0,0,0,8-5.12,15.83,15.83,0,0,1,1.72,3.59A12.15,12.15,0,0,1,33.34,20c-.92-.2-1.79-.36-2.61-.49a16,16,0,0,0-2.51-.2A23,23,0,0,0,23.89,19.75Zm.89,2.56A21.59,21.59,0,0,1,28.22,22a21.79,21.79,0,0,1,4.83.59,13.9,13.9,0,0,1-2.22,5.17,12.26,12.26,0,0,1-4.09,3.69c-.19-1.57-.44-3.12-.73-4.63A35.06,35.06,0,0,0,24.78,22.31Z"/>
  );
  
  const DribblePath = () => (
    <path d="M20,4A15.36,15.36,0,0,0,13.7,5.28,16.27,16.27,0,0,0,8.63,8.73,15.83,15.83,0,0,0,4,20,15.84,15.84,0,0,0,5.23,26.2a15.64,15.64,0,0,0,3.4,5.07,16.27,16.27,0,0,0,5.07,3.45A15.36,15.36,0,0,0,20,36a15.36,15.36,0,0,0,6.25-1.28,16.42,16.42,0,0,0,8.52-8.52A15.36,15.36,0,0,0,36,20a15.13,15.13,0,0,0-1.28-6.15A16.42,16.42,0,0,0,26.2,5.28,15.36,15.36,0,0,0,20,4Zm1.38,16.44A22.42,22.42,0,0,0,15,23.79,20.36,20.36,0,0,0,10.2,29a12.56,12.56,0,0,1-3.54-8.37,9,9,0,0,1,.93.05,9.36,9.36,0,0,0,.94,0,34.11,34.11,0,0,0,6.05-.54,34.7,34.7,0,0,0,6-1.63A14.25,14.25,0,0,0,21.33,20.44Zm-2-4.33A31.79,31.79,0,0,1,8.53,18H6.76a13.39,13.39,0,0,1,7.09-9.84A51.34,51.34,0,0,1,19.36,16.11ZM12.17,30.88a19.09,19.09,0,0,1,10-7.88,40.57,40.57,0,0,1,2,9.65,12.68,12.68,0,0,1-4.23.69A13.65,13.65,0,0,1,12.17,30.88Zm17-20.48a30.58,30.58,0,0,1-7.39,4.73,55.65,55.65,0,0,0-5.32-8c.59-.13,1.17-.24,1.73-.34A9.66,9.66,0,0,1,20,6.66a13,13,0,0,1,5,1A14,14,0,0,1,29.21,10.4Zm-5.32,9.35-.44-1.08q-.25-.59-.45-1.08a35.92,35.92,0,0,0,8-5.12,15.83,15.83,0,0,1,1.72,3.59A12.15,12.15,0,0,1,33.34,20c-.92-.2-1.79-.36-2.61-.49a16,16,0,0,0-2.51-.2A23,23,0,0,0,23.89,19.75Zm.89,2.56A21.59,21.59,0,0,1,28.22,22a21.79,21.79,0,0,1,4.83.59,13.9,13.9,0,0,1-2.22,5.17,12.26,12.26,0,0,1-4.09,3.69c-.19-1.57-.44-3.12-.73-4.63A35.06,35.06,0,0,0,24.78,22.31Z"/>
  );
  
  const InstagramPath = () => (
    <Fragment>
      <path d="M26.13,4.5H13.78a9.11,9.11,0,0,0-9.1,9.1V25.94a9.11,9.11,0,0,0,9.1,9.1H26.13a9.11,9.11,0,0,0,9.1-9.1V13.6A9.11,9.11,0,0,0,26.13,4.5Zm6,21.44a6,6,0,0,1-6,6H13.78a6,6,0,0,1-6-6V13.6a6,6,0,0,1,6-6H26.13a6,6,0,0,1,6,6V25.94Z"/><path class="cls-1" d="M20,11.87a7.9,7.9,0,1,0,7.91,7.9A7.91,7.91,0,0,0,20,11.87ZM20,24.6a4.83,4.83,0,1,1,4.83-4.83A4.82,4.82,0,0,1,20,24.6Z"/>
      <circle cx="27.87" cy="11.93" r="1.89"/>
    </Fragment>
  );
  
  const LinkedInPath = () => (
    <Fragment>
      <path d="M11.12,6.48a3.08,3.08,0,0,0-2.32,1,3.28,3.28,0,0,0-1,2.36,3.23,3.23,0,0,0,3.27,3.26,3.23,3.23,0,0,0,3.26-3.26,3.28,3.28,0,0,0-1-2.36A3.07,3.07,0,0,0,11.12,6.48Z"/>
      <rect x="8.45" y="15.06" width="5.32" height="18.46"/>
      <path d="M31.16,18.75a7.12,7.12,0,0,0-2.62-2.66,8,8,0,0,0-3.39-.86,7.1,7.1,0,0,0-3.48.69v-.86H16.35V33.52h5.32V21.67a4.51,4.51,0,0,1,1.38-.94,4.66,4.66,0,0,1,1.37-.34,2.52,2.52,0,0,1,1.55.34,1.77,1.77,0,0,1,.64.64,1.72,1.72,0,0,1,.3.91V33.52h5.24V22.28A7,7,0,0,0,31.16,18.75Z"/>
    </Fragment>
  );
  
  const TwitterPath = () => (
    <path d="M36.43,9.82a13.83,13.83,0,0,1-1.89.61c-.64.16-1.3.3-2,.43a7.48,7.48,0,0,0,1.8-1.61,9.05,9.05,0,0,0,1.23-2.08l-2.13.94a9.4,9.4,0,0,1-2.32.67A5.79,5.79,0,0,0,29,7.17a6.72,6.72,0,0,0-7.48,1.42,6.58,6.58,0,0,0-2,4.83,8.66,8.66,0,0,0,.19,1.51A18,18,0,0,1,12,12.85a20,20,0,0,1-6.11-5A7.18,7.18,0,0,0,5,11.24a6.09,6.09,0,0,0,2.94,5.59,5.93,5.93,0,0,1-3-.76v.1a6.56,6.56,0,0,0,1.51,4.3,6.46,6.46,0,0,0,3.79,2.32,6.15,6.15,0,0,1-.81.15,9.57,9.57,0,0,1-1,0,5.06,5.06,0,0,1-1.14-.19,6.3,6.3,0,0,0,2.28,3.32,6.75,6.75,0,0,0,4,1.42,13.07,13.07,0,0,1-8.33,2.84H3.57A18.37,18.37,0,0,0,8.4,32.59a18.71,18.71,0,0,0,5.49.81,18.55,18.55,0,0,0,8.24-1.75A18.77,18.77,0,0,0,31.79,21,19.93,19.93,0,0,0,33,14.18v-.86a13.16,13.16,0,0,0,1.9-1.65A17,17,0,0,0,36.43,9.82Z"/>
  );
  
  SocialIcon.propTypes = {
    cssClass: PropTypes.string,
    type:     PropTypes.oneOf(['dribbble', 'facebook', 'instagram', 'linkedin', 'twitter'])
  };
  
  export default SocialIcon;
  