Media Live

2K Views 52 Downloads - 7 API calls 38 Lines - 670 Bytes Apr 23, 2020 signs interface multimedia

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

.gg-media-live,
.gg-media-live::after {
 border-top-color: transparent;
 border-bottom-color: transparent
}

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

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

.gg-media-live::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 fill-rule="evenodd" clip-rule="evenodd" d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="currentColor" /></svg>

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

CSSSVGTSX

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 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
18	fill="currentColor"
19	/>
20	<path
21	fill-rule="evenodd"
22	clip-rule="evenodd"
23	d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
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

HTMLCSSJSONXML

MarkupSVG Sprite

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.

Media Live

Thank you!