Coffee design
1 .gg-coffee { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 14px ;
8 border: 2px solid;
9 border-radius: 6px ;
10 border-top-left-radius: 0 ;
11 border-top-right-radius: 0 ;
12 margin-left: -4px ;
13 margin-top: 3px 14 } 15 16 .gg-coffee::after ,
17 .gg-coffee::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute
22 } 23 24 .gg-coffee::before { 25 left: 2px ;
26 background: currentColor;
27 box-shadow:
28 4px 0 0 ,
29 8px 0 0 ;
30 border-radius: 3px ;
31 width: 2px ;
32 height: 4px ;
33 top: -7px 34 } 35 36 .gg-coffee::after { 37 width: 6px ;
38 height: 8px ;
39 border: 2px solid;
40 border-radius: 100px ;
41 border-top-left-radius: 0 ;
42 border-bottom-left-radius: 0 ;
43 right: -6px ;
44 top: -1px 45 }
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="M6 2.5 C5.44772 2.5 5 2.94772 5 3.5 V5.5 C5 6.05228 5.44772 6.5 6 6.5 C6.55228 6.5 7 6.05228 7 5.5 V3.5 C7 2.94772 6.55228 2.5 6 2.5 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M13 21.5 C15.973 21.5 18.441 19.3377 18.917 16.5 H19 C21.2091 16.5 23 14.7091 23 12.5 C23 10.2909 21.2091 8.5 19 8.5 V7.5 H1 V15.5 C1 18.8137 3.68629 21.5 7 21.5 H13 ZM3 9.5 V15.5 C3 17.7091 4.79086 19.5 7 19.5 H13 C15.2091 19.5 17 17.7091 17 15.5 V9.5 H3 ZM21 12.5 C21 13.6046 20.1046 14.5 19 14.5 V10.5 C20.1046 10.5 21 11.3954 21 12.5 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M9 3.5 C9 2.94772 9.44771 2.5 10 2.5 C10.5523 2.5 11 2.94772 11 3.5 V5.5 C11 6.05228 10.5523 6.5 10 6.5 C9.44771 6.5 9 6.05228 9 5.5 V3.5 Z" 20 fill="currentColor" 21 /> 22 <path 23 d="M14 2.5 C13.4477 2.5 13 2.94772 13 3.5 V5.5 C13 6.05228 13.4477 6.5 14 6.5 C14.5523 6.5 15 6.05228 15 5.5 V3.5 C15 2.94772 14.5523 2.5 14 2.5 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCoffee = 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: 14px ;12 border: 2px solid;13 border-radius: 6px ;14 border-top-left-radius: 0 ;15 border-top-right-radius: 0 ;16 margin-left: -4px ;17 margin-top: 3px ;18 } 19 &::after , 20 &::before { 21 content: '';22 display: block;23 box-sizing: border-box;24 position: absolute;25 } 26 &::before { 27 left: 2px ;28 background: currentColor;29 box-shadow: 4px 0 0 , 8px 0 0 ;30 border-radius: 3px ;31 width: 2px ;32 height: 4px ;33 top: -7px ;34 } 35 &::after { 36 width: 6px ;37 height: 8px ;38 border: 2px solid;39 border-radius: 100px ;40 border-top-left-radius: 0 ;41 border-bottom-left-radius: 0 ;42 right: -6px ;43 top: -1px ;44 } 45 ` 46 47 export const Coffee = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 48 (props, ref) => { 49 return ( 50 <> 51 <StyledCoffee { ...props} ref={ ref} icon-role="coffee" /> 52 </> 53 ) 54 } , 55 ) 56
Coffee became an amazing pure CSS icon built by using features as follows: transform, width, height, border, border-radius, background, box-shadow,
