Media Podcast
2K Views
49 Downloads - 7 API calls
33 Lines - 609 Bytes
Apr 23, 2020 multimedia signs interface
1 .gg-media-podcast { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-media-podcast,
6 .gg-media-podcast::after ,
7 .gg-media-podcast::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 14px ;
12 height: 14px ;
13 border: 2px solid;
14 border-bottom-color: transparent;
15 border-radius: 50% 16 } 17 18 .gg-media-podcast::after ,
19 .gg-media-podcast::before { 20 content: "";
21 position: absolute;
22 width: 6px ;
23 height: 6px ;
24 top: 2px ;
25 left: 2px 26 } 27 28 .gg-media-podcast::after { 29 width: 22px ;
30 height: 22px ;
31 top: -6px ;
32 left: -6px 33 }
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="M5.6361 20.364 C4.00738 18.7353 3 16.4853 3 14 C3 9.02944 7.02944 5 12 5 C16.9706 5 21 9.02944 21 14 C21 16.4853 19.9926 18.7353 18.364 20.3639 L19.7782 21.7782 C21.7688 19.7875 23 17.0376 23 14 C23 7.92487 18.0751 3 12 3 C5.92487 3 1 7.92487 1 14 C1 17.0376 2.23124 19.7876 4.22189 21.7782 L5.6361 20.364 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16.9498 18.9497 C18.2165 17.683 19 15.933 19 14 C19 10.134 15.866 7 12 7 C8.13401 7 5 10.134 5 14 C5 15.933 5.78353 17.6831 7.05031 18.9498 L8.46453 17.5356 C7.55967 16.6308 7 15.3807 7 14 C7 11.2386 9.23858 9 12 9 C14.7614 9 17 11.2386 17 14 C17 15.3807 16.4404 16.6307 15.5356 17.5355 L16.9498 18.9497 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M14.1213 16.1213 C14.6642 15.5784 15 14.8284 15 14 C15 12.3431 13.6569 11 12 11 C10.3431 11 9 12.3431 9 14 C9 14.8285 9.33581 15.5785 9.87874 16.1214 L11.293 14.7072 C11.112 14.5262 11 14.2762 11 14 C11 13.4477 11.4477 13 12 13 C12.5523 13 13 13.4477 13 14 C13 14.2761 12.8881 14.5261 12.7071 14.7071 L14.1213 16.1213 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMediaPodcast = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 14px ;15 height: 14px ;16 border: 2px solid;17 border-bottom-color: transparent;18 border-radius: 50% ;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 width: 6px ;25 height: 6px ;26 top: 2px ;27 left: 2px ;28 } 29 &::after { 30 width: 22px ;31 height: 22px ;32 top: -6px ;33 left: -6px ;34 } 35 ` 36 37 export const MediaPodcast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledMediaPodcast { ...props} ref={ ref} icon-role="media-podcast" /> 42 </> 43 ) 44 } , 45 ) 46
Media Podcast is a magic CSS icon made by adopting features such as: transform, width, height, border, border-bottom-color, border-radius, Some stats, it has: 33 Lines of code at 609b & 446b after compression. Quite awesome 🙆♂️ huhh.