Code Climate

1K Views 34 Downloads - 23 API calls 32 Lines - 594 Bytes Apr 23, 2020 brands

 .gg-code-climate {
 display: block;
 box-sizing: border-box;
 position: relative;
 transform: scale(var(--ggs,1));
 width: 24px;
 height: 16px
}

.gg-code-climate::after,
.gg-code-climate::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 width: 12px;
 border-left: 4px solid;
 border-top: 4px solid;
 transform: rotate(45deg)
}

.gg-code-climate::before {
 height: 12px;
 left: 2px;
 bottom: -2px
}

.gg-code-climate::after {
 height: 6px;
 right: 0;
 bottom: 6px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.49506 8.1109L3.1311 14.4749L4.54532 15.8891L9.49506 10.9393L14.4448 15.8891L15.859 14.4749L9.49506 8.1109Z" fill="currentColor" /><path d="M14.5049 8.11092L12.5317 10.0842L13.9503 11.494L14.5049 10.9393L19.4547 15.8891L20.8689 14.4749L14.5049 8.11092Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledCodeClimate = styled.i` & { display: block; box-sizing: border-box; position: relative; transform: scale(var(--ggs, 1)); width: 24px; height: 16px; } &::after, &::before { content: ''; display: block; position: absolute; box-sizing: border-box; width: 12px; border-left: 4px solid; border-top: 4px solid; transform: rotate(45deg); } &::before { height: 12px; left: 2px; bottom: -2px; } &::after { height: 6px; right: 0; bottom: 6px; }`export const CodeClimate = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledCodeClimate {...props} ref={ref} icon-role="code-climate" /></> ) },)

CSSSVGTSX

1	.gg-code-climate {
2	display: block;
3	box-sizing: border-box;
4	position: relative;
5	transform: scale(var(--ggs,1));
6	width: 24px;
7	height: 16px
8	}
9
10	.gg-code-climate::after,
11	.gg-code-climate::before {
12	content: "";
13	display: block;
14	position: absolute;
15	box-sizing: border-box;
16	width: 12px;
17	border-left: 4px solid;
18	border-top: 4px solid;
19	transform: rotate(45deg)
20	}
21
22	.gg-code-climate::before {
23	height: 12px;
24	left: 2px;
25	bottom: -2px
26	}
27
28	.gg-code-climate::after {
29	height: 6px;
30	right: 0;
31	bottom: 6px
32	}

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="M9.49506 8.1109L3.1311 14.4749L4.54532 15.8891L9.49506 10.9393L14.4448 15.8891L15.859 14.4749L9.49506 8.1109Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M14.5049 8.11092L12.5317 10.0842L13.9503 11.494L14.5049 10.9393L19.4547 15.8891L20.8689 14.4749L14.5049 8.11092Z"
14	fill="currentColor"
15	/>
16	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Code Climate ended up a magic CSS icon created by adopting features like: transform, width, height, border-left, border-top,
Some stats, it has: 32 Lines of code at 594b & 428b after compiling. Pretty stunning 🤩 for a icon designed by code.

Code Climate

Thank you!