Data
Views
69 Downloads - 15 API calls
41 Lines - 696 Bytes
Apr 23, 2020 signs interface multimedia
1 .gg-data { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-data,
6 .gg-data::after ,
7 .gg-data::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 border: 2px solid;
12 border-radius: 50% ;
13 width: 14px ;
14 height: 14px 15 } 16 17 .gg-data::after ,
18 .gg-data::before { 19 content: "";
20 position: absolute;
21 width: 6px ;
22 height: 6px ;
23 top: 2px ;
24 left: 2px 25 } 26 27 .gg-data::after { 28 background: linear-gradient( to left,
29 currentColor 8px ,transparent 0 )
30 no-repeat bottom center/2px 8px ;
31 width: 22px ;
32 height: 22px ;
33 top: -6px ;
34 left: -6px 35 } 36 37 .gg-data,
38 .gg-data::after { 39 border-top-color: transparent;
40 border-bottom-color: transparent
41 }
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 8.88916 C13.6569 8.88916 15 10.2323 15 11.8892 C15 13.1954 14.1652 14.3066 13 14.7185 V19.8892 H11 V14.7185 C9.83481 14.3066 9 13.1954 9 11.8892 C9 10.2323 10.3431 8.88916 12 8.88916 ZM12 10.8892 C12.5523 10.8892 13 11.3369 13 11.8892 C13 12.4414 12.5523 12.8892 12 12.8892 C11.4477 12.8892 11 12.4414 11 11.8892 C11 11.3369 11.4477 10.8892 12 10.8892 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M7.05019 6.93938 C5.78348 8.20612 5 9.9561 5 11.8891 C5 14.0666 5.99426 16.0119 7.55355 17.2957 L8.97712 15.8721 C7.7757 14.9589 7 13.5146 7 11.8891 C7 10.5084 7.55962 9.25841 8.46441 8.35359 L7.05019 6.93938 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M15.5355 8.35348 C16.4403 9.25831 17 10.5083 17 11.8891 C17 13.5146 16.2243 14.959 15.0228 15.8722 L16.4463 17.2958 C18.0057 16.012 19 14.0666 19 11.8891 C19 9.95604 18.2165 8.20602 16.9497 6.93927 L15.5355 8.35348 Z" 20 fill="currentColor" 21 /> 22 <path 23 d="M1 11.8891 C1 8.85152 2.23119 6.10155 4.22176 4.11095 L5.63598 5.52516 C4.00733 7.15383 3 9.40381 3 11.8891 C3 14.3743 4.00733 16.6243 5.63597 18.2529 L4.22175 19.6672 C2.23119 17.6766 1 14.9266 1 11.8891 Z" 24 fill="currentColor" 25 /> 26 <path 27 d="M19.7781 19.6673 C21.7688 17.6767 23 14.9266 23 11.8891 C23 8.85147 21.7688 6.10145 19.7781 4.11084 L18.3639 5.52505 C19.9926 7.15374 21 9.40376 21 11.8891 C21 14.3744 19.9926 16.6244 18.3639 18.2531 L19.7781 19.6673 Z" 28 fill="currentColor" 29 /> 30 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledData = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 border: 2px solid;15 border-radius: 50% ;16 width: 14px ;17 height: 14px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 width: 6px ;24 height: 6px ;25 top: 2px ;26 left: 2px ;27 } 28 &::after { 29 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat bottom30 center/2px 8px ; 31 width: 22px ;32 height: 22px ;33 top: -6px ;34 left: -6px ;35 } 36 &, 37 &::after { 38 border-top-color: transparent;39 border-bottom-color: transparent;40 } 41 ` 42 43 export const Data = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledData { ...props} ref={ ref} icon-role="data" /> 48 </> 49 ) 50 } , 51 ) 52
Data developed into a magic CSS icon created by practicing features like: transform, border, border-radius, width, height, border-bottom-color, Fun facts, it has: 41 Lines of code at 696b & 536b after compression. Quite stunning 🤩 huhh.