Webcam multimedia devices interface
1 .gg-webcam { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 8px ;
7 height: 8px ;
8 border: 2px solid transparent;
9 box-shadow:
10 0 0 0 2px ,
11 inset 0 0 0 2px ;
12 border-radius: 100px ;
13 margin-top: -4px 14 } 15 16 .gg-webcam::after { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 10px ;
22 height: 4px ;
23 border-right: 4px solid transparent;
24 box-shadow:
25 0 2px 0 ,
26 inset -2px 0 0 ;
27 bottom: -6px ;
28 left: -3px 29 }
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="M13 10 C13 10.5523 12.5523 11 12 11 C11.4477 11 11 10.5523 11 10 C11 9.44772 11.4477 9 12 9 C12.5523 9 13 9.44772 13 10 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M13 14.9 C15.2822 14.4367 17 12.419 17 10 C17 7.23858 14.7614 5 12 5 C9.23858 5 7 7.23858 7 10 C7 12.419 8.71776 14.4367 11 14.9 V17 H7 V19 H17 V17 H13 V14.9 ZM12 13 C13.6569 13 15 11.6569 15 10 C15 8.34315 13.6569 7 12 7 C10.3431 7 9 8.34315 9 10 C9 11.6569 10.3431 13 12 13 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledWebcam = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 8px ;11 height: 8px ;12 border: 2px solid transparent;13 box-shadow: 0 0 0 2px , inset 0 0 0 2px ;14 border-radius: 100px ;15 margin-top: -4px ;16 } 17 &::after { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 10px ;23 height: 4px ;24 border-right: 4px solid transparent;25 box-shadow: 0 2px 0 , inset -2px 0 0 ;26 bottom: -6px ;27 left: -3px ;28 } 29 ` 30 31 export const Webcam = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledWebcam { ...props} ref={ ref} icon-role="webcam" /> 36 </> 37 ) 38 } , 39 ) 40
Webcam turned into an amazing pure CSS icon built by applying properties like: transform, width, height, border, box-shadow, border-radius, border-right,
