Edit Flip H
Views
Downloads - API calls
36 Lines - 819 Bytes
Apr 23, 2020 interface
1 .gg-edit-flip-h { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 18px ;
6 height: 18px ;
7 transform: scale(var(--ggs,1 ));
8 background:
9 linear-gradient(
10 to left,currentColor 22px ,
11 transparent 0 )
12 no-repeat center/2px 22px 13 } 14 .gg-edit-flip-h::after ,
15 .gg-edit-flip-h::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 6px ;
21 height: 14px ;
22 border: 2px solid;
23 top: 2px 24 } 25 .gg-edit-flip-h::before { 26 border-right: 0 ;
27 border-top-left-radius: 3px ;
28 border-bottom-left-radius: 3px 29 } 30 .gg-edit-flip-h::after { 31 opacity: .5 ;
32 border-left: 0 ;
33 border-top-right-radius: 3px ;
34 border-bottom-right-radius: 3px ;
35 right: 0 36 }
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="M18 7 C18.5523 7 19 7.44772 19 8 V16 C19 16.5523 18.5523 17 18 17 H15 V19 H18 C19.6569 19 21 17.6569 21 16 V8 C21 6.34315 19.6569 5 18 5 H15 V7 H18 Z" 10 fill="currentColor" 11 fill-opacity="0.5 " 12 /> 13 <path d="M13 3 H11 V21 H13 V3 Z" fill="currentColor" /> 14 <path 15 d="M5 8 C5 7.44772 5.44772 7 6 7 H9 V5 H6 C4.34315 5 3 6.34315 3 8 V16 C3 17.6569 4.34315 19 6 19 H9 V17 H6 C5.44772 17 5 16.5523 5 16 V8 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditFlipH = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 18px ;10 height: 18px ;11 transform: scale(var(--ggs, 1 ));12 background: linear-gradient(to left, currentColor 22px , transparent 0 ) no-repeat center/2px 22px ;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 6px ;21 height: 14px ;22 border: 2px solid;23 top: 2px ;24 } 25 &::before { 26 border-right: 0 ;27 border-top-left-radius: 3px ;28 border-bottom-left-radius: 3px ;29 } 30 &::after { 31 opacity: 0.5 ;32 border-left: 0 ;33 border-top-right-radius: 3px ;34 border-bottom-right-radius: 3px ;35 right: 0 ;36 } 37 ` 38 39 export const EditFlipH = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledEditFlipH { ...props} ref={ ref} icon-role="edit-flip-h" /> 44 </> 45 ) 46 } , 47 ) 48
Edit Flip H developed into an amazing CSS icon made by practicing attributes like: width, height, transform, background, border, border-left, Some stats, it has: 36 Lines of code at 819b & 588b after compiling. Actually awesome 🙆♂️ .