Sort Az
2K Views
46 Downloads - 10 API calls
33 Lines - 523 Bytes
Apr 23, 2020 interface buttons
1 .gg-sort-az,
2 .gg-sort-az::after ,
3 .gg-sort-az::before { 4 display: block;
5 box-sizing: border-box;
6 height: 2px ;
7 border-radius: 4px ;
8 background: currentColor
9 } 10 11 .gg-sort-az { 12 position: relative;
13 transform: scale(var(--ggs,1 ));
14 width: 8px 15 } 16 17 .gg-sort-az::after ,
18 .gg-sort-az::before { 19 content: "";
20 position: absolute
21 } 22 23 .gg-sort-az::before { 24 width: 12px ;
25 top: -4px ;
26 left: -2px 27 } 28 29 .gg-sort-az::after { 30 width: 4px ;
31 top: 4px ;
32 left: 2px 33 }
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 9 d="M6 8 C6 7.44772 6.44772 7 7 7 H17 C17.5523 7 18 7.44772 18 8 C18 8.55228 17.5523 9 17 9 H7 C6.44772 9 6 8.55228 6 8 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8 12 C8 11.4477 8.44772 11 9 11 H15 C15.5523 11 16 11.4477 16 12 C16 12.5523 15.5523 13 15 13 H9 C8.44772 13 8 12.5523 8 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M11 15 C10.4477 15 10 15.4477 10 16 C10 16.5523 10.4477 17 11 17 H13 C13.5523 17 14 16.5523 14 16 C14 15.4477 13.5523 15 13 15 H11 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSortAz = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 height: 2px ;11 border-radius: 4px ;12 background: currentColor;13 } 14 & { 15 position: relative;16 transform: scale(var(--ggs, 1 ));17 width: 8px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 } 24 &::before { 25 width: 12px ;26 top: -4px ;27 left: -2px ;28 } 29 &::after { 30 width: 4px ;31 top: 4px ;32 left: 2px ;33 } 34 ` 35 36 export const SortAz = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledSortAz { ...props} ref={ ref} icon-role="sort-az" /> 41 </> 42 ) 43 } , 44 ) 45
Sort Az turned into a pure CSS icon built by adopting features like: .gg-sort-az, height, border-radius, background, transform, width, Some stats, it has: 33 Lines of code at 523b & 374b after compression. Truly marvelous 💎 huhh.