Loupe interface
1 .gg-loupe,
2 .gg-loupe::after { 3 display: block;
4 box-sizing: border-box
5 } 6 7 .gg-loupe { 8 position: relative;
9 transform: scale(var(--ggs,1 ));
10 width: 18px ;
11 height: 18px ;
12 border: 2px solid;
13 border-radius: 22px ;
14 border-bottom-right-radius: 6px ;
15 overflow: hidden;
16 background:
17 linear-gradient(
18 to left,
19 currentColor 8px ,
20 transparent 0 21 ) no-repeat center/8px 2px ,
22 linear-gradient(
23 to left,
24 currentColor 8px ,
25 transparent 0 26 ) no-repeat center/2px 8px 27 } 28 29 .gg-loupe::after { 30 content: "";
31 position: absolute;
32 width: 14px ;
33 height: 14px ;
34 border-radius: 100% ;
35 box-shadow: 0 0 0 6px 36 }
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 d="M11 11 V8 H13 V11 H16 V13 H13 V16 H11 V13 H8 V11 H11 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M3 12 C3 16.9706 7.02944 21 12 21 H18 C19.6569 21 21 19.6569 21 18 V12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 ZM12 5 C15.866 5 19 8.13401 19 12 C19 15.866 15.866 19 12 19 C8.13401 19 5 15.866 5 12 C5 8.13401 8.13401 5 12 5 Z" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLoupe = styled.i` 5 &, 6 &::after { 7 display: block;8 box-sizing: border-box;9 } 10 & { 11 position: relative;12 transform: scale(var(--ggs, 1 ));13 width: 18px ;14 height: 18px ;15 border: 2px solid;16 border-radius: 22px ;17 border-bottom-right-radius: 6px ;18 overflow: hidden;19 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat center/8px 2px ,20 linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat center/2px 8px ; 21 } 22 &::after { 23 content: '';24 position: absolute;25 width: 14px ;26 height: 14px ;27 border-radius: 100% ;28 box-shadow: 0 0 0 6px ;29 } 30 ` 31 32 export const Loupe = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 33 (props, ref) => { 34 return ( 35 <> 36 <StyledLoupe { ...props} ref={ ref} icon-role="loupe" /> 37 </> 38 ) 39 } , 40 ) 41
Loupe turned into a magic 100% CSS icon built by adopting attributes like: .gg-loupe, transform, width, height, border, border-radius, overflow, background, box-shadow,
