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 ended up an amazing CSS icon made by applying properties as follows: width, height, transform, border-top, border-bottom, background, border-radius,
Fun to know, it has: 39 Lines of code at 805b & 564b minified. Truly awesome 🙆‍♂️ for a icon designed by code.

Font Height

Thank you!