Font Height
Views
Downloads - API calls
39 Lines - 805 Bytes
Apr 23, 2020 interface
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 5 V3 H3 V5 H21 Z" fill="currentColor" /> 9 <path d="M21 19 V21 H3 V19 H21 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M12.0001 7.37636 C11.602 7.35207 11.2112 7.56874 11.0325 7.95204 L7.65154 15.2025 C7.41815 15.7031 7.6347 16.2981 8.13522 16.5315 C8.63577 16.7649 9.23074 16.5484 9.46417 16.0477 L9.95278 14.9999 H14.0473 L14.5359 16.0477 C14.7693 16.5484 15.3643 16.7649 15.8648 16.5315 C16.3654 16.2981 16.5819 15.7031 16.3485 15.2025 L12.9676 7.95204 C12.7888 7.56874 12.3981 7.35207 12.0001 7.37636 ZM13.1147 12.9999 H10.8854 L12.0001 10.6095 L13.1147 12.9999 Z" 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
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 ?.