Globe Alt
Views
Downloads - API calls
34 Lines - 620 Bytes
Apr 23, 2020 interface
1 .gg-globe-alt,
2 .gg-globe-alt::after ,
3 .gg-globe-alt::before { 4 display: block;
5 box-sizing: border-box;
6 height: 18px ;
7 border: 2px solid
8 } 9 10 .gg-globe-alt { 11 position: relative;
12 transform: scale(var(--ggs,1 ));
13 width: 18px ;
14 border-radius: 22px 15 } 16 17 .gg-globe-alt::after ,
18 .gg-globe-alt::before { 19 content: "";
20 position: absolute;
21 width: 8px ;
22 border-radius: 100% ;
23 top: -2px ;
24 left: 3px 25 } 26 27 .gg-globe-alt::after { 28 width: 24px ;
29 height: 20px ;
30 border: 2px solid transparent;
31 border-bottom: 2px solid;
32 top: -11px ;
33 left: -5px 34 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M12 21 C16.9706 21 21 16.9706 21 12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 C3 16.9706 7.02944 21 12 21 ZM14.8055 18.4151 C17.1228 17.4003 18.7847 15.1667 18.9806 12.525 C18.1577 12.9738 17.12 13.3418 15.9371 13.598 C15.7882 15.4676 15.3827 17.1371 14.8055 18.4151 ZM9.1945 5.58487 C7.24725 6.43766 5.76275 8.15106 5.22208 10.244 C5.4537 10.4638 5.84813 10.7341 6.44832 11.0008 C6.89715 11.2003 7.42053 11.3798 8.00537 11.5297 C8.05853 9.20582 8.50349 7.11489 9.1945 5.58487 ZM10.1006 13.9108 C10.2573 15.3675 10.5852 16.6202 10.9992 17.5517 C11.2932 18.2133 11.5916 18.6248 11.8218 18.8439 C11.9037 18.9219 11.9629 18.9634 12 18.9848 C12.0371 18.9634 12.0963 18.9219 12.1782 18.8439 C12.4084 18.6248 12.7068 18.2133 13.0008 17.5517 C13.4148 16.6202 13.7427 15.3675 13.8994 13.9108 C13.2871 13.9692 12.6516 14 12 14 C11.3484 14 10.7129 13.9692 10.1006 13.9108 ZM8.06286 13.598 C8.21176 15.4676 8.61729 17.1371 9.1945 18.4151 C6.8772 17.4003 5.21525 15.1666 5.01939 12.525 C5.84231 12.9738 6.88001 13.3418 8.06286 13.598 ZM13.9997 11.8896 C13.369 11.9609 12.6993 12 12 12 C11.3008 12 10.631 11.9609 10.0003 11.8896 C10.0135 9.66408 10.4229 7.74504 10.9992 6.44832 C11.2932 5.78673 11.5916 5.37516 11.8218 5.15605 C11.9037 5.07812 11.9629 5.03659 12 5.01516 C12.0371 5.03659 12.0963 5.07812 12.1782 5.15605 C12.4084 5.37516 12.7068 5.78673 13.0008 6.44832 C13.5771 7.74504 13.9865 9.66408 13.9997 11.8896 ZM15.9946 11.5297 C15.9415 9.20582 15.4965 7.11489 14.8055 5.58487 C16.7528 6.43766 18.2373 8.15107 18.7779 10.244 C18.5463 10.4638 18.1519 10.7341 17.5517 11.0008 C17.1029 11.2003 16.5795 11.3798 15.9946 11.5297 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGlobeAlt = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 height: 18px ;11 border: 2px solid;12 } 13 & { 14 position: relative;15 transform: scale(var(--ggs, 1 ));16 width: 18px ;17 border-radius: 22px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 width: 8px ;24 border-radius: 100% ;25 top: -2px ;26 left: 3px ;27 } 28 &::after { 29 width: 24px ;30 height: 20px ;31 border: 2px solid transparent;32 border-bottom: 2px solid;33 top: -11px ;34 left: -5px ;35 } 36 ` 37 38 export const GlobeAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledGlobeAlt { ...props} ref={ ref} icon-role="globe-alt" /> 43 </> 44 ) 45 } , 46 ) 47
Globe Alt turned into a 100% CSS icon made by practicing attributes as follows: .gg-globe-alt, height, border, transform, width, border-radius, border-bottom, Some stats, it has: 34 Lines of code at 620b & 450b after compiling. Truly amazing 😲 .