Swap Vertical
2K Views
46 Downloads - 10 API calls
35 Lines - 702 Bytes
Apr 23, 2020 arrows interface
1 .gg-swap-vertical { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: rotate(90deg ) 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-vertical::after ,
14 .gg-swap-vertical::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-vertical::before { 26 border-left: 3px solid;
27 top: -4px ;
28 right: -4px 29 } 30 31 .gg-swap-vertical::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="M12 16 H13.5 L13.5 10 H15.5 L15.5 16 H17 L14.5 19 L12 16 Z" fill="currentColor" /> 9 <path d="M8 8 H9.5 L9.5 14 H11.5 L11.5 8 H13 L10.5 5 L8 8 Z" fill="currentColor" /> 10 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSwapVertical = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(90deg ) 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 SwapVertical = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledSwapVertical { ...props} ref={ ref} icon-role="swap-vertical" /> 42 </> 43 ) 44 } , 45 ) 46
Swap Vertical turned into a wonderful pure CSS icon built by using attributes as follows: transform, box-shadow, width, height, border-top, border-bottom, Fun to know, it has: 35 Lines of code at 702b & 510b minified. Pretty awesome 🙆♂️ huhh.