Menu Cake interface
1 .gg-menu-cake { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 18px 8 } 9 10 .gg-menu-cake::after ,
11 .gg-menu-cake::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 height: 2px ;
17 background: currentColor;
18 border-radius: 22px 19 } 20 21 .gg-menu-cake::before { 22 width: 18px ;
23 box-shadow: 0 -4px 0 ,0 -8px 0 ;
24 left: 1px ;
25 bottom: 2px 26 } 27 28 .gg-menu-cake::after { 29 width: 4px ;
30 height: 4px ;
31 left: 8px 32 }
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 8 C13.1046 8 14 7.10457 14 6 C14 4.89543 13.1046 4 12 4 C10.8954 4 10 4.89543 10 6 C10 7.10457 10.8954 8 12 8 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M5 10 C4.44772 10 4 10.4477 4 11 C4 11.5523 4.44772 12 5 12 H19 C19.5523 12 20 11.5523 20 11 C20 10.4477 19.5523 10 19 10 H5 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M4 15 C4 14.4477 4.44772 14 5 14 H19 C19.5523 14 20 14.4477 20 15 C20 15.5523 19.5523 16 19 16 H5 C4.44772 16 4 15.5523 4 15 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M5 18 C4.44772 18 4 18.4477 4 19 C4 19.5523 4.44772 20 5 20 H19 C19.5523 20 20 19.5523 20 19 C20 18.4477 19.5523 18 19 18 H5 Z" 22 fill="currentColor" 23 /> 24 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuCake = 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: 18px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 height: 2px ;20 background: currentColor;21 border-radius: 22px ;22 } 23 &::before { 24 width: 18px ;25 box-shadow: 0 -4px 0 , 0 -8px 0 ;26 left: 1px ;27 bottom: 2px ;28 } 29 &::after { 30 width: 4px ;31 height: 4px ;32 left: 8px ;33 } 34 ` 35 36 export const MenuCake = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledMenuCake { ...props} ref={ ref} icon-role="menu-cake" /> 41 </> 42 ) 43 } , 44 ) 45
Menu Cake ended up a magic pure CSS icon created by practicing features as follows: transform, width, height, background, border-radius, box-shadow,
