Arrows V interface arrows
1 .gg-arrows-v { 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 15px ,transparent 0 )
12 no-repeat 4px 2px /2px 6px ,
13 linear-gradient(
14 to left,
15 currentColor 15px ,transparent 0 )
16 no-repeat 4px 12px /2px 6px 17 } 18 .gg-arrows-v::after ,
19 .gg-arrows-v::before { 20 content: "";
21 display: block;
22 box-sizing: border-box;
23 position: absolute;
24 width: 6px ;
25 height: 6px ;
26 transform: rotate(-45deg );
27 left: 2px 28 } 29 .gg-arrows-v::after { 30 border-bottom: 2px solid;
31 border-left: 2px solid;
32 bottom: 1px 33 } 34 .gg-arrows-v::before { 35 border-top: 2px solid;
36 border-right: 2px solid;
37 top: 1px 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 9 d="M7.75739 5.04077 L9.1716 6.45498 L11.0001 4.62652 V10 H13.0001 V4.62661 L14.8284 6.45498 L16.2426 5.04077 L12 0.798126 L7.75739 5.04077 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16.2426 18.9593 L14.8284 17.545 L13.0001 19.3734 V14 H11.0001 V19.3735 L9.1716 17.545 L7.75739 18.9593 L12 23.2019 L16.2426 18.9593 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledArrowsV = 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 15px , transparent 0 ) no-repeat 4px 2px /2px 6px ,13 linear-gradient(to left, currentColor 15px , transparent 0 ) no-repeat 4px 12px /2px 6px ; 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 ArrowsV = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledArrowsV { ...props} ref={ ref} icon-role="arrows-v" /> 43 </> 44 ) 45 } , 46 ) 47
Arrows V became an amazing pure CSS icon created by using properties like: transform, width, height, background, border-left, border-right,
