Open Collective

Views Downloads - API calls 27 Lines - 550 Bytes Apr 23, 2020 interface

 .gg-open-collective,
.gg-open-collective::before {
 display: block;
 box-sizing: border-box;
 border-radius: 22px
}

.gg-open-collective {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 18px;
 border: 3px solid;
 border-right-color: transparent
}

.gg-open-collective::before {
 content: "";
 position: absolute;
 width: 14px;
 height: 14px;
 border: 3px solid transparent;
 border-right: 3px solid;
 top: -1px;
 right: -3px;
 opacity: .5
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6818 15.7529L18.8116 17.8827C20.1752 16.3052 21 14.249 21 12.0001C21 9.78747 20.2016 7.76133 18.8771 6.19409L16.7444 8.32671C17.5315 9.34177 18 10.6162 18 12.0001C18 13.4203 17.5066 14.7253 16.6818 15.7529Z" fill="currentColor" fill-opacity="0.5" /><path d="M15.6734 16.7445C14.6583 17.5315 13.3839 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C13.4202 6 14.7252 6.49344 15.7528 7.31823L17.8826 5.18843C16.3051 3.82482 14.2489 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C14.2126 21 16.2387 20.2016 17.806 18.8771L15.6734 16.7445Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledOpenCollective = styled.i` &, &::before { display: block; box-sizing: border-box; border-radius: 22px; } & { position: relative; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; border: 3px solid; border-right-color: transparent; } &::before { content: ''; position: absolute; width: 14px; height: 14px; border: 3px solid transparent; border-right: 3px solid; top: -1px; right: -3px; opacity: 0.5; }`export const OpenCollective = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledOpenCollective {...props} ref={ref} icon-role="open-collective" /></> ) },)

CSSSVGTSX

1	.gg-open-collective,
2	.gg-open-collective::before {
3	display: block;
4	box-sizing: border-box;
5	border-radius: 22px
6	}
7
8	.gg-open-collective {
9	position: relative;
10	transform: scale(var(--ggs,1));
11	width: 18px;
12	height: 18px;
13	border: 3px solid;
14	border-right-color: transparent
15	}
16
17	.gg-open-collective::before {
18	content: "";
19	position: absolute;
20	width: 14px;
21	height: 14px;
22	border: 3px solid transparent;
23	border-right: 3px solid;
24	top: -1px;
25	right: -3px;
26	opacity: .5
27	}

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="M16.6818 15.7529L18.8116 17.8827C20.1752 16.3052 21 14.249 21 12.0001C21 9.78747 20.2016 7.76133 18.8771 6.19409L16.7444 8.32671C17.5315 9.34177 18 10.6162 18 12.0001C18 13.4203 17.5066 14.7253 16.6818 15.7529Z"
10	fill="currentColor"
11	fill-opacity="0.5"
12	/>
13	<path
14	d="M15.6734 16.7445C14.6583 17.5315 13.3839 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C13.4202 6 14.7252 6.49344 15.7528 7.31823L17.8826 5.18843C16.3051 3.82482 14.2489 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C14.2126 21 16.2387 20.2016 17.806 18.8771L15.6734 16.7445Z"
15	fill="currentColor"
16	/>
17	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledOpenCollective = styled.i`
5	&,
6	&::before {
7	display: block;
8	box-sizing: border-box;
9	border-radius: 22px;
10	}
11	& {
12	position: relative;
13	transform: scale(var(--ggs, 1));
14	width: 18px;
15	height: 18px;
16	border: 3px solid;
17	border-right-color: transparent;
18	}
19	&::before {
20	content: '';
21	position: absolute;
22	width: 14px;
23	height: 14px;
24	border: 3px solid transparent;
25	border-right: 3px solid;
26	top: -1px;
27	right: -3px;
28	opacity: 0.5;
29	}
30	`
31
32	export const OpenCollective = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
33	(props, ref) => {
34	return (
35	<>
36	<StyledOpenCollective {...props} ref={ref} icon-role="open-collective" />
37	</>
38	)
39	},
40	)
41

HTMLCSSJSONXML

MarkupSVG Sprite

Open Collective turned into a pure CSS icon made by using features as follows: .gg-open-collective, border-radius, transform, width, height, border, border-right-color, border-right, opacity,
Fun facts, it has: 27 Lines of code at 550b & 405b after compression. Quite amazing 😲 don't you think ?.

Open Collective

Thank you!