Font Height

Views Downloads - API calls 39 Lines - 805 Bytes Apr 23, 2020 interface

 .gg-font-height {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 18px;
 height: 18px;
 transform: scale(var(--ggs,1));
 border-top: 2px solid;
 border-bottom: 2px solid;
 background:
 linear-gradient(
 to left,
 currentColor 10px,
 transparent 0
 ) no-repeat center 8px/6px 2px
}

.gg-font-height::after,
.gg-font-height::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 3px;
 width: 2px;
 height: 10px;
 background: currentColor;
 top: 2px
}

.gg-font-height::before {
 transform: rotate(25deg);
 left: 6px
}

.gg-font-height::after {
 transform: rotate(-25deg);
 right: 6px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 5V3H3V5H21Z" fill="currentColor" /><path d="M21 19V21H3V19H21Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 7.37636C11.602 7.35207 11.2112 7.56874 11.0325 7.95204L7.65154 15.2025C7.41815 15.7031 7.6347 16.2981 8.13522 16.5315C8.63577 16.7649 9.23074 16.5484 9.46417 16.0477L9.95278 14.9999H14.0473L14.5359 16.0477C14.7693 16.5484 15.3643 16.7649 15.8648 16.5315C16.3654 16.2981 16.5819 15.7031 16.3485 15.2025L12.9676 7.95204C12.7888 7.56874 12.3981 7.35207 12.0001 7.37636ZM13.1147 12.9999H10.8854L12.0001 10.6095L13.1147 12.9999Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledFontHeight = styled.i` & { box-sizing: border-box; position: relative; display: block; width: 18px; height: 18px; transform: scale(var(--ggs, 1)); border-top: 2px solid; border-bottom: 2px solid; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat center 8px/6px 2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; width: 2px; height: 10px; background: currentColor; top: 2px; } &::before { transform: rotate(25deg); left: 6px; } &::after { transform: rotate(-25deg); right: 6px; }`export const FontHeight = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledFontHeight {...props} ref={ref} icon-role="font-height" /></> ) },)

CSSSVGTSX

1	.gg-font-height {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	width: 18px;
6	height: 18px;
7	transform: scale(var(--ggs,1));
8	border-top: 2px solid;
9	border-bottom: 2px solid;
10	background:
11	linear-gradient(
12	to left,
13	currentColor 10px,
14	transparent 0
15	) no-repeat center 8px/6px 2px
16	}
17
18	.gg-font-height::after,
19	.gg-font-height::before {
20	content: "";
21	display: block;
22	box-sizing: border-box;
23	position: absolute;
24	border-radius: 3px;
25	width: 2px;
26	height: 10px;
27	background: currentColor;
28	top: 2px
29	}
30
31	.gg-font-height::before {
32	transform: rotate(25deg);
33	left: 6px
34	}
35
36	.gg-font-height::after {
37	transform: rotate(-25deg);
38	right: 6px
39	}

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 d="M21 5V3H3V5H21Z" fill="currentColor" />
9	<path d="M21 19V21H3V19H21Z" fill="currentColor" />
10	<path
11	fill-rule="evenodd"
12	clip-rule="evenodd"
13	d="M12.0001 7.37636C11.602 7.35207 11.2112 7.56874 11.0325 7.95204L7.65154 15.2025C7.41815 15.7031 7.6347 16.2981 8.13522 16.5315C8.63577 16.7649 9.23074 16.5484 9.46417 16.0477L9.95278 14.9999H14.0473L14.5359 16.0477C14.7693 16.5484 15.3643 16.7649 15.8648 16.5315C16.3654 16.2981 16.5819 15.7031 16.3485 15.2025L12.9676 7.95204C12.7888 7.56874 12.3981 7.35207 12.0001 7.37636ZM13.1147 12.9999H10.8854L12.0001 10.6095L13.1147 12.9999Z"
14	fill="currentColor"
15	/>
16	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Font Height turned into a magic pure CSS icon built by adopting attributes like: width, height, transform, border-top, border-bottom, background, border-radius,
Some stats, it has: 39 Lines of code at 805b & 564b after compiling. Pretty stunning 🤩 don't you think ?.

Font Height

Thank you!