Keyhole design interface
1 .gg-keyhole,
2 .gg-keyhole::after ,
3 .gg-keyhole::before { 4 display: block;
5 box-sizing: border-box;
6 border-radius: 20px 7 } 8 9 .gg-keyhole { 10 position: relative;
11 transform: scale(var(--ggs,1 ));
12 width: 20px ;
13 height: 20px ;
14 border: 2px solid
15 } 16 17 .gg-keyhole::after ,
18 .gg-keyhole::before { 19 content: "";
20 position: absolute
21 } 22 23 .gg-keyhole::before { 24 width: 6px ;
25 height: 6px ;
26 border: 2px solid;
27 left: 5px ;
28 top: 3px 29 } 30 31 .gg-keyhole::after { 32 background: currentColor;
33 width: 2px ;
34 height: 5px ;
35 left: 7px ;
36 bottom: 3px 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="M13 12.8293 C14.1652 12.4175 15 11.3062 15 10 C15 8.34315 13.6569 7 12 7 C10.3431 7 9 8.34315 9 10 C9 11.3062 9.83481 12.4175 11 12.8293 V16 C11 16.5523 11.4477 17 12 17 C12.5523 17 13 16.5523 13 16 V12.8293 ZM11 10 C11 10.5523 11.4477 11 12 11 C12.5523 11 13 10.5523 13 10 C13 9.44772 12.5523 9 12 9 C11.4477 9 11 9.44772 11 10 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M12 2 C6.47715 2 2 6.47715 2 12 C2 17.5228 6.47715 22 12 22 C17.5228 22 22 17.5228 22 12 C22 6.47715 17.5228 2 12 2 ZM4 12 C4 16.4183 7.58172 20 12 20 C16.4183 20 20 16.4183 20 12 C20 7.58172 16.4183 4 12 4 C7.58172 4 4 7.58172 4 12 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledKeyhole = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border-radius: 20px ;11 } 12 & { 13 position: relative;14 transform: scale(var(--ggs, 1 ));15 width: 20px ;16 height: 20px ;17 border: 2px solid;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 } 24 &::before { 25 width: 6px ;26 height: 6px ;27 border: 2px solid;28 left: 5px ;29 top: 3px ;30 } 31 &::after { 32 background: currentColor;33 width: 2px ;34 height: 5px ;35 left: 7px ;36 bottom: 3px ;37 } 38 ` 39 40 export const Keyhole = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledKeyhole { ...props} ref={ ref} icon-role="keyhole" /> 45 </> 46 ) 47 } , 48 ) 49
Keyhole ended up a magic CSS icon built by applying attributes like: .gg-keyhole, border-radius, transform, width, height, border,
