Edit Shadows design interface
1 .gg-edit-shadows { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid transparent;
9 box-shadow: 0 0 0 2px ;
10 border-radius: 100px ;
11 overflow: hidden
12 } 13 14 .gg-edit-shadows::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 6px ;
20 height: 14px ;
21 right: 0 ;
22 top: -1px ;
23 background:
24 repeating-linear-gradient( to bottom,
25 currentColor, currentColor 2px ,
26 transparent 0px , transparent 3px )
27 } 28 29 .gg-edit-shadows::after { 30 content: "";
31 display: block;
32 box-sizing: border-box;
33 position: absolute;
34 width: 6px ;
35 height: 14px ;
36 left: 0 ;
37 background: currentColor
38 }
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="M15.3056 6.99194 C14.3578 6.36502 13.2215 6 12 6 C8.68629 6 6 8.68629 6 12 C6 15.3137 8.68629 18 12 18 C13.2267 18 14.3675 17.6318 15.3178 17 H12 V16 H16.4722 C16.9906 15.4208 17.3981 14.7404 17.6614 13.9919 H12 V12.9919 H17.9184 C17.9721 12.6693 18 12.3379 18 12 C18 11.6683 17.9731 11.3428 17.9213 11.0258 H12 V10.0258 H17.6676 C17.4033 9.26689 16.9909 8.57742 16.465 7.99194 H12 V6.99194 H15.3056 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M22 12 C22 6.47715 17.5228 2 12 2 C6.47715 2 2 6.47715 2 12 C2 17.5228 6.47715 22 12 22 C17.5228 22 22 17.5228 22 12 ZM12 20 C16.4183 20 20 16.4183 20 12 C20 7.58172 16.4183 4 12 4 C7.58172 4 4 7.58172 4 12 C4 16.4183 7.58172 20 12 20 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditShadows = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid transparent;13 box-shadow: 0 0 0 2px ;14 border-radius: 100px ;15 overflow: hidden;16 } 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 6px ;23 height: 14px ;24 right: 0 ;25 top: -1px ;26 background: repeating-linear-gradient(27 to bottom, 28 currentColor, 29 currentColor 2px , 30 transparent 0px , 31 transparent 3px 32 ); 33 } 34 &::after { 35 content: '';36 display: block;37 box-sizing: border-box;38 position: absolute;39 width: 6px ;40 height: 14px ;41 left: 0 ;42 background: currentColor;43 } 44 ` 45 46 export const EditShadows = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 47 (props, ref) => { 48 return ( 49 <> 50 <StyledEditShadows { ...props} ref={ ref} icon-role="edit-shadows" /> 51 </> 52 ) 53 } , 54 ) 55
Edit Shadows turned into a pure CSS icon created by adopting properties like: transform, width, height, border, box-shadow, border-radius, overflow, background,
