Eye
15K Views
82 Downloads - 42 API calls
37 Lines - 684 Bytes
Apr 23, 2020 buttons signs design interface
1 .gg-eye { 2 position: relative;
3 display: block;
4 transform: scale(var(--ggs,1 ));
5 width: 24px ;
6 height: 18px ;
7 border-bottom-right-radius: 100px ;
8 border-bottom-left-radius: 100px ;
9 overflow: hidden;
10 box-sizing: border-box
11 } 12 13 .gg-eye::after ,
14 .gg-eye::before { 15 content: "";
16 display: block;
17 border-radius: 100px ;
18 position: absolute;
19 box-sizing: border-box
20 } 21 22 .gg-eye::after { 23 top: 2px ;
24 box-shadow:
25 inset 0 -8px 0 2px ,
26 inset 0 0 0 2px ;
27 width: 24px ;
28 height: 24px 29 } 30 31 .gg-eye::before { 32 width: 8px ;
33 height: 8px ;
34 border: 2px solid;
35 bottom: 4px ;
36 left: 8px 37 }
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="M16 12 C16 14.2091 14.2091 16 12 16 C9.79086 16 8 14.2091 8 12 C8 9.79086 9.79086 8 12 8 C14.2091 8 16 9.79086 16 12 ZM14 12 C14 13.1046 13.1046 14 12 14 C10.8954 14 10 13.1046 10 12 C10 10.8954 10.8954 10 12 10 C13.1046 10 14 10.8954 14 12 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M12 3 C17.5915 3 22.2898 6.82432 23.6219 12 C22.2898 17.1757 17.5915 21 12 21 C6.40848 21 1.71018 17.1757 0.378052 12 C1.71018 6.82432 6.40848 3 12 3 ZM12 19 C7.52443 19 3.73132 16.0581 2.45723 12 C3.73132 7.94186 7.52443 5 12 5 C16.4756 5 20.2687 7.94186 21.5428 12 C20.2687 16.0581 16.4756 19 12 19 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEye = styled.i` 5 & { 6 position: relative;7 display: block;8 transform: scale(var(--ggs, 1 ));9 width: 24px ;10 height: 18px ;11 border-bottom-right-radius: 100px ;12 border-bottom-left-radius: 100px ;13 overflow: hidden;14 box-sizing: border-box;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 border-radius: 100px ;21 position: absolute;22 box-sizing: border-box;23 } 24 &::after { 25 top: 2px ;26 box-shadow: inset 0 -8px 0 2px , inset 0 0 0 2px ;27 width: 24px ;28 height: 24px ;29 } 30 &::before { 31 width: 8px ;32 height: 8px ;33 border: 2px solid;34 bottom: 4px ;35 left: 8px ;36 } 37 ` 38 39 export const Eye = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledEye { ...props} ref={ ref} icon-role="eye" /> 44 </> 45 ) 46 } , 47 ) 48
Eye developed into an amazing CSS icon made by applying properties like: transform, width, height, overflow, border-radius, box-shadow, border, Fun facts, it has: 37 Lines of code at 684b & 478b after compression. Pretty marvelous 💎 don't you think ?.