Keyboard devices interface
1 .gg-keyboard { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-keyboard::after ,
13 .gg-keyboard::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 height: 2px ;
19 border-radius: 4px ;
20 background: currentColor
21 } 22 23 .gg-keyboard::before { 24 top: 2px ;
25 box-shadow:
26 4px 0 0 ,
27 8px 0 0 ,
28 0 4px 0 ,
29 4px 4px 0 ,
30 8px 4px 0 31 ;
32 width: 2px ;
33 left: 2px 34 } 35 36 .gg-keyboard::after { 37 width: 8px ;
38 bottom: 2px ;
39 left: 3px 40 }
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 9 C8.55228 9 9 8.55228 9 8 C9 7.44772 8.55228 7 8 7 C7.44772 7 7 7.44772 7 8 C7 8.55228 7.44772 9 8 9 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M9 15 C8.44772 15 8 15.4477 8 16 C8 16.5523 8.44772 17 9 17 H15 C15.5523 17 16 16.5523 16 16 C16 15.4477 15.5523 15 15 15 H9 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M9 12 C9 12.5523 8.55228 13 8 13 C7.44772 13 7 12.5523 7 12 C7 11.4477 7.44772 11 8 11 C8.55228 11 9 11.4477 9 12 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M12 9 C12.5523 9 13 8.55228 13 8 C13 7.44772 12.5523 7 12 7 C11.4477 7 11 7.44772 11 8 C11 8.55228 11.4477 9 12 9 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M13 12 C13 12.5523 12.5523 13 12 13 C11.4477 13 11 12.5523 11 12 C11 11.4477 11.4477 11 12 11 C12.5523 11 13 11.4477 13 12 Z" 26 fill="currentColor" 27 /> 28 <path 29 d="M16 9 C16.5523 9 17 8.55228 17 8 C17 7.44772 16.5523 7 16 7 C15.4477 7 15 7.44772 15 8 C15 8.55228 15.4477 9 16 9 Z" 30 fill="currentColor" 31 /> 32 <path 33 d="M17 12 C17 12.5523 16.5523 13 16 13 C15.4477 13 15 12.5523 15 12 C15 11.4477 15.4477 11 16 11 C16.5523 11 17 11.4477 17 12 Z" 34 fill="currentColor" 35 /> 36 <path 37 fill-rule="evenodd" 38 clip-rule="evenodd" 39 d="M3 6 C3 4.34315 4.34315 3 6 3 H18 C19.6569 3 21 4.34315 21 6 V18 C21 19.6569 19.6569 21 18 21 H6 C4.34315 21 3 19.6569 3 18 V6 ZM6 5 H18 C18.5523 5 19 5.44772 19 6 V18 C19 18.5523 18.5523 19 18 19 H6 C5.44772 19 5 18.5523 5 18 V6 C5 5.44772 5.44772 5 6 5 Z" 40 fill="currentColor" 41 /> 42 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledKeyboard = 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: 18px ;12 border: 2px solid;13 border-radius: 3px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 height: 2px ;22 border-radius: 4px ;23 background: currentColor;24 } 25 &::before { 26 top: 2px ;27 box-shadow: 4px 0 0 , 8px 0 0 , 0 4px 0 , 4px 4px 0 , 8px 4px 0 ;28 width: 2px ;29 left: 2px ;30 } 31 &::after { 32 width: 8px ;33 bottom: 2px ;34 left: 3px ;35 } 36 ` 37 38 export const Keyboard = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledKeyboard { ...props} ref={ ref} icon-role="keyboard" /> 43 </> 44 ) 45 } , 46 ) 47
Keyboard developed into a wonderful CSS icon created by adopting features like: transform, width, height, border, border-radius, background, box-shadow,
