UNPKG

@rocketsofawesome/mirage

Version:

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

66 lines (62 loc) 4.73 kB
import React from 'react' import styled from 'styled-components' import { Wiggle } from 'SRC' const Phone = styled(({className}) => { return ( <svg className={className} version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'> <path className='Screen' d='M402.99,149.36c-6.52-10.91-203.98-1.14-205.74,14.99c-4.07,37.3,7.44,160.45,7.44,160.45 s2.46,149.01,7.87,147.75c4.5-1.05,61.57-4.46,115.71-4.07c47.78,0.34,93.27,4.5,98.33,3.58c3.81-0.69-5.49-83.46-10.15-149 C410.16,234.48,406.74,155.64,402.99,149.36z M204.26,167.28c11.69-10.35,187.11-18.73,192.38-14.33s4.95,65.45,11.57,154.04 c4.62,61.91,12.56,156.12,9.61,158.06c-3.32,2.19-44.98-2.41-89.54-2.12c-51.76,0.34-107.37,5.14-110.17,1.46 c-2.51-3.3-6.68-138.95-6.68-138.95S197.88,172.93,204.26,167.28z'/> <path className='Phone_Body' d='M437.31,269.31c-7.45-96.53-8.82-137.57-11.95-189.28c-2.28-8.69-4.13-12.05-8.69-15.64 c-7.18-5.64-9.49-9.57-15.64-11.51c-9.12-2.88-238.48-0.34-246.95,36.05c-6.38,59.36,5.33,137.81,9.12,210.07 c4.06,77.38,4.78,149.5,8.04,195.87c4.67,28.34,15.2,34.1,23.89,45.07c26.39,7.71,233.3-0.77,253.27-8.8 C459.53,526.66,446.68,390.71,437.31,269.31z M188.4,75.25c9.88-2.93,28.44-6.4,35.84-6.95c7.4-0.55,43.37-3.36,69.28-4.13 s100.19-3,102.08-2.82c1.89,0.18,5.77,1.85,8.04,3.48c3.1,2.22,4.93,5.16-0.76,6.84c-0.67,0.2-4.08,0.21-5.54,0.33 c-6.95,0.54-77.96,2.7-85,3.26c-7.63,0.61-21.53,0.32-31.85,1.08c-10.32,0.76-36.72,4.22-32.14,3.7s-17.48,2.31-27.37,3.04 s-20.91,4.04-24.6,5.21c-10.2,3.26-15.25,10.37-18.35,12.38c-2.23,1.45-14.36-6.3-14.39-11.51S178.52,78.18,188.4,75.25z M180.04,509.85c-2.01-3.8-3.95-9.99-4.02-11.84c-0.06-1.69-3.29-93.9-3.58-102.23c0,0.01,0,0.02,0,0.04 c0.35,10.1-8.14-177.66-8.14-177.66s-2.93-34.64-2.82-57.67c0,0-3.69-53-3.69-56.25c0-3.26,0.33-5.86,2.82-6.95 c2.5-1.09,13.19,6.52,15.31,8.04c2.12,1.52,4.28,135.31,4.13,126.19c-0.07-4.07,2.55,43.77,2.55,98.33 c0,11.08,2.16,16.59,2.44,23.95c2.34,61.29,2.39,117.07,2.39,121.3s3.91,20.2,10.86,53C186.12,528.2,182.05,513.65,180.04,509.85z M444.48,520.6c-0.84,1.71-1.41,2.36-5,3.15c-24.11,7.11-84.33,6.79-104.69,8.25c-29.21,4.24-113.59,6.95-118.81,5.86 c-5.21-1.09-8.04-1.74-12.38-8.69c-4.34-6.95-23.64-404.44-19.11-427s74.66-16.83,130.32-21.5s90.14-5.86,96.22-2.17 c6.08,3.69,6.38,5.05,6.73,8.25s0.69,59.29,0.69,59.29S446.39,511.34,444.48,520.6z'/> <path className='Button' d='M322.11,484.44c-8.71,0-18.33,11.57-18.33,18.08c0,8.47,9.29,18.09,20.36,18.08 c6.52,0,17.92-8.8,17.92-17.76C342.07,496.01,330.99,484.44,322.11,484.44z M324.15,514.09c-5.62,0-14.82-5.54-14.82-11.16 s7.98-12.95,13.6-12.95s13.11,7.33,13.11,12.95S329.77,514.09,324.15,514.09z'/> <path className='Heart' d='M309.33,274.63c0,0-6.46-32.58-34.7-32.58s-31.08,16.9-28.24,29.97 c9.56,43.87,74.28,94.26,74.28,94.26s40.4-42.57,49.09-68.63c4.39-13.17,11.73-50.39-21.72-49.95S309.33,274.63,309.33,274.63z'/> <path className='Buzz_B_001' d='M472.14,263.55c3.94-0.54,18.64-10.13,20.46-12.22c1.82-2.09-0.48-6.35-3.76-6.35 s-16.53,10.13-18.73,12.27C467.91,259.4,468.2,264.1,472.14,263.55z'/> <path className='Buzz_B_002' d='M473.61,305.91c2.33,0.92,21.83,2.14,23.86,0.87c2.04-1.28,2.04-5.35,0-6.78 s-22.45-0.33-24.11,0.94C471.71,302.2,471.27,304.98,473.61,305.91z'/> <path className='Buzz_B_003' d='M473.15,342.4c-4.02-1.87-1.79-3.12,1.74-3.48c3.53-0.35,25.25,4.48,27.64,6.32 c2.12,1.64,3.07,5.46-0.71,6.28S477.16,344.27,473.15,342.4z'/> <path className='Buzz_A_003' d='M126.07,351.52c-2.28,0-19.55,12.27-20.42,14.77c-0.87,2.5,0.76,6.95,3.48,6.95 s20.85-13.25,20.85-15.2S128.35,351.52,126.07,351.52z'/> <path className='Buzz_A_002' d='M126.5,316.33c-1.09,0.29-23.89,0.65-25.63,0c-1.74-0.65-2.06-6.14,0-7.68 c2.06-1.55,24.68,2.82,25.63,3.84C127.45,313.51,127.59,316.04,126.5,316.33z'/> <path className='Buzz_A_001' d='M126.5,275.93c-1.52,0.87-28.78-3.15-30.84-6.95c-2.06-3.8-2.71-5.65,0-5.65 c2.71,0,29.86,6.95,30.84,8.69C127.48,273.76,128.02,275.07,126.5,275.93z'/> <path className='Microphone' d='M271.86,125.34c-0.4,3.8-4.24,5.38-6.84,5.67c-4.25,0.48-7.66-2.01-8.2-5.76 c-0.55-3.78,3.34-6.7,7.3-6.84C267.19,118.3,272.08,123.25,271.86,125.34z'/> <path className='Speaker'd='M290.76,126.02c-4.72,0-9.88-1.09-6.08-5.16c3.8-4.07,41.1-8.58,43.98-7.82 c2.88,0.76,7.66,7.87,4.45,9.29S295.48,126.02,290.76,126.02z'/> </svg> ) })` &:hover { ${props => props.animated && Wiggle} } > * { fill: ${props => props.theme.colors.rocketBlue}; } ` /** @component */ export default Phone