Edit Mask buttons design interface
1 .gg-edit-mask,
2 .gg-edit-mask::after { 3 display: block;
4 box-sizing: border-box;
5 border-radius: 22px 6 } 7 8 .gg-edit-mask { 9 position: relative;
10 transform: scale(var(--ggs,1 ));
11 width: 20px ;
12 height: 20px ;
13 border: 2px solid;
14 overflow: hidden
15 } 16 17 .gg-edit-mask::after { 18 content: "";
19 position: absolute;
20 width: 4px ;
21 height: 4px ;
22 background: currentColor;
23 top: 6px ;
24 left: 6px ;
25 box-shadow:
26 0 7px 0 1px ,
27 0 -7px 0 1px ,
28 -7px 0 0 1px ,
29 7px 0 0 1px 30 }
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="M12 14 C13.1046 14 14 13.1046 14 12 C14 10.8954 13.1046 10 12 10 C10.8954 10 10 10.8954 10 12 C10 13.1046 10.8954 14 12 14 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M12 22 C6.47716 22 2 17.5228 2 12 C2 6.47717 6.47716 2 12 2 C17.5228 2 22 6.47717 22 12 C22 17.5228 17.5228 22 12 22 ZM9.0307 19.4308 C9.01047 19.29 9 19.1462 9 19 C9 17.3431 10.3431 16 12 16 C13.6569 16 15 17.3431 15 19 C15 19.1462 14.9895 19.29 14.9693 19.4308 C16.9993 18.6189 18.619 16.9993 19.4308 14.9692 C19.2901 14.9895 19.1463 15 19 15 C17.3431 15 16 13.6569 16 12 C16 10.3431 17.3431 9 19 9 C19.0637 9 19.127 9.00195 19.1897 9.00586 C19.271 9.01099 19.3514 9.01929 19.4308 9.03076 C18.6189 7.00073 16.9993 5.3811 14.9693 4.56921 C14.9895 4.70996 15 4.85376 15 5 C15 6.65686 13.6569 8 12 8 C10.3431 8 9 6.65686 9 5 C9 4.85376 9.01048 4.70996 9.03072 4.56921 C7.0007 5.3811 5.38106 7.00073 4.56915 9.03076 C4.64857 9.01929 4.729 9.01099 4.8103 9.00586 C4.87303 9.00195 4.93628 9 5 9 C6.65686 9 8 10.3431 8 12 C8 13.6569 6.65686 15 5 15 C4.8537 15 4.70985 14.9895 4.56915 14.9692 C5.38104 16.9993 7.00069 18.6189 9.0307 19.4308 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditMask = styled.i` 5 &, 6 &::after { 7 display: block;8 box-sizing: border-box;9 border-radius: 22px ;10 } 11 & { 12 position: relative;13 transform: scale(var(--ggs, 1 ));14 width: 20px ;15 height: 20px ;16 border: 2px solid;17 overflow: hidden;18 } 19 &::after { 20 content: '';21 position: absolute;22 width: 4px ;23 height: 4px ;24 background: currentColor;25 top: 6px ;26 left: 6px ;27 box-shadow: 0 7px 0 1px , 0 -7px 0 1px , -7px 0 0 1px , 7px 0 0 1px ;28 } 29 ` 30 31 export const EditMask = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledEditMask { ...props} ref={ ref} icon-role="edit-mask" /> 36 </> 37 ) 38 } , 39 ) 40
Edit Mask ended up a 100% CSS icon made by practicing properties like: .gg-edit-mask, border-radius, transform, width, height, border, overflow, background, box-shadow,
