Smartphone Chip
2K Views
50 Downloads - 9 API calls
35 Lines - 717 Bytes
Apr 23, 2020 devices
1 .gg-smartphone-chip { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 6px double;
9 border-radius: 3px 10 } 11 12 .gg-smartphone-chip::after { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute;
17 border-radius: 3px ;
18 width: 2px ;
19 height: 2px ;
20 left: -3px ;
21 top: -9px ;
22 background: currentColor;
23 box-shadow:
24 4px 0 0 ,
25 8px 0 0 ,
26 0 20px 0 ,
27 4px 20px 0 ,
28 -6px 6px 0 ,
29 14px 6px 0 ,
30 14px 10px 0 ,
31 14px 14px 0 ,
32 -6px 10px 0 ,
33 -6px 14px 0 ,
34 8px 20px 0 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 9 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M9 22 C9 22.5523 8.55228 23 8 23 C7.44772 23 7 22.5523 7 22 C7 21.4477 7.44772 21 8 21 C8.55228 21 9 21.4477 9 22 ZM13 22 C13 22.5523 12.5523 23 12 23 C11.4477 23 11 22.5523 11 22 C11 21.4477 11.4477 21 12 21 C12.5523 21 13 21.4477 13 22 ZM16 23 C16.5523 23 17 22.5523 17 22 C17 21.4477 16.5523 21 16 21 C15.4477 21 15 21.4477 15 22 C15 22.5523 15.4477 23 16 23 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M9 2 C9 2.55228 8.55228 3 8 3 C7.44772 3 7 2.55228 7 2 C7 1.44772 7.44772 1 8 1 C8.55228 1 9 1.44772 9 2 ZM13 2 C13 2.55228 12.5523 3 12 3 C11.4477 3 11 2.55228 11 2 C11 1.44772 11.4477 1 12 1 C12.5523 1 13 1.44772 13 2 ZM16 3 C16.5523 3 17 2.55228 17 2 C17 1.44772 16.5523 1 16 1 C15.4477 1 15 1.44772 15 2 C15 2.55228 15.4477 3 16 3 ZM9 22 C9 22.5523 8.55228 23 8 23 C7.44772 23 7 22.5523 7 22 C7 21.4477 7.44772 21 8 21 C8.55228 21 9 21.4477 9 22 ZM13 22 C13 22.5523 12.5523 23 12 23 C11.4477 23 11 22.5523 11 22 C11 21.4477 11.4477 21 12 21 C12.5523 21 13 21.4477 13 22 ZM16 23 C16.5523 23 17 22.5523 17 22 C17 21.4477 16.5523 21 16 21 C15.4477 21 15 21.4477 15 22 C15 22.5523 15.4477 23 16 23 ZM23 16 C23 15.4477 22.5523 15 22 15 C21.4477 15 21 15.4477 21 16 C21 16.5523 21.4477 17 22 17 C22.5523 17 23 16.5523 23 16 ZM23 12 C23 11.4477 22.5523 11 22 11 C21.4477 11 21 11.4477 21 12 C21 12.5523 21.4477 13 22 13 C22.5523 13 23 12.5523 23 12 ZM22 7 C22.5523 7 23 7.44771 23 8 C23 8.55229 22.5523 9 22 9 C21.4477 9 21 8.55229 21 8 C21 7.44771 21.4477 7 22 7 ZM2 15 C2.55228 15 3 15.4477 3 16 C3 16.5523 2.55228 17 2 17 C1.44772 17 1 16.5523 1 16 C1 15.4477 1.44772 15 2 15 ZM2 11 C2.55228 11 3 11.4477 3 12 C3 12.5523 2.55228 13 2 13 C1.44772 13 1 12.5523 1 12 C1 11.4477 1.44772 11 2 11 ZM3 8 C3 7.44771 2.55228 7 2 7 C1.44772 7 1 7.44771 1 8 C1 8.55229 1.44772 9 2 9 C2.55228 9 3 8.55229 3 8 ZM17 6 H7 C6.44772 6 6 6.44772 6 7 V17 C6 17.5523 6.44772 18 7 18 H17 C17.5523 18 18 17.5523 18 17 V7 C18 6.44772 17.5523 6 17 6 ZM7 4 C5.34315 4 4 5.34315 4 7 V17 C4 18.6569 5.34315 20 7 20 H17 C18.6569 20 20 18.6569 20 17 V7 C20 5.34315 18.6569 4 17 4 H7 ZM14 10 H10 V14 H14 V10 ZM8 8 V16 H16 V8 H8 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartphoneChip = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 6px double;13 border-radius: 3px ;14 } 15 &::after { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 border-radius: 3px ;21 width: 2px ;22 height: 2px ;23 left: -3px ;24 top: -9px ;25 background: currentColor;26 box-shadow: 4px 0 0 , 8px 0 0 , 0 20px 0 , 4px 20px 0 , -6px 6px 0 , 14px 6px 0 , 14px 10px 0 ,27 14px 14px 0 , -6px 10px 0 , -6px 14px 0 , 8px 20px 0 ; 28 } 29 ` 30 31 export const SmartphoneChip = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledSmartphoneChip { ...props} ref={ ref} icon-role="smartphone-chip" /> 36 </> 37 ) 38 } , 39 ) 40
Smartphone Chip turned into an amazing CSS icon created by applying features as follows: transform, width, height, border, border-radius, background, box-shadow, Fun facts, it has: 35 Lines of code at 717b & 465b after compiling. Pretty stunning 🤩 for a icon designed by code.