Girl signs
1 .gg-girl,
2 .gg-girl::after ,
3 .gg-girl::before { 4 display: block;
5 box-sizing: border-box;
6 border-radius: 42px 7 } 8 9 .gg-girl { 10 position: relative;
11 transform: scale(var(--ggs,1 ));
12 width: 20px ;
13 height: 20px ;
14 overflow: hidden;
15 box-shadow: inset 0 0 0 2px 16 } 17 18 .gg-girl::after ,
19 .gg-girl::before { 20 content: "";
21 position: absolute;
22 width: 2px ;
23 height: 2px ;
24 background: currentColor;
25 box-shadow: 6px 0 0 ;
26 left: 6px ;
27 top: 10px 28 } 29 30 .gg-girl::after { 31 width: 20px ;
32 height: 20px ;
33 top: -11px ;
34 left: -12px ;
35 box-shadow: 17px -4px 0 3px 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="M10 12 C10 12.5523 9.55228 13 9 13 C8.44772 13 8 12.5523 8 12 C8 11.4477 8.44772 11 9 11 C9.55228 11 10 11.4477 10 12 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M15 13 C15.5523 13 16 12.5523 16 12 C16 11.4477 15.5523 11 15 11 C14.4477 11 14 11.4477 14 12 C14 12.5523 14.4477 13 15 13 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M12.0244 2.00003 L12 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.74235 17.9425 2.43237 12.788 2.03059 L12.7886 2.0282 C12.5329 2.00891 12.278 1.99961 12.0244 2.00003 ZM12 20 C16.4183 20 20 16.4183 20 12 C20 11.3014 19.9105 10.6237 19.7422 9.97775 C16.1597 10.2313 12.7359 8.52461 10.7605 5.60246 C9.31322 7.07886 7.2982 7.99666 5.06879 8.00253 C4.38902 9.17866 4 10.5439 4 12 C4 16.4183 7.58172 20 12 20 ZM11.9785 4.00003 L12.0236 4.00003 L12 4 L11.9785 4.00003 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGirl = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border-radius: 42px ;11 } 12 & { 13 position: relative;14 transform: scale(var(--ggs, 1 ));15 width: 20px ;16 height: 20px ;17 overflow: hidden;18 box-shadow: inset 0 0 0 2px ;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 width: 2px ;25 height: 2px ;26 background: currentColor;27 box-shadow: 6px 0 0 ;28 left: 6px ;29 top: 10px ;30 } 31 &::after { 32 width: 20px ;33 height: 20px ;34 top: -11px ;35 left: -12px ;36 box-shadow: 17px -4px 0 3px ;37 } 38 ` 39 40 export const Girl = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledGirl { ...props} ref={ ref} icon-role="girl" /> 45 </> 46 ) 47 } , 48 ) 49
Girl turned into a 100% CSS icon created by using attributes as follows: .gg-girl, border-radius, transform, width, height, overflow, box-shadow, background,
