Font Spacing
Views
Downloads - API calls
39 Lines - 810 Bytes
Apr 23, 2020 interface
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 21 H21 V3 H19 L19 21 Z" fill="currentColor" /> 9 <path d="M5 21 H3 V3 H5 L5 21 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M9.46416 16.0479 L9.95281 14.9999 H14.0473 L14.5359 16.0478 C14.7693 16.5484 15.3643 16.7649 15.8649 16.5315 C16.3654 16.2981 16.582 15.7031 16.3485 15.2026 L12.9676 7.95213 C12.7888 7.56877 12.398 7.35199 11.9999 7.37637 C11.6019 7.35214 11.2112 7.5689 11.0325 7.95216 L7.65155 15.2026 C7.41814 15.7032 7.6347 16.2981 8.13524 16.5315 C8.63578 16.7649 9.23076 16.5484 9.46416 16.0479 ZM12.0001 10.6096 L10.8854 12.9999 H13.1147 L12.0001 10.6096 Z" 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
Font Spacing turned into an amazing 100% CSS icon made by applying properties as follows: width, height, transform, border-left, border-right, background, border-radius, Fun to know, it has: 39 Lines of code at 810b & 569b after compiling. Truly marvelous 💎 .