Qr multimedia interface devices
1 .gg-qr { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-qr,
6 .gg-qr::after { 7 box-sizing: border-box;
8 position: relative;
9 display: block;
10 width: 14px ;
11 height: 14px ;
12 box-shadow:
13 -6px -6px 0 -4px ,
14 6px 6px 0 -4px ,
15 6px -6px 0 -4px ,
16 -6px 6px 0 -4px 17 } 18 19 .gg-qr::after { 20 content: "";
21 position: absolute;
22 width: 4px ;
23 height: 4px ;
24 background: currentColor;
25 box-shadow:
26 0 6px 0 ,
27 6px 6px 0 ,
28 6px 0 0 ;
29 top: 2px ;
30 left: 2px 31 }
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="M9 3 H3 V9 H5 V5 H9 V3 ZM3 21 V15 H5 V19 H9 V21 H3 ZM15 3 V5 H19 V9 H21 V3 H15 ZM19 15 H21 V21 H15 V19 H19 V15 ZM7 7 H11 V11 H7 V7 ZM7 13 H11 V17 H7 V13 ZM17 7 H13 V11 H17 V7 ZM13 13 H17 V17 H13 V13 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledQr = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after { 10 box-sizing: border-box;11 position: relative;12 display: block;13 width: 14px ;14 height: 14px ;15 box-shadow: -6px -6px 0 -4px , 6px 6px 0 -4px , 6px -6px 0 -4px , -6px 6px 0 -4px ;16 } 17 &::after { 18 content: '';19 position: absolute;20 width: 4px ;21 height: 4px ;22 background: currentColor;23 box-shadow: 0 6px 0 , 6px 6px 0 , 6px 0 0 ;24 top: 2px ;25 left: 2px ;26 } 27 ` 28 29 export const Qr = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>((props, ref) => { 30 return ( 31 <> 32 <StyledQr { ...props} ref={ ref} icon-role="qr" /> 33 </> 34 ) 35 } )36
Qr became an amazing pure CSS icon created by applying features such as: transform, width, height, box-shadow, background,
