Media Podcast

2K Views 52 Downloads - 8 API calls 33 Lines - 609 Bytes Apr 23, 2020 multimedia signs interface

 .gg-media-podcast {
 transform: scale(var(--ggs,1))
}

.gg-media-podcast,
.gg-media-podcast::after,
.gg-media-podcast::before {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 14px;
 height: 14px;
 border: 2px solid;
 border-bottom-color: transparent;
 border-radius: 50%
}

.gg-media-podcast::after,
.gg-media-podcast::before {
 content: "";
 position: absolute;
 width: 6px;
 height: 6px;
 top: 2px;
 left: 2px
}

.gg-media-podcast::after {
 width: 22px;
 height: 22px;
 top: -6px;
 left: -6px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.6361 20.364C4.00738 18.7353 3 16.4853 3 14C3 9.02944 7.02944 5 12 5C16.9706 5 21 9.02944 21 14C21 16.4853 19.9926 18.7353 18.364 20.3639L19.7782 21.7782C21.7688 19.7875 23 17.0376 23 14C23 7.92487 18.0751 3 12 3C5.92487 3 1 7.92487 1 14C1 17.0376 2.23124 19.7876 4.22189 21.7782L5.6361 20.364Z" fill="currentColor" /><path d="M16.9498 18.9497C18.2165 17.683 19 15.933 19 14C19 10.134 15.866 7 12 7C8.13401 7 5 10.134 5 14C5 15.933 5.78353 17.6831 7.05031 18.9498L8.46453 17.5356C7.55967 16.6308 7 15.3807 7 14C7 11.2386 9.23858 9 12 9C14.7614 9 17 11.2386 17 14C17 15.3807 16.4404 16.6307 15.5356 17.5355L16.9498 18.9497Z" fill="currentColor" /><path d="M14.1213 16.1213C14.6642 15.5784 15 14.8284 15 14C15 12.3431 13.6569 11 12 11C10.3431 11 9 12.3431 9 14C9 14.8285 9.33581 15.5785 9.87874 16.1214L11.293 14.7072C11.112 14.5262 11 14.2762 11 14C11 13.4477 11.4477 13 12 13C12.5523 13 13 13.4477 13 14C13 14.2761 12.8881 14.5261 12.7071 14.7071L14.1213 16.1213Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledMediaPodcast = styled.i` & { transform: scale(var(--ggs, 1)); } &, &::after, &::before { box-sizing: border-box; position: relative; display: block; width: 14px; height: 14px; border: 2px solid; border-bottom-color: transparent; border-radius: 50%; } &::after, &::before { content: ''; position: absolute; width: 6px; height: 6px; top: 2px; left: 2px; } &::after { width: 22px; height: 22px; top: -6px; left: -6px; }`export const MediaPodcast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledMediaPodcast {...props} ref={ref} icon-role="media-podcast" /></> ) },)

CSSSVGTSX

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.364C4.00738 18.7353 3 16.4853 3 14C3 9.02944 7.02944 5 12 5C16.9706 5 21 9.02944 21 14C21 16.4853 19.9926 18.7353 18.364 20.3639L19.7782 21.7782C21.7688 19.7875 23 17.0376 23 14C23 7.92487 18.0751 3 12 3C5.92487 3 1 7.92487 1 14C1 17.0376 2.23124 19.7876 4.22189 21.7782L5.6361 20.364Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M16.9498 18.9497C18.2165 17.683 19 15.933 19 14C19 10.134 15.866 7 12 7C8.13401 7 5 10.134 5 14C5 15.933 5.78353 17.6831 7.05031 18.9498L8.46453 17.5356C7.55967 16.6308 7 15.3807 7 14C7 11.2386 9.23858 9 12 9C14.7614 9 17 11.2386 17 14C17 15.3807 16.4404 16.6307 15.5356 17.5355L16.9498 18.9497Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M14.1213 16.1213C14.6642 15.5784 15 14.8284 15 14C15 12.3431 13.6569 11 12 11C10.3431 11 9 12.3431 9 14C9 14.8285 9.33581 15.5785 9.87874 16.1214L11.293 14.7072C11.112 14.5262 11 14.2762 11 14C11 13.4477 11.4477 13 12 13C12.5523 13 13 13.4477 13 14C13 14.2761 12.8881 14.5261 12.7071 14.7071L14.1213 16.1213Z"
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

HTMLCSSJSONXML

MarkupSVG Sprite

Media Podcast became a pure CSS icon made by using properties like: transform, width, height, border, border-bottom-color, border-radius,
Fun to know, it has: 33 Lines of code at 609b & 446b minified. Pretty wonderful 🤗 huhh.

Media Podcast

Thank you!