Menu Left
2K Views
57 Downloads - 8 API calls
28 Lines - 479 Bytes
Apr 23, 2020 content buttons interface
1 .gg-menu-left { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-menu-left,
6 .gg-menu-left::after ,
7 .gg-menu-left::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 20px ;
12 height: 2px ;
13 border-radius: 3px ;
14 background: currentColor
15 } 16 17 .gg-menu-left::after ,
18 .gg-menu-left::before { 19 content: "";
20 position: absolute;
21 top: -6px ;
22 width: 10px 23 } 24 25 .gg-menu-left::after { 26 top: 6px ;
27 width: 14px 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 9 d="M2 5.99519 C2 5.44556 2.44556 5 2.99519 5 H11.0048 C11.5544 5 12 5.44556 12 5.99519 C12 6.54482 11.5544 6.99039 11.0048 6.99039 H2.99519 C2.44556 6.99039 2 6.54482 2 5.99519 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M2 11.9998 C2 11.4501 2.44556 11.0046 2.99519 11.0046 H21.0048 C21.5544 11.0046 22 11.4501 22 11.9998 C22 12.5494 21.5544 12.9949 21.0048 12.9949 H2.99519 C2.44556 12.9949 2 12.5494 2 11.9998 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M2.99519 17.0096 C2.44556 17.0096 2 17.4552 2 18.0048 C2 18.5544 2.44556 19 2.99519 19 H15.0048 C15.5544 19 16 18.5544 16 18.0048 C16 17.4552 15.5544 17.0096 15.0048 17.0096 H2.99519 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuLeft = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 20px ;15 height: 2px ;16 border-radius: 3px ;17 background: currentColor;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 top: -6px ;24 width: 10px ;25 } 26 &::after { 27 top: 6px ;28 width: 14px ;29 } 30 ` 31 32 export const MenuLeft = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 33 (props, ref) => { 34 return ( 35 <> 36 <StyledMenuLeft { ...props} ref={ ref} icon-role="menu-left" /> 37 </> 38 ) 39 } , 40 ) 41
Menu Left ended up a wonderful CSS icon built by adopting attributes as follows: transform, width, height, border-radius, background, Some stats, it has: 28 Lines of code at 479b & 351b minified. Actually awesome 🙆♂️ .