Scroll V
Views
Downloads - API calls
35 Lines - 628 Bytes
Apr 23, 2020 interface
1 .gg-scroll-v,
2 .gg-scroll-v::after ,
3 .gg-scroll-v::before { 4 display: block;
5 box-sizing: border-box;
6 width: 6px ;
7 height: 6px 8 } 9 10 .gg-scroll-v { 11 position: relative;
12 transform: scale(var(--ggs,1 ));
13 border: 2px solid;
14 border-radius: 10px 15 } 16 17 .gg-scroll-v::after ,
18 .gg-scroll-v::before { 19 content: "";
20 position: absolute;
21 transform: rotate(-45deg );
22 left: -2px 23 } 24 25 .gg-scroll-v::after { 26 border-bottom: 2px solid;
27 border-left: 2px solid;
28 bottom: -8px 29 } 30 31 .gg-scroll-v::before { 32 border-top: 2px solid;
33 border-right: 2px solid;
34 top: -8px 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 9 d="M9.17154 16.8182 L7.75732 18.2324 L12 22.475 L16.2426 18.2324 L14.8284 16.8182 L12 19.6466 L9.17154 16.8182 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14.8284 7.182 L16.2426 5.76779 L12 1.52515 L7.75733 5.76779 L9.17155 7.182 L12 4.35357 L14.8284 7.182 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M12 9.00018 C13.6569 9.00018 15 10.3433 15 12.0002 C15 13.657 13.6569 15.0002 12 15.0002 C10.3431 15.0002 9 13.657 9 12.0002 C9 10.3433 10.3431 9.00018 12 9.00018 ZM12 11.0002 C12.5523 11.0002 13 11.4479 13 12.0002 C13 12.5525 12.5523 13.0002 12 13.0002 C11.4477 13.0002 11 12.5525 11 12.0002 C11 11.4479 11.4477 11.0002 12 11.0002 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledScrollV = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 6px ;11 height: 6px ;12 } 13 & { 14 position: relative;15 transform: scale(var(--ggs, 1 ));16 border: 2px solid;17 border-radius: 10px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 transform: rotate(-45deg );24 left: -2px ;25 } 26 &::after { 27 border-bottom: 2px solid;28 border-left: 2px solid;29 bottom: -8px ;30 } 31 &::before { 32 border-top: 2px solid;33 border-right: 2px solid;34 top: -8px ;35 } 36 ` 37 38 export const ScrollV = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledScrollV { ...props} ref={ ref} icon-role="scroll-v" /> 43 </> 44 ) 45 } , 46 ) 47
Scroll V turned into a wonderful pure CSS icon made by using properties such as: .gg-scroll-v, width, height, transform, border, border-radius, border-left, border-right, Fun to know, it has: 35 Lines of code at 628b & 465b after compression. Pretty wonderful 🤗 for a CSS designed icon.