Swap
2K Views
53 Downloads - 6 API calls
35 Lines - 643 Bytes
Apr 23, 2020 interface arrows
1 .gg-swap { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 box-shadow:
7 -2px 2px 0 ,
8 2px -2px 0 ;
9 width: 6px ;
10 height: 2px 11 } 12 13 .gg-swap::after ,
14 .gg-swap::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 0 ;
20 height: 0 ;
21 border-top: 3px solid transparent;
22 border-bottom: 3px solid transparent
23 } 24 25 .gg-swap::before { 26 border-left: 3px solid;
27 top: -4px ;
28 right: -4px 29 } 30 31 .gg-swap::after { 32 border-right: 3px solid;
33 bottom: -4px ;
34 left: -4px 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 d="M16 13 V11.5 H10 V9.5 H16 V8 L19 10.5 L16 13 Z" fill="currentColor" /> 9 <path d="M8 17 V15.5 H14 V13.5 H8 V12 L5 14.5 L8 17 Z" fill="currentColor" /> 10 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSwap = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 box-shadow: -2px 2px 0 , 2px -2px 0 ;11 width: 6px ;12 height: 2px ;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 0 ;21 height: 0 ;22 border-top: 3px solid transparent;23 border-bottom: 3px solid transparent;24 } 25 &::before { 26 border-left: 3px solid;27 top: -4px ;28 right: -4px ;29 } 30 &::after { 31 border-right: 3px solid;32 bottom: -4px ;33 left: -4px ;34 } 35 ` 36 37 export const Swap = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledSwap { ...props} ref={ ref} icon-role="swap" /> 42 </> 43 ) 44 } , 45 ) 46
Swap developed into a magic 100% CSS icon built by using properties as follows: transform, box-shadow, width, height, border-top, border-bottom, Some stats, it has: 35 Lines of code at 643b & 451b after compiling. Truly stunning 🤩 don't you think ?.