Font Spacing

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

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

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

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

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

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 21H21V3H19L19 21Z" fill="currentColor" /><path d="M5 21H3V3H5L5 21Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M9.46416 16.0479L9.95281 14.9999H14.0473L14.5359 16.0478C14.7693 16.5484 15.3643 16.7649 15.8649 16.5315C16.3654 16.2981 16.582 15.7031 16.3485 15.2026L12.9676 7.95213C12.7888 7.56877 12.398 7.35199 11.9999 7.37637C11.6019 7.35214 11.2112 7.5689 11.0325 7.95216L7.65155 15.2026C7.41814 15.7032 7.6347 16.2981 8.13524 16.5315C8.63578 16.7649 9.23076 16.5484 9.46416 16.0479ZM12.0001 10.6096L10.8854 12.9999H13.1147L12.0001 10.6096Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledFontSpacing = styled.i` & { box-sizing: border-box; position: relative; display: block; width: 18px; height: 16px; transform: scale(var(--ggs, 1)); border-left: 2px solid; border-right: 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: 4px; } &::after { transform: rotate(-25deg); right: 4px; }`export const FontSpacing = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledFontSpacing {...props} ref={ref} icon-role="font-spacing" /></> ) },)

CSSSVGTSX

1	.gg-font-spacing {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	width: 18px;
6	height: 16px;
7	transform: scale(var(--ggs,1));
8	border-left: 2px solid;
9	border-right: 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-spacing::after,
19	.gg-font-spacing::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-spacing::before {
32	transform: rotate(25deg);
33	left: 4px
34	}
35
36	.gg-font-spacing::after {
37	transform: rotate(-25deg);
38	right: 4px
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="M19 21H21V3H19L19 21Z" fill="currentColor" />
9	<path d="M5 21H3V3H5L5 21Z" fill="currentColor" />
10	<path
11	fill-rule="evenodd"
12	clip-rule="evenodd"
13	d="M9.46416 16.0479L9.95281 14.9999H14.0473L14.5359 16.0478C14.7693 16.5484 15.3643 16.7649 15.8649 16.5315C16.3654 16.2981 16.582 15.7031 16.3485 15.2026L12.9676 7.95213C12.7888 7.56877 12.398 7.35199 11.9999 7.37637C11.6019 7.35214 11.2112 7.5689 11.0325 7.95216L7.65155 15.2026C7.41814 15.7032 7.6347 16.2981 8.13524 16.5315C8.63578 16.7649 9.23076 16.5484 9.46416 16.0479ZM12.0001 10.6096L10.8854 12.9999H13.1147L12.0001 10.6096Z"
14	fill="currentColor"
15	/>
16	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledFontSpacing = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	width: 18px;
10	height: 16px;
11	transform: scale(var(--ggs, 1));
12	border-left: 2px solid;
13	border-right: 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: 4px;
32	}
33	&::after {
34	transform: rotate(-25deg);
35	right: 4px;
36	}
37	`
38
39	export const FontSpacing = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
40	(props, ref) => {
41	return (
42	<>
43	<StyledFontSpacing {...props} ref={ref} icon-role="font-spacing" />
44	</>
45	)
46	},
47	)
48

HTMLCSSJSONXML

MarkupSVG Sprite

Font Spacing became a magic pure CSS icon created by adopting features like: width, height, transform, border-left, border-right, background, border-radius,
Fun to know, it has: 39 Lines of code at 810b & 569b minified. Quite stunning 🤩 huhh.

Font Spacing

Thank you!