Scroll H
Views
Downloads - API calls
35 Lines - 626 Bytes
Apr 23, 2020 interface
1 .gg-scroll-h,
2 .gg-scroll-h::after ,
3 .gg-scroll-h::before { 4 display: block;
5 box-sizing: border-box;
6 width: 6px ;
7 height: 6px 8 } 9 10 .gg-scroll-h { 11 position: relative;
12 transform: scale(var(--ggs,1 ));
13 border: 2px solid;
14 border-radius: 10px 15 } 16 17 .gg-scroll-h::after ,
18 .gg-scroll-h::before { 19 content: "";
20 position: absolute;
21 transform: rotate(45deg );
22 top: -2px 23 } 24 25 .gg-scroll-h::after { 26 border-top: 2px solid;
27 border-right: 2px solid;
28 right: -8px 29 } 30 31 .gg-scroll-h::before { 32 border-bottom: 2px solid;
33 border-left: 2px solid;
34 left: -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="M7.18188 9.17154 L5.76766 7.75732 L1.52502 12 L5.76766 16.2426 L7.18188 14.8284 L4.35345 12 L7.18188 9.17154 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16.8181 14.8284 L18.2323 16.2426 L22.4749 12 L18.2323 7.75733 L16.8181 9.17155 L19.6465 12 L16.8181 14.8284 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M14.9999 12 C14.9999 13.6569 13.6567 15 11.9999 15 C10.343 15 8.99988 13.6569 8.99988 12 C8.99988 10.3431 10.343 9 11.9999 9 C13.6567 9 14.9999 10.3431 14.9999 12 ZM12.9999 12 C12.9999 12.5523 12.5522 13 11.9999 13 C11.4476 13 10.9999 12.5523 10.9999 12 C10.9999 11.4477 11.4476 11 11.9999 11 C12.5522 11 12.9999 11.4477 12.9999 12 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledScrollH = 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 top: -2px ;25 } 26 &::after { 27 border-top: 2px solid;28 border-right: 2px solid;29 right: -8px ;30 } 31 &::before { 32 border-bottom: 2px solid;33 border-left: 2px solid;34 left: -8px ;35 } 36 ` 37 38 export const ScrollH = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledScrollH { ...props} ref={ ref} icon-role="scroll-h" /> 43 </> 44 ) 45 } , 46 ) 47
Scroll H turned into an amazing 100% CSS icon built by practicing properties such as: .gg-scroll-h, width, height, transform, border, border-radius, border-right, border-left, Fun to know, it has: 35 Lines of code at 626b & 463b after compression. Pretty awesome 🙆♂️ for a CSS designed icon.