Profile interface signs
1 .gg-profile,
2 .gg-profile::after ,
3 .gg-profile::before { 4 display: block;
5 box-sizing: border-box;
6 border: 2px solid;
7 border-radius: 100px 8 } 9 10 .gg-profile { 11 overflow: hidden;
12 transform: scale(var(--ggs,1 ));
13 width: 22px ;
14 height: 22px ;
15 position: relative
16 } 17 18 .gg-profile::after ,
19 .gg-profile::before { 20 content: "";
21 position: absolute;
22 top: 2px ;
23 left: 5px ;
24 width: 8px ;
25 height: 8px 26 } 27 28 .gg-profile::after { 29 border-radius: 200px ;
30 top: 11px ;
31 left: 0px ;
32 width: 18px ;
33 height: 18px 34 }
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 9 C16 11.2091 14.2091 13 12 13 C9.79086 13 8 11.2091 8 9 C8 6.79086 9.79086 5 12 5 C14.2091 5 16 6.79086 16 9 ZM14 9 C14 10.1046 13.1046 11 12 11 C10.8954 11 10 10.1046 10 9 C10 7.89543 10.8954 7 12 7 C13.1046 7 14 7.89543 14 9 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M12 1 C5.92487 1 1 5.92487 1 12 C1 18.0751 5.92487 23 12 23 C18.0751 23 23 18.0751 23 12 C23 5.92487 18.0751 1 12 1 ZM3 12 C3 14.0902 3.71255 16.014 4.90798 17.5417 C6.55245 15.3889 9.14627 14 12.0645 14 C14.9448 14 17.5092 15.3531 19.1565 17.4583 C20.313 15.9443 21 14.0524 21 12 C21 7.02944 16.9706 3 12 3 C7.02944 3 3 7.02944 3 12 ZM12 21 C9.84977 21 7.87565 20.2459 6.32767 18.9878 C7.59352 17.1812 9.69106 16 12.0645 16 C14.4084 16 16.4833 17.1521 17.7538 18.9209 C16.1939 20.2191 14.1881 21 12 21 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledProfile = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border: 2px solid;11 border-radius: 100px ;12 } 13 & { 14 overflow: hidden;15 transform: scale(var(--ggs, 1 ));16 width: 22px ;17 height: 22px ;18 position: relative;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 top: 2px ;25 left: 5px ;26 width: 8px ;27 height: 8px ;28 } 29 &::after { 30 border-radius: 200px ;31 top: 11px ;32 left: 0px ;33 width: 18px ;34 height: 18px ;35 } 36 ` 37 38 export const Profile = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledProfile { ...props} ref={ ref} icon-role="profile" /> 43 </> 44 ) 45 } , 46 ) 47
Profile ended up a wonderful pure CSS icon made by practicing attributes like: .gg-profile, border, border-radius, transform, width, height,
