Nametag interface
1 .gg-nametag { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 6px ;
6 height: 6px ;
7 border: 2px solid;
8 transform: scale(var(--ggs,1 ))
9 } 10 11 .gg-nametag::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 width: 12px ;
17 height: 12px ;
18 box-shadow:
19 -5px -5px 0 -3px ,
20 5px 5px 0 -3px ,
21 5px -5px 0 -3px ,
22 -5px 5px 0 -3px ;
23 left: -5px ;
24 top: -5px 25 }
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="M4 14 V20 H10 V18 H6 V14 H4 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M9 9 V15 H15 V9 H9 ZM13 11 H11 V13 H13 V11 Z" 13 fill="currentColor" 14 /> 15 <path d="M4 10 V4 H10 V6 H6 V10 H4 Z" fill="currentColor" /> 16 <path d="M20 10 V4 H14 V6 H18 V10 H20 Z" fill="currentColor" /> 17 <path d="M20 14 V20 H14 V18 H18 V14 H20 Z" fill="currentColor" /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledNametag = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 6px ;10 height: 6px ;11 border: 2px solid;12 transform: scale(var(--ggs, 1 ));13 } 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 width: 12px ;20 height: 12px ;21 box-shadow: -5px -5px 0 -3px , 5px 5px 0 -3px , 5px -5px 0 -3px , -5px 5px 0 -3px ;22 left: -5px ;23 top: -5px ;24 } 25 ` 26 27 export const Nametag = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 28 (props, ref) => { 29 return ( 30 <> 31 <StyledNametag { ...props} ref={ ref} icon-role="nametag" /> 32 </> 33 ) 34 } , 35 ) 36
Nametag is a magic pure CSS icon made by practicing properties as follows: width, height, border, transform, box-shadow,
