Rename design interface
1 .gg-rename { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 20px ;
6 height: 16px ;
7 transform: scale(var(--ggs,1 ));
8 background:
9 linear-gradient(
10 to left,currentColor 22px ,
11 transparent 0 )
12 no-repeat 6px center/2px 22px 13 } 14 15 .gg-rename::after ,
16 .gg-rename::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 6px ;
22 height: 12px ;
23 border: 2px solid;
24 top: 2px 25 } 26 27 .gg-rename::before { 28 border-right: 0 ;
29 border-top-left-radius: 3px ;
30 border-bottom-left-radius: 3px 31 } 32 33 .gg-rename::after { 34 width: 10px ;
35 border-left: 0 ;
36 border-top-right-radius: 3px ;
37 border-bottom-right-radius: 3px ;
38 right: 0 39 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M10 4 H8 V6 H5 C3.34315 6 2 7.34315 2 9 V15 C2 16.6569 3.34315 18 5 18 H8 V20 H10 V4 ZM8 8 V16 H5 C4.44772 16 4 15.5523 4 15 V9 C4 8.44772 4.44772 8 5 8 H8 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M19 16 H12 V18 H19 C20.6569 18 22 16.6569 22 15 V9 C22 7.34315 20.6569 6 19 6 H12 V8 H19 C19.5523 8 20 8.44771 20 9 V15 C20 15.5523 19.5523 16 19 16 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledRename = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 20px ;10 height: 16px ;11 transform: scale(var(--ggs, 1 ));12 background: linear-gradient(to left, currentColor 22px , transparent 0 ) no-repeat 6px center/2px 13 22px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 6px ;22 height: 12px ;23 border: 2px solid;24 top: 2px ;25 } 26 &::before { 27 border-right: 0 ;28 border-top-left-radius: 3px ;29 border-bottom-left-radius: 3px ;30 } 31 &::after { 32 width: 10px ;33 border-left: 0 ;34 border-top-right-radius: 3px ;35 border-bottom-right-radius: 3px ;36 right: 0 ;37 } 38 ` 39 40 export const Rename = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledRename { ...props} ref={ ref} icon-role="rename" /> 45 </> 46 ) 47 } , 48 ) 49
Rename became a wonderful CSS icon made by adopting features like: width, height, transform, background, border, border-left,
