Smartphone Shake
1K Views
46 Downloads - 5 API calls
35 Lines - 791 Bytes
Apr 23, 2020 devices interface
1 .gg-smartphone-shake { 2 background:
3 linear-gradient(to left,
4 currentColor 5px ,transparent 0 )
5 no-repeat 4px 12px /2px 2px ;
6 box-sizing: border-box;
7 position: relative;
8 transform: scale(var(--ggs,1 ));
9 display: block;
10 width: 14px ;
11 height: 20px ;
12 border: 2px solid;
13 border-radius: 2px 14 } 15 16 .gg-smartphone-shake::after ,
17 .gg-smartphone-shake::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 height: 10px ;
23 width: 6px ;
24 border: 2px solid transparent;
25 overflow: hidden;
26 box-shadow: 2px 0 0 ,
27 inset -2px 0 0 ;
28 top: 3px ;
29 left: -12px 30 } 31 32 .gg-smartphone-shake::after { 33 transform: scaleX(-1 );
34 left: 16px 35 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path d="M13 14 H11 V16 H13 V14 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M8 7 C8 5.89543 8.89543 5 10 5 H14 C15.1046 5 16 5.89543 16 7 V17 C16 18.1046 15.1046 19 14 19 H10 C8.89543 19 8 18.1046 8 17 V7 ZM10 7 H14 V17 H10 V7 Z" 13 fill="currentColor" 14 /> 15 <path d="M18 9 H20 V15 H18 V9 Z" fill="currentColor" /> 16 <path d="M0 14 H2 V10 H0 V14 Z" fill="currentColor" /> 17 <path d="M6 15 H4 V9 H6 V15 Z" fill="currentColor" /> 18 <path d="M24 10 H22 V14 H24 V10 Z" fill="currentColor" /> 19 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartphoneShake = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat 4px 12px /2px 2px ;7 box-sizing: border-box;8 position: relative;9 transform: scale(var(--ggs, 1 ));10 display: block;11 width: 14px ;12 height: 20px ;13 border: 2px solid;14 border-radius: 2px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 height: 10px ;23 width: 6px ;24 border: 2px solid transparent;25 overflow: hidden;26 box-shadow: 2px 0 0 , inset -2px 0 0 ;27 top: 3px ;28 left: -12px ;29 } 30 &::after { 31 transform: scaleX(-1 );32 left: 16px ;33 } 34 ` 35 36 export const SmartphoneShake = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledSmartphoneShake { ...props} ref={ ref} icon-role="smartphone-shake" /> 41 </> 42 ) 43 } , 44 ) 45
Smartphone Shake turned into a magic pure CSS icon made by adopting features as follows: background, transform, width, height, border, border-radius, overflow, box-shadow, Fun to know, it has: 35 Lines of code at 791b & 557b after compression. Actually awesome 🙆♂️ for a icon designed by code.