text: import React from 'react';
  import PropTypes from 'prop-types';
  import Info from '../../info.json';
  
  import './style.scss';
  
  const SocialIcons = (props, context) => {
    const { theme: { colorPrimary } } = context;
    
    return (
      
      <div className="social-icons animate-icons">
          {Info.github &&
            <a target="_blank" rel="noopener noreferrer" href={Info.github} style={ { color: colorPrimary } }><i className="fab fa-github"></i></a>
          }
          {Info.twitter &&
            <a target="_blank" rel="noopener noreferrer" href={Info.twitter} style={ { color: colorPrimary } }><i className="fab fa-twitter"></i></a>
          }
          {Info.stackoverflow &&
            <a target="_blank" rel="noopener noreferrer" href={Info.stackoverflow} style={ { color: colorPrimary } }><i className="fab fa-stack-overflow"></i></a>
          }
          {Info.linkedin &&
            <a target="_blank" rel="noopener noreferrer" href={Info.linkedin} style={ { color: colorPrimary } }><i className="fab fa-linkedin"></i></a>
          }
          {Info.medium &&
            <a target="_blank" rel="noopener noreferrer" href={Info.medium} style={ { color: colorPrimary } }><i className="fab fa-medium"></i></a>
          }
          {Info.dev &&
            <a className="devto" target="_blank" rel="noopener noreferrer" href="https://dev.to/flexdinesh">
              <svg viewBox="0 0 408 410"><path style={ { fill: colorPrimary } } d="M10.5 2.5C5.6 4.2 2.4 7.8 1 12.9.3 15.6.1 77.2.2 207.1.5 396.6.5 397.5 2.5 401c1.2 1.9 3.6 4.3 5.5 5.5 3.5 2 4.2 2 196 2s192.5 0 196-2c1.9-1.2 4.3-3.6 5.5-5.5 2-3.5 2-4.2 2-196s0-192.5-2-196c-1.2-1.9-3.6-4.3-5.5-5.5-3.5-2-4.4-2-194.5-2.2-162.9-.2-191.6 0-195 1.2zm96.8 124c9 1.9 15.5 5.6 22.2 12.6 6.1 6.4 9.9 13.7 11.5 21.9 1.3 6.9 1.3 81.1 0 88.1-3.4 18.2-18.9 32.4-38.1 34.9-4 .5-17.4 1-29.6 1H51V125h24.8c17.6 0 26.6.4 31.5 1.5zm130.7 13V154h-51v36h31v29h-31l.2 18.2.3 18.3 25.3.3 25.2.2v29h-29.5c-32.8 0-37.9-.6-43.1-5.2-7.3-6.4-6.9-2.3-7.2-72.6-.2-43.8.1-64.5.8-67.3 1.4-5.2 7.3-11.6 12.5-13.4 3.1-1.1 10.9-1.4 35.3-1.5H238v14.5zm48.9-12.3c.4 1.3 6.8 25.6 14.2 54 7.4 28.5 13.6 51.2 13.8 50.5.3-.7 6.6-24.8 14.1-53.7l13.7-52.5 15.6-.3c11.8-.2 15.7.1 15.7 1s-34.6 132.4-36.6 139c-1.4 4.6-8.9 14-13.1 16.5-5.3 3-13.1 3.5-17.9 1-4.3-2.2-10-8.8-12.9-15-1.8-3.8-31.2-112-38-140l-.7-2.7h15.6c15.3 0 15.7 0 16.5 2.2z"/><path style={ { fill: colorPrimary } } d="M80 205v51.2l10.3-.4c8.9-.3 10.8-.7 14.8-3 7.8-4.6 7.9-4.9 7.9-48.4 0-42.4 0-42.4-7.3-47.2-3.6-2.4-5.1-2.7-14.9-3.1l-10.8-.3V205z"/></svg>
            </a>
          }
        </div>
    );
  };
  
  SocialIcons.contextTypes = {
    theme: PropTypes.any
  };
  
  export default SocialIcons;