Enter
2K Views
53 Downloads - 11 API calls
38 Lines - 701 Bytes
Apr 23, 2020 arrows interface
1 .gg-enter { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 18px ;
8 border: 2px solid;
9 border-left: 0 ;
10 box-shadow:
11 -8px -6px 0 -6px ,
12 -8px 6px 0 -6px 13 } 14 15 .gg-enter::after ,
16 .gg-enter::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 right: 4px 22 } 23 24 .gg-enter::before { 25 background: currentColor;
26 width: 16px ;
27 height: 2px ;
28 top: 6px 29 } 30 31 .gg-enter::after { 32 width: 6px ;
33 height: 6px ;
34 border-right: 2px solid;
35 border-top: 2px solid;
36 top: 4px ;
37 transform: rotate(45deg )
38 }
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="M20 5 H8 V9 H6 V3 H22 V21 H6 V15 H8 V19 H20 V5 Z" fill="currentColor" /> 9 <path 10 d="M13.0743 16.9498 L11.6601 15.5356 L14.1957 13 H2 V11 H14.1956 L11.6601 8.46451 L13.0743 7.05029 L18.024 12 L13.0743 16.9498 Z" 11 fill="currentColor" 12 /> 13 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEnter = 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: 18px ;12 border: 2px solid;13 border-left: 0 ;14 box-shadow: -8px -6px 0 -6px , -8px 6px 0 -6px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 right: 4px ;23 } 24 &::before { 25 background: currentColor;26 width: 16px ;27 height: 2px ;28 top: 6px ;29 } 30 &::after { 31 width: 6px ;32 height: 6px ;33 border-right: 2px solid;34 border-top: 2px solid;35 top: 4px ;36 transform: rotate(45deg );37 } 38 ` 39 40 export const Enter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledEnter { ...props} ref={ ref} icon-role="enter" /> 45 </> 46 ) 47 } , 48 ) 49
Enter turned into an amazing pure CSS icon built by adopting attributes such as: transform, width, height, border, border-left, box-shadow, border-right, border-top, Some stats, it has: 38 Lines of code at 701b & 488b after compression. Pretty wonderful 🤗 for a CSS designed icon.