import React from 'react'
import styled from 'styled-components'

import { colors } from '@auth0/cosmos/tokens'

const StyledIcon = styled.i`
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  svg #shape {
    fill: ${colors.base.grayLightest};
  }
`
const IconSketch = props => {
  return (
    <StyledIcon>
      <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <g id="Icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          <g id="shape" fill="#000000" fillRule="nonzero">
            <path
              d="M2.36118998,7.77045455 L10,17.3516761 L17.63881,7.77045455 L2.36118998,7.77045455 Z M1.375,6.82045455 L18.625,6.82045455 C19.0229221,6.82045455 19.2444685,7.28042674 18.996407,7.59156578 L10.371407,18.4097476 C10.1812437,18.648266 9.8187563,18.648266 9.62859303,18.4097476 L1.00359303,7.59156578 C0.755531547,7.28042674 0.977077897,6.82045455 1.375,6.82045455 Z M4.1426035,4.02833072 L1.76926066,7.5603763 C1.62294841,7.77812045 1.32782239,7.83602745 1.11007825,7.6897152 C0.892334099,7.54340296 0.8344271,7.24827694 0.980739344,7.03053279 L4.35573934,2.00780552 C4.62769076,1.60308322 5.25998542,1.82184194 5.22368163,2.30809264 L4.85873649,7.19614574 L10,17.0839899 L15.1412635,7.19614574 L14.7763184,2.30809264 C14.7400146,1.82184194 15.3723092,1.60308322 15.6442607,2.00780552 L19.0192607,7.03053279 C19.1655729,7.24827694 19.1076659,7.54340296 18.8899218,7.6897152 C18.6721776,7.83602745 18.3770516,7.77812045 18.2307393,7.5603763 L15.8573965,4.02833072 L16.0986816,7.26008917 C16.1052546,7.3481274 16.0871624,7.43625542 16.0464352,7.51458316 L10.4214352,18.332765 C10.2440454,18.6739268 9.7559546,18.6739268 9.57856477,18.332765 L3.95356477,7.51458316 C3.91283764,7.43625542 3.89474538,7.3481274 3.90131837,7.26008917 L4.1426035,4.02833072 Z M9.89668687,1.4226802 C9.94300026,1.41240171 9.99054943,1.40912495 10.0376507,1.41284992 L15.2848624,1.79900836 C15.5464902,1.81826235 15.7429729,2.04596197 15.7237189,2.3075897 C15.7044649,2.56921744 15.4767653,2.76570018 15.2151376,2.74644619 L11.2740278,2.45250398 L15.9542405,6.95307213 C16.143333,7.13490662 16.1492169,7.43560242 15.9673824,7.62469501 C15.7855479,7.81378759 15.4848521,7.81967145 15.2957595,7.63783696 L10,2.545349 L4.70424046,7.63783696 C4.51514788,7.81967145 4.21445207,7.81378759 4.03261759,7.62469501 C3.8507831,7.43560242 3.85666695,7.13490662 4.04575954,6.95307213 L8.72157613,2.45673133 L4.78486243,2.74644619 C4.5232347,2.76570018 4.29553507,2.56921744 4.27628108,2.3075897 C4.2570271,2.04596197 4.45350984,1.81826235 4.71513757,1.79900836 L9.89668687,1.4226802 Z"
              id="Shape"
            />
          </g>
        </g>
      </svg>
    </StyledIcon>
  )
}

export default IconSketch
