Menu Grid interface
1 .gg-menu-grid-o { 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-o::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 border-radius: 22px ;
29 }
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="M8 6 C8 7.10457 7.10457 8 6 8 C4.89543 8 4 7.10457 4 6 C4 4.89543 4.89543 4 6 4 C7.10457 4 8 4.89543 8 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8 12 C8 13.1046 7.10457 14 6 14 C4.89543 14 4 13.1046 4 12 C4 10.8954 4.89543 10 6 10 C7.10457 10 8 10.8954 8 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M6 20 C7.10457 20 8 19.1046 8 18 C8 16.8954 7.10457 16 6 16 C4.89543 16 4 16.8954 4 18 C4 19.1046 4.89543 20 6 20 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M14 6 C14 7.10457 13.1046 8 12 8 C10.8954 8 10 7.10457 10 6 C10 4.89543 10.8954 4 12 4 C13.1046 4 14 4.89543 14 6 Z" 22 fill="currentColor" 23 /> 24 <path 25 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" 26 fill="currentColor" 27 /> 28 <path 29 d="M14 18 C14 19.1046 13.1046 20 12 20 C10.8954 20 10 19.1046 10 18 C10 16.8954 10.8954 16 12 16 C13.1046 16 14 16.8954 14 18 Z" 30 fill="currentColor" 31 /> 32 <path 33 d="M18 8 C19.1046 8 20 7.10457 20 6 C20 4.89543 19.1046 4 18 4 C16.8954 4 16 4.89543 16 6 C16 7.10457 16.8954 8 18 8 Z" 34 fill="currentColor" 35 /> 36 <path 37 d="M20 12 C20 13.1046 19.1046 14 18 14 C16.8954 14 16 13.1046 16 12 C16 10.8954 16.8954 10 18 10 C19.1046 10 20 10.8954 20 12 Z" 38 fill="currentColor" 39 /> 40 <path 41 d="M18 20 C19.1046 20 20 19.1046 20 18 C20 16.8954 19.1046 16 18 16 C16.8954 16 16 16.8954 16 18 C16 19.1046 16.8954 20 18 20 Z" 42 fill="currentColor" 43 /> 44 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuGridO = 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 border-radius: 22px ;23 } 24 ` 25 26 export const MenuGridO = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 27 (props, ref) => { 28 return ( 29 <> 30 <StyledMenuGridO { ...props} ref={ ref} icon-role="menu-grid-o" /> 31 </> 32 ) 33 } , 34 ) 35
Menu Grid ended up an amazing CSS icon created by applying features as follows: transform, width, height, background, box-shadow, border-radius,
