Media Live
2K Views
52 Downloads - 7 API calls
38 Lines - 670 Bytes
Apr 23, 2020 signs interface multimedia
1 .gg-media-live { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-media-live,
6 .gg-media-live::after { 7 border-top-color: transparent;
8 border-bottom-color: transparent
9 } 10 11 .gg-media-live,
12 .gg-media-live::after ,
13 .gg-media-live::before { 14 box-sizing: border-box;
15 position: relative;
16 display: block;
17 border: 2px solid;
18 border-radius: 50% ;
19 width: 14px ;
20 height: 14px 21 } 22 23 .gg-media-live::after ,
24 .gg-media-live::before { 25 content: "";
26 position: absolute;
27 width: 6px ;
28 height: 6px ;
29 top: 2px ;
30 left: 2px 31 } 32 33 .gg-media-live::after { 34 width: 22px ;
35 height: 22px ;
36 top: -6px ;
37 left: -6px 38 }
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="M15 12 C15 13.6569 13.6569 15 12 15 C10.3431 15 9 13.6569 9 12 C9 10.3431 10.3431 9 12 9 C13.6569 9 15 10.3431 15 12 ZM13 12 C13 12.5523 12.5523 13 12 13 C11.4477 13 11 12.5523 11 12 C11 11.4477 11.4477 11 12 11 C12.5523 11 13 11.4477 13 12 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M12 19 C15.866 19 19 15.866 19 12 C19 8.13401 15.866 5 12 5 C8.13401 5 5 8.13401 5 12 C5 15.866 8.13401 19 12 19 ZM12 17 C14.7614 17 17 14.7614 17 12 C17 9.23858 14.7614 7 12 7 C9.23858 7 7 9.23858 7 12 C7 14.7614 9.23858 17 12 17 Z" 18 fill="currentColor" 19 /> 20 <path 21 fill-rule="evenodd" 22 clip-rule="evenodd" 23 d="M12 23 C18.0751 23 23 18.0751 23 12 C23 5.92487 18.0751 1 12 1 C5.92487 1 1 5.92487 1 12 C1 18.0751 5.92487 23 12 23 ZM12 21 C16.9706 21 21 16.9706 21 12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 C3 16.9706 7.02944 21 12 21 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMediaLive = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after { 10 border-top-color: transparent;11 border-bottom-color: transparent;12 } 13 &, 14 &::after , 15 &::before { 16 box-sizing: border-box;17 position: relative;18 display: block;19 border: 2px solid;20 border-radius: 50% ;21 width: 14px ;22 height: 14px ;23 } 24 &::after , 25 &::before { 26 content: '';27 position: absolute;28 width: 6px ;29 height: 6px ;30 top: 2px ;31 left: 2px ;32 } 33 &::after { 34 width: 22px ;35 height: 22px ;36 top: -6px ;37 left: -6px ;38 } 39 ` 40 41 export const MediaLive = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledMediaLive { ...props} ref={ ref} icon-role="media-live" /> 46 </> 47 ) 48 } , 49 ) 50
Media Live became a wonderful 100% CSS icon created by using attributes like: transform, border-bottom-color, border, border-radius, width, height, Fun facts, it has: 38 Lines of code at 670b & 491b minified. Pretty awesome 🙆♂️ for a CSS designed icon.