Ereader devices multimedia
1 .gg-ereader { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 24px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-ereader::after ,
13 .gg-ereader::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 border-radius: 3px ;
19 width: 2px ;
20 height: 18px ;
21 right: 9px ;
22 top: -2px ;
23 background: currentColor
24 } 25 26 .gg-ereader::after { 27 width: 5px ;
28 height: 2px ;
29 box-shadow:0 4px 0 ,0 8px 0 ;
30 top: 2px ;
31 right: 2px 32 }
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="M16 7 C15.4477 7 15 7.44772 15 8 C15 8.55228 15.4477 9 16 9 H19 C19.5523 9 20 8.55228 20 8 C20 7.44772 19.5523 7 19 7 H16 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M15 12 C15 11.4477 15.4477 11 16 11 H19 C19.5523 11 20 11.4477 20 12 C20 12.5523 19.5523 13 19 13 H16 C15.4477 13 15 12.5523 15 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M16 15 C15.4477 15 15 15.4477 15 16 C15 16.5523 15.4477 17 16 17 H19 C19.5523 17 20 16.5523 20 16 C20 15.4477 19.5523 15 19 15 H16 Z" 18 fill="currentColor" 19 /> 20 <path 21 fill-rule="evenodd" 22 clip-rule="evenodd" 23 d="M3 3 C1.34315 3 0 4.34315 0 6 V18 C0 19.6569 1.34315 21 3 21 H21 C22.6569 21 24 19.6569 24 18 V6 C24 4.34315 22.6569 3 21 3 H3 ZM21 5 H13 V19 H21 C21.5523 19 22 18.5523 22 18 V6 C22 5.44772 21.5523 5 21 5 ZM3 5 H11 V19 H3 C2.44772 19 2 18.5523 2 18 V6 C2 5.44772 2.44772 5 3 5 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEreader = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 24px ;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 border-radius: 3px ;22 width: 2px ;23 height: 18px ;24 right: 9px ;25 top: -2px ;26 background: currentColor;27 } 28 &::after { 29 width: 5px ;30 height: 2px ;31 box-shadow: 0 4px 0 , 0 8px 0 ;32 top: 2px ;33 right: 2px ;34 } 35 ` 36 37 export const Ereader = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledEreader { ...props} ref={ ref} icon-role="ereader" /> 42 </> 43 ) 44 } , 45 ) 46
Ereader turned into a wonderful pure CSS icon created by using features as follows: transform, width, height, border, border-radius, background, box-shadow,
