// @flow
import React from 'react';

import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

type Props = {
  className?: string,
}

const { color } = ApoliticalBrand;

const TwitterIcon = ({ className }: Props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="22" viewBox="0 0 26 22" className={className}>
    <desc>Twitter icon</desc>
    <g fill="none" fillRule="evenodd">
      <g fill={`${color.slate}`}>
        <g>
          <g>
            <g>
              <path d="M22.231 3.615C23.3 2.94 24.12 1.872 24.503.599c-1 .626-2.104 1.078-3.283 1.323C20.279.862 18.934.2 17.446.2c-2.854 0-5.168 2.441-5.168 5.452 0 .428.043.844.132 1.242-4.295-.228-8.104-2.396-10.656-5.697-.445.808-.7 1.744-.7 2.742 0 1.891.913 3.56 2.3 4.54-.847-.028-1.644-.276-2.342-.682v.067c0 2.643 1.78 4.847 4.149 5.347-.435.127-.89.191-1.364.191-.333 0-.658-.032-.972-.096.657 2.165 2.566 3.744 4.83 3.786-1.771 1.463-4 2.334-6.421 2.334-.418 0-.83-.024-1.234-.075C2.288 20.897 5.005 21.8 7.925 21.8c9.511 0 14.709-8.309 14.709-15.514 0-.237-.003-.473-.014-.706 1.01-.769 1.89-1.73 2.58-2.823-.927.434-1.924.727-2.969.858z" transform="translate(-235 -790) translate(0 120) translate(135 657) translate(100 13)" />
            </g>
          </g>
        </g>
      </g>
    </g>
  </svg>

);

TwitterIcon.defaultProps = {
  className: '',
};

export default TwitterIcon;