@rocketsofawesome/mirage/src/core/icons/Pencil.js

[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)

import React from 'react'
import styled from 'styled-components'
import { Wiggle } from 'SRC'

const Pencil = styled(({className}) => {
  return (
    <svg
      className={className}
      version='1.1'
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 600 600'>
      <path className='Pencil' d='M405.32,170.07L304.6,4.44c0,0-6.49-4.74-13.47,0l-98.17,167.24l-3.04,380.09
      	c7.38,38.23,36.49,36.92,36.49,36.92c69.07,8.25,89.92,5.21,122.06,3.04c0,0,55.17,0.87,57.83-49.86L405.32,170.07z M268.98,79.16
      	h60.38c0,0,48.38,78.68,45.61,87.31s-36.81,43.6-36.81,43.6s-6.2,2.17-11.41,0.27s-32.58-36.05-35.62-35.62
      	c-3.04,0.43-9.5,15.2-27.54,39.13c0,0-11.94-3.89-51.95-34.79L268.98,79.16z M345.92,246.23l-6.05,174.6c0,5.02-4.1,9.12-9.12,9.12
      	s-14.85,0.62-16.94-14.77l6.05-174.6c2.12-6.35,11.92-3.48,16.94-3.48h0.65C342.47,237.11,345.92,241.22,345.92,246.23z
      	 M282.02,420.58c-1.85,7.18-4.5,10-10,10H269c-5.5,0-10-4.5-10-10l-8.05-162.99c0-5.5,4.5-10,10-10h3.02c5.5,0,9.97,4.58,10,10
      	C273.97,257.59,283.86,413.4,282.02,420.58z M376.28,554.81c-16.94,19.76-104.25,39.42-153.12,11.08
      	c-21.5-14.33-10.75-54.41-10.75-54.41l173.97-3.58C386.38,507.9,394.52,532.87,376.28,554.81z M388.01,492.26
      	c-49.52,5.1-125.32,10.32-179.84,0c0,0-1.41-25.19,0-29.54c-3.04-2.17,178.64-2.17,178.64-2.17
      	C393.98,462.5,388.01,492.26,388.01,492.26z'/>
    </svg>
  )
})`
  .Pencil {
    transform-origin: 50% 50%;
    fill: ${props => props.theme.colors.rocketBlue};
  }
  &:hover {
    ${props => props.animated && Wiggle}
  }
`

/** @component */
export default Pencil