Cast
2K Views
65 Downloads - 26 API calls
48 Lines - 1150 Bytes
Apr 23, 2020 interface devices multimedia
1 .gg-cast { 2 background:
3 linear-gradient( to left,
4 currentColor 5px ,transparent 0 )
5 no-repeat bottom right/6px 2px ,
6 linear-gradient( to left,
7 currentColor 5px ,transparent 0 )
8 no-repeat top left/2px 2px ;
9 box-sizing: border-box;
10 position: relative;
11 display: block;
12 transform: scale(var(--ggs,1 ));
13 width: 20px ;
14 height: 16px ;
15 border-top: 2px solid;
16 border-right: 2px solid;
17 border-radius: 2px ;
18 border-left: 0 19 } 20 21 .gg-cast::after ,
22 .gg-cast::before { 23 content: "";
24 display: block;
25 box-sizing: border-box;
26 position: absolute;
27 width: 20px ;
28 height: 20px ;
29 border: 6px double;
30 border-top-color: transparent;
31 border-bottom-color: transparent;
32 border-left-color: transparent;
33 border-radius: 50% ;
34 transform: rotate(-45deg );
35 bottom: -10px ;
36 left: -10px 37 } 38 39 .gg-cast::after { 40 width: 4px ;
41 height: 4px ;
42 border: 2px solid;
43 border-top-color: transparent;
44 border-bottom-color: transparent;
45 border-left-color: transparent;
46 bottom: -2px ;
47 left: -2px 48 }
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 d="M20 6 H4 V8 H2 V6 C2 4.89543 2.89543 4 4 4 H20 C21.1046 4 22 4.89543 22 6 V18 C22 19.1046 21.1046 20 20 20 H15 V18 H20 V6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M2 13 C5.86599 13 9 16.134 9 20 H7 C7 17.2386 4.76142 15 2 15 V13 Z" 14 fill="currentColor" 15 /> 16 <path d="M2 17 C3.65685 17 5 18.3431 5 20 H2 V17 Z" fill="currentColor" /> 17 <path 18 d="M2 9 C8.07513 9 13 13.9249 13 20 H11 C11 15.0294 6.97056 11 2 11 V9 Z" 19 fill="currentColor" 20 /> 21 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCast = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat bottom right/6px 7 2px , 8 linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat top left/2px 2px ; 9 box-sizing: border-box;10 position: relative;11 display: block;12 transform: scale(var(--ggs, 1 ));13 width: 20px ;14 height: 16px ;15 border-top: 2px solid;16 border-right: 2px solid;17 border-radius: 2px ;18 border-left: 0 ;19 } 20 &::after , 21 &::before { 22 content: '';23 display: block;24 box-sizing: border-box;25 position: absolute;26 width: 20px ;27 height: 20px ;28 border: 6px double;29 border-top-color: transparent;30 border-bottom-color: transparent;31 border-left-color: transparent;32 border-radius: 50% ;33 transform: rotate(-45deg );34 bottom: -10px ;35 left: -10px ;36 } 37 &::after { 38 width: 4px ;39 height: 4px ;40 border: 2px solid;41 border-top-color: transparent;42 border-bottom-color: transparent;43 border-left-color: transparent;44 bottom: -2px ;45 left: -2px ;46 } 47 ` 48 49 export const Cast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 50 (props, ref) => { 51 return ( 52 <> 53 <StyledCast { ...props} ref={ ref} icon-role="cast" /> 54 </> 55 ) 56 } , 57 ) 58
Cast turned into a magic 100% CSS icon made by using properties as follows: background, transform, width, height, border-top, border-right, border-radius, border-left, border, border-top-color, border-bottom-color, border-left-color, Fun to know, it has: 48 Lines of code at 1150b & 837b after compression. Actually amazing 😲 huhh.