Ghost
2K Views
49 Downloads - 9 API calls
31 Lines - 659 Bytes
Apr 23, 2020 brands
1 .gg-ghost { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 16px ;
8 background:
9 linear-gradient(to left,
10 currentColor 40px ,transparent 0 )
11 no-repeat -6px center/40px 4px ;
12 overflow: hidden
13 } 14 15 .gg-ghost::after ,.gg-ghost::before { 16 content: "";
17 background: currentColor;
18 box-sizing: border-box;
19 position: absolute;
20 display: block;
21 height: 4px ;
22 width: 12px ;
23 box-shadow: 14px 0 0 24 } 25 26 .gg-ghost::after { 27 width: 20px ;
28 left: -12px ;
29 box-shadow: 22px 0 0 ;
30 bottom: 0 31 }
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="M3 4 H15 V8 H3 V4 Z" fill="currentColor" /> 9 <path d="M21 8 H17 V4 H21 V8 Z" fill="currentColor" /> 10 <path d="M3 10 H21 V14 H3 V10 Z" fill="currentColor" /> 11 <path d="M11 16 H3 V20 H11 V16 Z" fill="currentColor" /> 12 <path d="M13 16 V20 H21 V16 H13 Z" fill="currentColor" /> 13 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGhost = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 16px ;12 background: linear-gradient(to left, currentColor 40px , transparent 0 ) no-repeat -6px center/40px 13 4px ; 14 overflow: hidden;15 } 16 &::after , 17 &::before { 18 content: '';19 background: currentColor;20 box-sizing: border-box;21 position: absolute;22 display: block;23 height: 4px ;24 width: 12px ;25 box-shadow: 14px 0 0 ;26 } 27 &::after { 28 width: 20px ;29 left: -12px ;30 box-shadow: 22px 0 0 ;31 bottom: 0 ;32 } 33 ` 34 35 export const Ghost = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledGhost { ...props} ref={ ref} icon-role="ghost" /> 40 </> 41 ) 42 } , 43 ) 44
Ghost developed into a CSS icon built by adopting properties such as: transform, width, height, background, overflow, box-shadow, Some stats, it has: 31 Lines of code at 659b & 465b after compiling. Quite amazing 😲 .