Password interface
1 .gg-password { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 30px ;
7 height: 12px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-password::after ,
13 .gg-password::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 4px ;
19 background: currentColor
20 } 21 22 .gg-password::before { 23 left: 2px ;
24 top: 2px ;
25 box-shadow:
26 6px 0 0 ,
27 12px 0 0 ;
28 height: 4px ;
29 border-radius: 100% 30 } 31 32 .gg-password::after { 33 height: 2px ;
34 right: 2px ;
35 bottom: 2px 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 9 d="M6 12 C6 12.5523 5.55228 13 5 13 C4.44772 13 4 12.5523 4 12 C4 11.4477 4.44772 11 5 11 C5.55228 11 6 11.4477 6 12 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M9 13 C9.55228 13 10 12.5523 10 12 C10 11.4477 9.55228 11 9 11 C8.44771 11 8 11.4477 8 12 C8 12.5523 8.44771 13 9 13 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M14 12 C14 12.5523 13.5523 13 13 13 C12.4477 13 12 12.5523 12 12 C12 11.4477 12.4477 11 13 11 C13.5523 11 14 11.4477 14 12 Z" 18 fill="currentColor" 19 /> 20 <path d="M20 11 H16 V13 H20 V11 Z" fill="currentColor" /> 21 <path 22 fill-rule="evenodd" 23 clip-rule="evenodd" 24 d="M2 6 C0.895431 6 0 6.89543 0 8 V16 C0 17.1046 0.89543 18 2 18 H22 C23.1046 18 24 17.1046 24 16 V8 C24 6.89543 23.1046 6 22 6 H2 ZM22 8 H2 L2 16 H22 V8 Z" 25 fill="currentColor" 26 /> 27 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPassword = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 30px ;11 height: 12px ;12 border: 2px solid;13 border-radius: 3px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 4px ;22 background: currentColor;23 } 24 &::before { 25 left: 2px ;26 top: 2px ;27 box-shadow: 6px 0 0 , 12px 0 0 ;28 height: 4px ;29 border-radius: 100% ;30 } 31 &::after { 32 height: 2px ;33 right: 2px ;34 bottom: 2px ;35 } 36 ` 37 38 export const Password = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledPassword { ...props} ref={ ref} icon-role="password" /> 43 </> 44 ) 45 } , 46 ) 47
Password ended up an amazing 100% CSS icon created by applying attributes as follows: transform, width, height, border, border-radius, background, box-shadow,
