Debug interface design
1 .gg-debug { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 12px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 22px 10 } 11 12 .gg-debug::after ,
13 .gg-debug::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute
18 } 19 20 .gg-debug::before { 21 width: 8px ;
22 height: 4px ;
23 border: 2px solid;
24 top: -4px ;
25 border-bottom-left-radius: 10px ;
26 border-bottom-right-radius: 10px ;
27 border-top: 0 28 } 29 30 .gg-debug::after { 31 background: currentColor;
32 width: 4px ;
33 height: 2px ;
34 border-radius: 5px ;
35 top: 4px ;
36 left: 2px ;
37 box-shadow:
38 0 4px 0 ,
39 -6px -2px 0 ,
40 -6px 2px 0 ,
41 -6px 6px 0 ,
42 6px -2px 0 ,
43 6px 2px 0 ,
44 6px 6px 0 45 }
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="M10 11 C10 10.4477 10.4477 10 11 10 H13 C13.5523 10 14 10.4477 14 11 C14 11.5523 13.5523 12 13 12 H11 C10.4477 12 10 11.5523 10 11 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M11 14 C10.4477 14 10 14.4477 10 15 C10 15.5523 10.4477 16 11 16 H13 C13.5523 16 14 15.5523 14 15 C14 14.4477 13.5523 14 13 14 H11 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M9.09447 4.74918 C8.41606 4.03243 8 3.0648 8 2 H10 C10 3.10457 10.8954 4 12 4 C13.1046 4 14 3.10457 14 2 H16 C16 3.0648 15.5839 4.03243 14.9055 4.74918 C16.1782 5.45491 17.1673 6.6099 17.6586 8 H19 C19.5523 8 20 8.44772 20 9 C20 9.55229 19.5523 10 19 10 H18 V12 H19 C19.5523 12 20 12.4477 20 13 C20 13.5523 19.5523 14 19 14 H18 V16 H19 C19.5523 16 20 16.4477 20 17 C20 17.5523 19.5523 18 19 18 H17.6586 C16.8349 20.3304 14.6124 22 12 22 C9.38756 22 7.16508 20.3304 6.34141 18 H5 C4.44772 18 4 17.5523 4 17 C4 16.4477 4.44772 16 5 16 H6 V14 H5 C4.44772 14 4 13.5523 4 13 C4 12.4477 4.44772 12 5 12 H6 V10 H5 C4.44772 10 4 9.55229 4 9 C4 8.44772 4.44772 8 5 8 H6.34141 C6.83274 6.6099 7.82181 5.45491 9.09447 4.74918 ZM8 16 V10 C8 7.79086 9.79086 6 12 6 C14.2091 6 16 7.79086 16 10 V16 C16 18.2091 14.2091 20 12 20 C9.79086 20 8 18.2091 8 16 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDebug = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 12px ;11 height: 18px ;12 border: 2px solid;13 border-radius: 22px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 } 22 &::before { 23 width: 8px ;24 height: 4px ;25 border: 2px solid;26 top: -4px ;27 border-bottom-left-radius: 10px ;28 border-bottom-right-radius: 10px ;29 border-top: 0 ;30 } 31 &::after { 32 background: currentColor;33 width: 4px ;34 height: 2px ;35 border-radius: 5px ;36 top: 4px ;37 left: 2px ;38 box-shadow: 0 4px 0 , -6px -2px 0 , -6px 2px 0 , -6px 6px 0 , 6px -2px 0 , 6px 2px 0 , 6px 6px 0 ;39 } 40 ` 41 42 export const Debug = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledDebug { ...props} ref={ ref} icon-role="debug" /> 47 </> 48 ) 49 } , 50 ) 51
Debug ended up a 100% CSS icon made by using properties such as: transform, width, height, border, border-radius, border-top, box-shadow,
