Piano devices multimedia
1 .gg-piano { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 23px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 2px 10 } 11 12 .gg-piano::after ,
13 .gg-piano::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 height: 10px ;
19 background: currentColor;
20 box-shadow:
21 5px 0 0 ,
22 10px 0 0 23 } 24 25 .gg-piano::before { 26 top: -2px ;
27 width: 3px ;
28 left: 3px 29 } 30 31 .gg-piano::after { 32 width: 1px ;
33 bottom: -2px ;
34 left: 4px 35 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M22 21 C23.1046 21 24 20.1046 24 19 V5 C24 3.89543 23.1046 3 22 3 H3 C1.89543 3 1 3.89543 1 5 V19 C1 20.1046 1.89543 21 3 21 H22 ZM11 5 H8.98486 V13 H7.98511 V19 H12 V13 H11 V5 ZM18.0151 19 H22 V5 H19.0151 V13 H18.0151 V19 ZM17.0151 13 H16.0151 V5 H14 V13 H13 V19 H17.0151 V13 ZM6.98511 19 V13 H5.98486 V5 H3 L3 19 H6.98511 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPiano = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 23px ;11 height: 18px ;12 border: 2px solid;13 border-radius: 2px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 height: 10px ;22 background: currentColor;23 box-shadow: 5px 0 0 , 10px 0 0 ;24 } 25 &::before { 26 top: -2px ;27 width: 3px ;28 left: 3px ;29 } 30 &::after { 31 width: 1px ;32 bottom: -2px ;33 left: 4px ;34 } 35 ` 36 37 export const Piano = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledPiano { ...props} ref={ ref} icon-role="piano" /> 42 </> 43 ) 44 } , 45 ) 46
Piano ended up an amazing CSS icon created by adopting attributes like: transform, width, height, border, border-radius, background, box-shadow,
