Mic
3K Views
53 Downloads - 13 API calls
41 Lines - 771 Bytes
Apr 23, 2020 interface multimedia
1 .gg-mic { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 12px ;
8 border-bottom-left-radius: 120px ;
9 border-bottom-right-radius: 120px ;
10 border: 2px solid;
11 border-top: 0 ;
12 margin-top: 3px 13 } 14 15 .gg-mic::after ,
16 .gg-mic::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute
21 } 22 23 .gg-mic::after { 24 border: 2px solid;
25 width: 8px ;
26 height: 18px ;
27 left: 2px ;
28 top: -10px ;
29 border-radius: 4px 30 } 31 32 .gg-mic::before { 33 width: 10px ;
34 height: 4px ;
35 top: 12px ;
36 left: 1px ;
37 border-right: 4px solid transparent;
38 box-shadow:
39 0 2px 0 ,
40 inset -2px 0 0 41 }
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="M9 4 C9 2.34315 10.3431 1 12 1 C13.6569 1 15 2.34315 15 4 V12 C15 13.6569 13.6569 15 12 15 C10.3431 15 9 13.6569 9 12 V4 ZM13 4 V12 C13 12.5523 12.5523 13 12 13 C11.4477 13 11 12.5523 11 12 V4 C11 3.44772 11.4477 3 12 3 C12.5523 3 13 3.44772 13 4 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M18 12 C18 14.973 15.8377 17.441 13 17.917 V21 H17 V23 H7 V21 H11 V17.917 C8.16229 17.441 6 14.973 6 12 V9 H8 V12 C8 14.2091 9.79086 16 12 16 C14.2091 16 16 14.2091 16 12 V9 H18 V12 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMic = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 12px ;12 border-bottom-left-radius: 120px ;13 border-bottom-right-radius: 120px ;14 border: 2px solid;15 border-top: 0 ;16 margin-top: 3px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 } 25 &::after { 26 border: 2px solid;27 width: 8px ;28 height: 18px ;29 left: 2px ;30 top: -10px ;31 border-radius: 4px ;32 } 33 &::before { 34 width: 10px ;35 height: 4px ;36 top: 12px ;37 left: 1px ;38 border-right: 4px solid transparent;39 box-shadow: 0 2px 0 , inset -2px 0 0 ;40 } 41 ` 42 43 export const Mic = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledMic { ...props} ref={ ref} icon-role="mic" /> 48 </> 49 ) 50 } , 51 ) 52
Mic is a wonderful pure CSS icon made by using properties such as: transform, width, height, border, border-top, border-radius, border-right, box-shadow, Fun facts, it has: 41 Lines of code at 771b & 537b after compiling. Pretty amazing 😲 huhh.