@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
82 lines (78 loc) • 4.96 kB
JavaScript
import React from 'react'
import styled from 'styled-components'
import { Wiggle } from 'SRC'
const BoxIcon = styled(({className}) => {
return (
<svg className={className} version='1.1' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 600 600'>
<polygon className='Box_Body' points='57.06,376.93 236.34,464.25 531.85,456.09 529.14,538.65 236.51,550.65
57.06,451.21 '/>
<path className='Shirt_Outline' d='M304.6,407.55c-10.69,6.95-24.76,1.95-24.76,1.95c-12.38-6.3-21.5-22.15-21.5-22.15
s-20.85,2.61-43.66,14.99s-26.06,20.85-26.06,20.85s24.64,9.37,33.23,23.46c2.03,3.33,15.9-5.66,18.24-2.61
c7.57,9.87,3.91,18.66,3.91,18.66h139.44l-13.03-26.48c0,0,17.31,7.4,25.6,16.94c8.29,9.54,27.18-14.33,27.18-14.33
c0-13.68-58.92-51.48-58.92-51.48c-24.84-13.68-48.59-5.21-48.59-5.21S318.29,400.39,304.6,407.55z'/>
<path className='Shirt_Line_003' d='M243.03,448.89c40.07-10.06,68.13,3.9,130.94-6.28l3.52,8
c-43.14,2.51-67.57-2-132.77,4.13L243.03,448.89z'/>
<path className='Shirt_Line_002' d='M210.78,433.62c63.2,2.61,131.29-1.09,191.35-17.16c0,0-5-7.42-7.6-5.88
c-15.09,8.9-190.81,16.63-190.81,16.63L210.78,433.62z'/>
<path className='Shirt_Line_001_A' d='M210.76,403.43c-0.01-2.17,51.97-6.7,51.97-6.7l6.38,5.53
C253.62,407.23,210.78,407.31,210.76,403.43z'/>
<path className='Shirt_Line_001_B' d='M314.29,395.87c6.17,2.78,52.73-1.81,56.06-4.51c0,0-6.07-4-9.27-4.22
c-7.66-0.52-37.02,1.06-45.66,4.22L314.29,395.87z'/>
<path className='Lid' d='M63.21,378.64c-2.91-13.1,67.25-204.95,85.58-215.24c18.33-10.29,250.95-10.61,261.05,6
S355.1,354.12,355.1,354.12s177.08,92.4,169.95,100.56S259.9,471.43,235.8,463.6C211.7,455.77,63.21,378.64,63.21,378.64z'/>
<path className='Corner_Line' d='M235.88,474.34c1.63-2.61,6.19-3.26,7.49-0.98c0.27,0.47,0.98,59.48-0.33,60.92
c-2.93,3.26-3.26,7.17-6.52,3.26C233.27,533.63,234.25,476.95,235.88,474.34z'/>
<path className='Handle_Line' d='M375.63,492.26c10.65,1.6,6.48,32.59,27.55,32.26s8.94-34.22,18.71-37.15
c9.77-2.93,6.84,21.5,3.91,30.62c-2.93,9.12-10.26,15.31-25.74,15.31c-15.48,0-18.58-6.98-29.32-34.75
C369.17,494.5,371.28,491.61,375.63,492.26z'/>
<path className='Fold_Line_001' d='M84.37,373.02c9.12-11.08,130.77-26.2,156.05-26.06
c29.75,0.16,96.92,0.45,96.92,0.45s4.98,0.2,2.61,4.93c-4.73,9.44-89.97,2.09-122.08,4.93C185.76,360.11,75.25,384.1,84.37,373.02z'
/>
<path className='Fold_Line_002' d='M166.47,186.99c5.54-4.04,203.94-6.44,210.46-4.04c6.52,2.41,7.14,3.61,0.65,7.95
s-206.88,5.44-210.14,2.61C164.19,190.67,160.93,191.03,166.47,186.99z'/>
<path className='Text_Bubble' d='M333.27,334.58l61.82-21.08c0,0,104.62,25.64,141.48-33s21.83-141.39-41.7-177.56
C437.2,70.69,346.63,43.97,285.06,81.11s-55.38,95.46-35.84,133.57s114.68,73.63,114.68,73.63L333.27,334.58z'/>
<path className='Letter_W_001' d='M294.18,107.17c-1.3-1.47-9.29-0.98-10.1,0c-0.81,0.98-5.54,78.52-4.24,79.49
s7.66,0.49,9.12,0c1.47-0.49,22.11-21.83,22.11-21.83s-3.05,29.79-2.24,31.18s11.73,2.05,10.1,3.03s51.47-58.05,51.47-59.73
c0-1.68-5.54-6.08-7.82-5.75c-2.28,0.33-40.07,36.49-40.07,36.49s4.9-26.45,3.27-28.05c-1.64-1.6-6.36-2.57-8.15-2.25
s-21.83,21.18-21.83,21.18S295.48,108.64,294.18,107.17z'/>
<path className='Letter_O' d='M387.74,158c-21.85,8.36-31.99,17.59-36.55,39.75c-3.71,18.02,18.85,36.35,38.86,34.86
c14.11-1.05,34.12-16.29,37.05-42.03C430.17,163.68,400.07,153.28,387.74,158z M405.6,208.82c-10.96,13.07-25.32,11.91-32.58,6.19
c-10.75-8.47-12.05-19.08-1.3-32.9c8.51-10.93,22.75-12.61,33.23-6.52C415.59,181.78,416.53,195.78,405.6,208.82z'/>
<path className='Letter_W_002' d='M463.63,178.86c-1.01-1.8-18.31-1.78-19.76-0.48s-14.86,72.7-13.45,73.97
c1.41,1.27,12.98,1.97,14.3,0.8c1.32-1.17,20.19-17.84,20.19-17.84s1.62,31.18,2.6,32.48s7.66,2.77,10.1,1.95
c2.44-0.81,50.18-48.28,50.18-49.47s-10.59-11.13-12.39-10.81c-1.79,0.33-31.28,35.84-31.28,35.84s-0.49-29.65-1.63-30.95
c-1.14-1.3-8.31-5.05-10.43-4.56s-19.55,12.71-19.55,12.71S464.64,180.66,463.63,178.86z'/>
</svg>
)
})`
&:hover {
${props => props.animated && Wiggle}
}
.Box_Body, .Shirt_Line_001_A, .Shirt_Line_001_B, .Shirt_Line_002,
.Shirt_Line_003, .Letter_O, .Letter_W_001, .Letter_W_002, .Fold_Line_001,
.Fold_Line_002 {
fill: ${props => props.theme.colors.rocketBlue};
}
.Lid {
stroke: ${props => props.theme.colors.rocketBlue};
stroke-width: 13;
fill: transparent;
}
.Text_Bubble {
stroke: ${props => props.theme.colors.rocketBlue};
stroke-width: 6;
fill: ${props => props.theme.colors.white};
}
.Shirt_Outline {
stroke: ${props => props.theme.colors.rocketBlue};
stroke-width: 6;
fill: transparent;
}
.Handle_Line, .Corner_Line {
fill: ${props => props.theme.colors.white};
}
`
/** @component */
export default BoxIcon