Arrows V Alt interface arrows
1 .gg-arrows-v-alt { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 20px ;
8 background:
9 linear-gradient(
10 to left,
11 currentColor 16px ,transparent 0 )
12 no-repeat 4px 2px /2px 16px 13 } 14 .gg-arrows-v-alt::after ,
15 .gg-arrows-v-alt::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 6px ;
21 height: 6px ;
22 transform: rotate(-45deg );
23 left: 2px 24 } 25 .gg-arrows-v-alt::after { 26 border-bottom: 2px solid;
27 border-left: 2px solid;
28 bottom: 1px 29 } 30 .gg-arrows-v-alt::before { 31 border-top: 2px solid;
32 border-right: 2px solid;
33 top: 1px 34 }
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.1716 6.45504 L7.75739 5.04083 L12 0.798187 L16.2426 5.04083 L14.8284 6.45504 L13.0001 4.62667 V19.3733 L14.8284 17.5449 L16.2426 18.9592 L12 23.2018 L7.75739 18.9592 L9.1716 17.5449 L11.0001 19.3734 V4.62658 L9.1716 6.45504 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledArrowsVAlt = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 20px ;12 background: linear-gradient(to left, currentColor 16px , transparent 0 ) no-repeat 4px 2px /2px 13 16px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 6px ;22 height: 6px ;23 transform: rotate(-45deg );24 left: 2px ;25 } 26 &::after { 27 border-bottom: 2px solid;28 border-left: 2px solid;29 bottom: 1px ;30 } 31 &::before { 32 border-top: 2px solid;33 border-right: 2px solid;34 top: 1px ;35 } 36 ` 37 38 export const ArrowsVAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledArrowsVAlt { ...props} ref={ ref} icon-role="arrows-v-alt" /> 43 </> 44 ) 45 } , 46 ) 47
Arrows V Alt became a wonderful pure CSS icon created by using properties like: transform, width, height, background, border-left, border-right,
