Browser interface multimedia devices
1 .gg-browser { 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-browser::after ,
13 .gg-browser::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 22px ;
19 height: 2px ;
20 background: currentColor;
21 top: 4px 22 } 23 24 .gg-browser::after { 25 border-radius: 3px ;
26 width: 2px ;
27 box-shadow:
28 3px 0 0 ,
29 6px 0 0 ;
30 top: 1px ;
31 left: 1px 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="M4 8 C4.55228 8 5 7.55228 5 7 C5 6.44772 4.55228 6 4 6 C3.44772 6 3 6.44772 3 7 C3 7.55228 3.44772 8 4 8 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8 7 C8 7.55228 7.55228 8 7 8 C6.44772 8 6 7.55228 6 7 C6 6.44772 6.44772 6 7 6 C7.55228 6 8 6.44772 8 7 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M10 8 C10.5523 8 11 7.55228 11 7 C11 6.44772 10.5523 6 10 6 C9.44771 6 9 6.44772 9 7 C9 7.55228 9.44771 8 10 8 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 H3 C2.44772 5 2 5.44772 2 6 V9 H22 V6 C22 5.44772 21.5523 5 21 5 ZM2 18 V11 H22 V18 C22 18.5523 21.5523 19 21 19 H3 C2.44772 19 2 18.5523 2 18 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBrowser = 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 width: 22px ;22 height: 2px ;23 background: currentColor;24 top: 4px ;25 } 26 &::after { 27 border-radius: 3px ;28 width: 2px ;29 box-shadow: 3px 0 0 , 6px 0 0 ;30 top: 1px ;31 left: 1px ;32 } 33 ` 34 35 export const Browser = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledBrowser { ...props} ref={ ref} icon-role="browser" /> 40 </> 41 ) 42 } , 43 ) 44
Browser ended up an amazing CSS icon built by using features as follows: transform, width, height, border, border-radius, background, box-shadow,
