Code
3K Views
49 Downloads - 44 API calls
30 Lines - 531 Bytes
Apr 23, 2020 code interface arrows
1 .gg-code { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-code,
6 .gg-code::after ,
7 .gg-code::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 8px ;
12 height: 20px 13 } 14 15 .gg-code::after ,
16 .gg-code::before { 17 content: "";
18 position: absolute;
19 height: 8px ;
20 border-left: 2px solid;
21 border-bottom: 2px solid;
22 transform: rotate(45deg ) scaleY(1 );
23 left: -4px ;
24 top: 6px 25 } 26 27 .gg-code::after { 28 transform: rotate(-45deg ) scaleX(-1 );
29 left: 4px 30 }
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="M9.95263 16.9123 L8.59323 18.3608 L2.03082 12.2016 L8.18994 5.63922 L9.64826 7.00791 L4.85783 12.112 L9.95212 16.8932 L9.95263 16.9123 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14.0474 16.9123 L15.4068 18.3608 L21.9692 12.2016 L15.8101 5.63922 L14.3517 7.00791 L19.1422 12.112 L14.0479 16.8932 L14.0474 16.9123 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCode = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 8px ;15 height: 20px ;16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 height: 8px ;22 border-left: 2px solid;23 border-bottom: 2px solid;24 transform: rotate(45deg ) scaleY(1 );25 left: -4px ;26 top: 6px ;27 } 28 &::after { 29 transform: rotate(-45deg ) scaleX(-1 );30 left: 4px ;31 } 32 ` 33 34 export const Code = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 35 (props, ref) => { 36 return ( 37 <> 38 <StyledCode { ...props} ref={ ref} icon-role="code" /> 39 </> 40 ) 41 } , 42 ) 43
Code turned into an amazing pure CSS icon created by using properties as follows: transform, width, height, border-left, border-bottom, transform, Fun to know, it has: 30 Lines of code at 531b & 389b after compiling. Actually amazing 😲 don't you think ?.