Zoom In
4K Views
50 Downloads - 11 API calls
38 Lines - 776 Bytes
Apr 23, 2020 interface
1 .gg-zoom-in { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid;
9 border-radius: 100% ;
10 background:
11 linear-gradient(to bottom,
12 currentColor 5px ,transparent 0 )
13 no-repeat 2px 5px /8px 2px ;
14 margin-top: -4px 15 } 16 17 .gg-zoom-in::after ,
18 .gg-zoom-in::before { 19 content: "";
20 display: block;
21 box-sizing: border-box;
22 position: absolute;
23 width: 2px ;
24 height: 8px ;
25 background: currentColor
26 } 27 28 .gg-zoom-in::after { 29 transform: rotate(-45deg );
30 border-radius: 3px ;
31 top: 10px ;
32 left: 12px 33 } 34 35 .gg-zoom-in::before { 36 top: 2px ;
37 left: 5px 38 }
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="M15.3431 15.2426 C17.6863 12.8995 17.6863 9.1005 15.3431 6.75736 C13 4.41421 9.20101 4.41421 6.85786 6.75736 C4.51472 9.1005 4.51472 12.8995 6.85786 15.2426 C9.20101 17.5858 13 17.5858 15.3431 15.2426 ZM16.7574 5.34315 C19.6425 8.22833 19.8633 12.769 17.4195 15.9075 C17.4348 15.921 17.4498 15.9351 17.4645 15.9497 L21.7071 20.1924 C22.0976 20.5829 22.0976 21.2161 21.7071 21.6066 C21.3166 21.9971 20.6834 21.9971 20.2929 21.6066 L16.0503 17.364 C16.0356 17.3493 16.0215 17.3343 16.008 17.319 C12.8695 19.7628 8.32883 19.542 5.44365 16.6569 C2.31946 13.5327 2.31946 8.46734 5.44365 5.34315 C8.56785 2.21895 13.6332 2.21895 16.7574 5.34315 ZM10.1005 7 H12.1005 V10 H15.1005 V12 H12.1005 V15 H10.1005 V12 H7.10052 V10 H10.1005 V7 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledZoomIn = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid;13 border-radius: 100% ;14 background: linear-gradient(to bottom, currentColor 5px , transparent 0 ) no-repeat 2px 5px /8px 15 2px ; 16 margin-top: -4px ;17 } 18 &::after , 19 &::before { 20 content: '';21 display: block;22 box-sizing: border-box;23 position: absolute;24 width: 2px ;25 height: 8px ;26 background: currentColor;27 } 28 &::after { 29 transform: rotate(-45deg );30 border-radius: 3px ;31 top: 10px ;32 left: 12px ;33 } 34 &::before { 35 top: 2px ;36 left: 5px ;37 } 38 ` 39 40 export const ZoomIn = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledZoomIn { ...props} ref={ ref} icon-role="zoom-in" /> 45 </> 46 ) 47 } , 48 ) 49
Zoom In turned into a wonderful CSS icon made by practicing properties as follows: transform, width, height, border, border-radius, background, Some stats, it has: 38 Lines of code at 776b & 532b after compiling. Actually wonderful 🤗 huhh.