Menu Cheese interface
1 .gg-menu-cheese { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 10px 8 } 9 10 .gg-menu-cheese::after ,
11 .gg-menu-cheese::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 height: 2px 17 } 18 19 .gg-menu-cheese::before { 20 width: 18px ;
21 background: currentColor;
22 border-radius: 22px ;
23 box-shadow: 0 -6px 0 ,0 -12px 0 ;
24 bottom: 0 25 } 26 27 .gg-menu-cheese::after { 28 width: 2px ;
29 left: 2px ;
30 bottom: 3px ;
31 border-top: 3px solid;
32 border-left: 4px solid transparent;
33 border-right: 4px solid transparent
34 }
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="M3 6 C3 5.44772 3.44772 5 4 5 H20 C20.5523 5 21 5.44772 21 6 C21 6.55228 20.5523 7 20 7 H4 C3.44772 7 3 6.55228 3 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M3 18 C3 17.4477 3.44772 17 4 17 H20 C20.5523 17 21 17.4477 21 18 C21 18.5523 20.5523 19 20 19 H4 C3.44772 19 3 18.5523 3 18 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M3 12 C3 11.4477 3.44772 11 4 11 H20 C20.5523 11 21 11.4477 21 12 C21 12.5523 20.5523 13 20 13 H10.2625 L7.61456 15.6479 L4.96662 13 H4 C3.44772 13 3 12.5523 3 12 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuCheese = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 10px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 height: 2px ;20 } 21 &::before { 22 width: 18px ;23 background: currentColor;24 border-radius: 22px ;25 box-shadow: 0 -6px 0 , 0 -12px 0 ;26 bottom: 0 ;27 } 28 &::after { 29 width: 2px ;30 left: 2px ;31 bottom: 3px ;32 border-top: 3px solid;33 border-left: 4px solid transparent;34 border-right: 4px solid transparent;35 } 36 ` 37 38 export const MenuCheese = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledMenuCheese { ...props} ref={ ref} icon-role="menu-cheese" /> 43 </> 44 ) 45 } , 46 ) 47
Menu Cheese ended up a magic 100% CSS icon created by applying properties such as: transform, width, height, background, border-radius, box-shadow, border-top, border-left, border-right,
