Data

Views 69 Downloads - 15 API calls 41 Lines - 696 Bytes Apr 23, 2020 signs interface multimedia

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

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

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

.gg-data::after {
 background: linear-gradient( to left,
 currentColor 8px,transparent 0)
 no-repeat bottom center/2px 8px;
 width: 22px;
 height: 22px;
 top: -6px;
 left: -6px
}

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

<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="M12 8.88916C13.6569 8.88916 15 10.2323 15 11.8892C15 13.1954 14.1652 14.3066 13 14.7185V19.8892H11V14.7185C9.83481 14.3066 9 13.1954 9 11.8892C9 10.2323 10.3431 8.88916 12 8.88916ZM12 10.8892C12.5523 10.8892 13 11.3369 13 11.8892C13 12.4414 12.5523 12.8892 12 12.8892C11.4477 12.8892 11 12.4414 11 11.8892C11 11.3369 11.4477 10.8892 12 10.8892Z" fill="currentColor" /><path d="M7.05019 6.93938C5.78348 8.20612 5 9.9561 5 11.8891C5 14.0666 5.99426 16.0119 7.55355 17.2957L8.97712 15.8721C7.7757 14.9589 7 13.5146 7 11.8891C7 10.5084 7.55962 9.25841 8.46441 8.35359L7.05019 6.93938Z" fill="currentColor" /><path d="M15.5355 8.35348C16.4403 9.25831 17 10.5083 17 11.8891C17 13.5146 16.2243 14.959 15.0228 15.8722L16.4463 17.2958C18.0057 16.012 19 14.0666 19 11.8891C19 9.95604 18.2165 8.20602 16.9497 6.93927L15.5355 8.35348Z" fill="currentColor" /><path d="M1 11.8891C1 8.85152 2.23119 6.10155 4.22176 4.11095L5.63598 5.52516C4.00733 7.15383 3 9.40381 3 11.8891C3 14.3743 4.00733 16.6243 5.63597 18.2529L4.22175 19.6672C2.23119 17.6766 1 14.9266 1 11.8891Z" fill="currentColor" /><path d="M19.7781 19.6673C21.7688 17.6767 23 14.9266 23 11.8891C23 8.85147 21.7688 6.10145 19.7781 4.11084L18.3639 5.52505C19.9926 7.15374 21 9.40376 21 11.8891C21 14.3744 19.9926 16.6244 18.3639 18.2531L19.7781 19.6673Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledData = styled.i` & { transform: scale(var(--ggs, 1)); } &, &::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 { background: linear-gradient(to left, currentColor 8px, transparent 0) no-repeat bottom center/2px 8px; width: 22px; height: 22px; top: -6px; left: -6px; } &, &::after { border-top-color: transparent; border-bottom-color: transparent; }`export const Data = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledData {...props} ref={ref} icon-role="data" /></> ) },)

CSSSVGTSX

1	.gg-data {
2	transform: scale(var(--ggs,1))
3	}
4
5	.gg-data,
6	.gg-data::after,
7	.gg-data::before {
8	box-sizing: border-box;
9	position: relative;
10	display: block;
11	border: 2px solid;
12	border-radius: 50%;
13	width: 14px;
14	height: 14px
15	}
16
17	.gg-data::after,
18	.gg-data::before {
19	content: "";
20	position: absolute;
21	width: 6px;
22	height: 6px;
23	top: 2px;
24	left: 2px
25	}
26
27	.gg-data::after {
28	background: linear-gradient( to left,
29	currentColor 8px,transparent 0)
30	no-repeat bottom center/2px 8px;
31	width: 22px;
32	height: 22px;
33	top: -6px;
34	left: -6px
35	}
36
37	.gg-data,
38	.gg-data::after {
39	border-top-color: transparent;
40	border-bottom-color: transparent
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="M12 8.88916C13.6569 8.88916 15 10.2323 15 11.8892C15 13.1954 14.1652 14.3066 13 14.7185V19.8892H11V14.7185C9.83481 14.3066 9 13.1954 9 11.8892C9 10.2323 10.3431 8.88916 12 8.88916ZM12 10.8892C12.5523 10.8892 13 11.3369 13 11.8892C13 12.4414 12.5523 12.8892 12 12.8892C11.4477 12.8892 11 12.4414 11 11.8892C11 11.3369 11.4477 10.8892 12 10.8892Z"
12	fill="currentColor"
13	/>
14	<path
15	d="M7.05019 6.93938C5.78348 8.20612 5 9.9561 5 11.8891C5 14.0666 5.99426 16.0119 7.55355 17.2957L8.97712 15.8721C7.7757 14.9589 7 13.5146 7 11.8891C7 10.5084 7.55962 9.25841 8.46441 8.35359L7.05019 6.93938Z"
16	fill="currentColor"
17	/>
18	<path
19	d="M15.5355 8.35348C16.4403 9.25831 17 10.5083 17 11.8891C17 13.5146 16.2243 14.959 15.0228 15.8722L16.4463 17.2958C18.0057 16.012 19 14.0666 19 11.8891C19 9.95604 18.2165 8.20602 16.9497 6.93927L15.5355 8.35348Z"
20	fill="currentColor"
21	/>
22	<path
23	d="M1 11.8891C1 8.85152 2.23119 6.10155 4.22176 4.11095L5.63598 5.52516C4.00733 7.15383 3 9.40381 3 11.8891C3 14.3743 4.00733 16.6243 5.63597 18.2529L4.22175 19.6672C2.23119 17.6766 1 14.9266 1 11.8891Z"
24	fill="currentColor"
25	/>
26	<path
27	d="M19.7781 19.6673C21.7688 17.6767 23 14.9266 23 11.8891C23 8.85147 21.7688 6.10145 19.7781 4.11084L18.3639 5.52505C19.9926 7.15374 21 9.40376 21 11.8891C21 14.3744 19.9926 16.6244 18.3639 18.2531L19.7781 19.6673Z"
28	fill="currentColor"
29	/>
30	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledData = 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	border: 2px solid;
15	border-radius: 50%;
16	width: 14px;
17	height: 14px;
18	}
19	&::after,
20	&::before {
21	content: '';
22	position: absolute;
23	width: 6px;
24	height: 6px;
25	top: 2px;
26	left: 2px;
27	}
28	&::after {
29	background: linear-gradient(to left, currentColor 8px, transparent 0) no-repeat bottom
30	center/2px 8px;
31	width: 22px;
32	height: 22px;
33	top: -6px;
34	left: -6px;
35	}
36	&,
37	&::after {
38	border-top-color: transparent;
39	border-bottom-color: transparent;
40	}
41	`
42
43	export const Data = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
44	(props, ref) => {
45	return (
46	<>
47	<StyledData {...props} ref={ref} icon-role="data" />
48	</>
49	)
50	},
51	)
52

HTMLCSSJSONXML

MarkupSVG Sprite

Data developed into a magic CSS icon created by practicing features like: transform, border, border-radius, width, height, border-bottom-color,
Fun facts, it has: 41 Lines of code at 696b & 536b after compression. Quite stunning 🤩 huhh.

Data

Thank you!