Menu Grid interface
1 .gg-menu-grid-r { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 } 9 10 .gg-menu-grid-r::before { 11 content: "";
12 display: block;
13 box-sizing: border-box;
14 position: absolute;
15 width: 4px ;
16 height: 4px ;
17 background: currentColor;
18 box-shadow:
19 0 6px 0 ,
20 6px 6px 0 ,
21 12px 6px 0 ,
22 6px 12px 0 ,
23 12px 12px 0 ,
24 6px 0 0 ,
25 12px 0 0 ,
26 0 12px 0 27 ;
28 }
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 d="M4 4 H8 V8 H4 V4 Z" fill="currentColor" /> 9 <path d="M4 10 H8 V14 H4 V10 Z" fill="currentColor" /> 10 <path d="M8 16 H4 V20 H8 V16 Z" fill="currentColor" /> 11 <path d="M10 4 H14 V8 H10 V4 Z" fill="currentColor" /> 12 <path d="M14 10 H10 V14 H14 V10 Z" fill="currentColor" /> 13 <path d="M10 16 H14 V20 H10 V16 Z" fill="currentColor" /> 14 <path d="M20 4 H16 V8 H20 V4 Z" fill="currentColor" /> 15 <path d="M16 10 H20 V14 H16 V10 Z" fill="currentColor" /> 16 <path d="M20 16 H16 V20 H20 V16 Z" fill="currentColor" /> 17 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuGridR = 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 } 13 &::before { 14 content: '';15 display: block;16 box-sizing: border-box;17 position: absolute;18 width: 4px ;19 height: 4px ;20 background: currentColor;21 box-shadow: 0 6px 0 , 6px 6px 0 , 12px 6px 0 , 6px 12px 0 , 12px 12px 0 , 6px 0 0 , 12px 0 0 , 0 12px 0 ;22 } 23 ` 24 25 export const MenuGridR = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 26 (props, ref) => { 27 return ( 28 <> 29 <StyledMenuGridR { ...props} ref={ ref} icon-role="menu-grid-r" /> 30 </> 31 ) 32 } , 33 ) 34
Menu Grid turned into a pure CSS icon built by using attributes as follows: transform, width, height, background, box-shadow,
