Globe
3K Views
47 Downloads - 24 API calls
42 Lines - 852 Bytes
Apr 23, 2020 interface
1 .gg-globe { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 10px ;
8 border: 2px solid;
9 border-radius: 100px ;
10 margin-left: -3px ;
11 margin-top: -7px 12 } 13 14 .gg-globe::after ,
15 .gg-globe::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute
20 } 21 22 .gg-globe::before { 23 top: 11px ;
24 border-right: 2px solid transparent;
25 box-shadow:0 2px 0 ,inset -2px 0 0 ;
26 left: 1px ;
27 width: 6px ;
28 height: 2px 29 } 30 31 .gg-globe::after { 32 width: 16px ;
33 height: 10px ;
34 border-radius: 50px ;
35 border-top-left-radius: 0 ;
36 border-top-right-radius: 0 ;
37 border: 2px solid;
38 border-top-color: transparent;
39 right: -7px ;
40 bottom: -5px ;
41 transform: rotate(-35deg )
42 }
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="M6.85327 8 C6.85327 5.23858 9.09185 3 11.8533 3 C14.6147 3 16.8533 5.23858 16.8533 8 C16.8533 10.7614 14.6147 13 11.8533 13 C9.09185 13 6.85327 10.7614 6.85327 8 ZM11.8533 11 C10.1964 11 8.85327 9.65685 8.85327 8 C8.85327 6.34315 10.1964 5 11.8533 5 C13.5101 5 14.8533 6.34315 14.8533 8 C14.8533 9.65685 13.5101 11 11.8533 11 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M5 12.1294 C6.25216 14.2031 8.4189 15.6624 10.9414 15.9486 V18 H8.85327 V20 H14.8533 V18 H12.9414 V15.9266 C16.8449 15.3958 19.8532 12.0492 19.8532 8.00001 C19.8532 6.43638 19.4046 4.97752 18.6291 3.74512 L16.9253 4.79326 C17.513 5.72084 17.8532 6.82069 17.8532 8.00001 C17.8532 11.3137 15.167 14 11.8532 14 C9.66611 14 7.75231 12.8298 6.70381 11.0813 L5 12.1294 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGlobe = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 10px ;12 border: 2px solid;13 border-radius: 100px ;14 margin-left: -3px ;15 margin-top: -7px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 } 24 &::before { 25 top: 11px ;26 border-right: 2px solid transparent;27 box-shadow: 0 2px 0 , inset -2px 0 0 ;28 left: 1px ;29 width: 6px ;30 height: 2px ;31 } 32 &::after { 33 width: 16px ;34 height: 10px ;35 border-radius: 50px ;36 border-top-left-radius: 0 ;37 border-top-right-radius: 0 ;38 border: 2px solid;39 border-top-color: transparent;40 right: -7px ;41 bottom: -5px ;42 transform: rotate(-35deg );43 } 44 ` 45 46 export const Globe = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 47 (props, ref) => { 48 return ( 49 <> 50 <StyledGlobe { ...props} ref={ ref} icon-role="globe" /> 51 </> 52 ) 53 } , 54 ) 55
Globe ended up an amazing pure CSS icon made by applying attributes such as: transform, width, height, border, border-radius, border-right, box-shadow, border-top-color, Fun to know, it has: 42 Lines of code at 852b & 617b after compression. Truly wonderful 🤗 for a CSS designed icon.