Edit Flip V interface
1 .gg-edit-flip-v { 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/22px 2px 13 } 14 .gg-edit-flip-v::after ,
15 .gg-edit-flip-v::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 14px ;
21 height: 6px ;
22 border: 2px solid;
23 left: 2px 24 } 25 .gg-edit-flip-v::before { 26 border-bottom: 0 ;
27 border-top-left-radius: 3px ;
28 border-top-right-radius: 3px 29 } 30 .gg-edit-flip-v::after { 31 opacity: .5 ;
32 border-top: 0 ;
33 border-bottom-left-radius: 3px ;
34 border-bottom-right-radius: 3px ;
35 bottom: 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="M17 18 C17 18.5523 16.5523 19 16 19 L8 19 C7.44772 19 7 18.5523 7 18 L7 15 L5 15 L5 18 C5 19.6569 6.34315 21 8 21 L16 21 C17.6569 21 19 19.6569 19 18 V15 L17 15 V18 Z" 10 fill="currentColor" 11 fill-opacity="0.5 " 12 /> 13 <path 14 d="M16 5 C16.5523 5 17 5.44772 17 6 V9 H19 V6 C19 4.34315 17.6569 3 16 3 L8 3 C6.34315 3 5 4.34315 5 6 V9 H7 V6 C7 5.44772 7.44772 5 8 5 L16 5 Z" 15 fill="currentColor" 16 /> 17 <path d="M21 13 V11 L3 11 V13 H21 Z" fill="currentColor" /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditFlipV = 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/22px 2px ;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 14px ;21 height: 6px ;22 border: 2px solid;23 left: 2px ;24 } 25 &::before { 26 border-bottom: 0 ;27 border-top-left-radius: 3px ;28 border-top-right-radius: 3px ;29 } 30 &::after { 31 opacity: 0.5 ;32 border-top: 0 ;33 border-bottom-left-radius: 3px ;34 border-bottom-right-radius: 3px ;35 bottom: 0 ;36 } 37 ` 38 39 export const EditFlipV = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledEditFlipV { ...props} ref={ ref} icon-role="edit-flip-v" /> 44 </> 45 ) 46 } , 47 ) 48
Edit Flip V became a CSS icon built by adopting attributes like: width, height, transform, background, border, border-top,
