import React from 'react';
import PropTypes from 'prop-types';
import useStylesVariables from '@fibery/vizydrop-styles-variables/useStylesVariables';

export const ConnectIcon = ({color, className}) => {
    const {iconColorDefault} = useStylesVariables();

    return (
        <svg className={className} width="30" height="32" viewBox="0 0 30 32" version="1.1." style={{display: `block`}}>
            <path fill={color || iconColorDefault} fillRule="evenodd" d="M20.817275,0.93934 C21.3847688,1.52513 21.3847688,2.47487 20.817275,3.06066 L14.9398688,9.12766 L21.6718094,16.0768 L27.5131781,10.047 C28.0806719,9.46117 29.0007906,9.46117 29.5682844,10.047 C30.1356813,10.6327 30.1356813,11.5825 29.5682844,12.1683 L23.7268187,18.1981 L27.4970969,22.0899 C28.0645906,22.6757 28.0645906,23.6255 27.4970969,24.2112 C26.9296031,24.797 26.0094844,24.797 25.4420875,24.2112 L24.0589062,22.7835 L19.2189344,27.7797 C15.5814719,31.5345 9.70978125,31.5759 6.02311594,27.9039 L2.96501438,31.0607 C2.39753031,31.6464 1.47746969,31.6464 0.909985625,31.0607 C0.342504469,30.4749 0.342504469,29.5251 0.909985625,28.9393 L3.96669219,25.784 L3.85246688,25.6662 C0.174280063,21.8701 0.174389531,15.7144 3.85228281,11.9178 L8.69245813,6.92135 L7.90652094,6.11006 C7.33904656,5.52427 7.33904656,4.57452 7.90652094,3.98874 C8.474005,3.40295 9.39407531,3.40295 9.96155938,3.98874 L12.8848594,7.00634 L18.7622656,0.93934 C19.3297594,0.353553 20.2497812,0.353553 20.817275,0.93934 Z M10.7475063,9.04267 L5.90734063,14.0391 C3.36425563,16.6643 3.36441063,20.9202 5.90715656,23.5445 C5.90718563,23.5445 5.90713719,23.5445 5.90715656,23.5445 L7.95549125,25.6582 C10.4985375,28.2833 14.6208594,28.2835 17.1638281,25.6584 L22.0038969,20.6621 L10.7475063,9.04267 Z" />
        </svg>
    );
};

ConnectIcon.displayName = `ConnectIcon`;

ConnectIcon.propTypes = {
    color: PropTypes.string,
    className: PropTypes.string,
};