Calculator interface maths devices
1 .gg-calculator { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 22px ;
8 border: 2px solid;
9 border-radius: 2px 10 } 11 12 .gg-calculator::after ,
13 .gg-calculator::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 10px ;
19 height: 2px ;
20 background: currentColor;
21 top: 2px ;
22 left: 2px 23 } 24 25 .gg-calculator::after { 26 width: 2px ;
27 box-shadow:
28 4px 0 0 ,
29 8px 0 0 ,
30 0 4px 0 ,
31 4px 4px 0 ,
32 8px 4px 0 ,
33 0 8px 0 ,
34 4px 8px 0 ,
35 8px 8px 0 ,
36 8px 6px 0 ;
37 top: 6px 38 }
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="M17 5 H7 V7 H17 V5 Z" fill="currentColor" /> 9 <path d="M7 9 H9 V11 H7 V9 Z" fill="currentColor" /> 10 <path d="M9 13 H7 V15 H9 V13 Z" fill="currentColor" /> 11 <path d="M7 17 H9 V19 H7 V17 Z" fill="currentColor" /> 12 <path d="M13 9 H11 V11 H13 V9 Z" fill="currentColor" /> 13 <path d="M11 13 H13 V15 H11 V13 Z" fill="currentColor" /> 14 <path d="M13 17 H11 V19 H13 V17 Z" fill="currentColor" /> 15 <path d="M15 9 H17 V11 H15 V9 Z" fill="currentColor" /> 16 <path d="M17 13 H15 V19 H17 V13 Z" fill="currentColor" /> 17 <path 18 fill-rule="evenodd" 19 clip-rule="evenodd" 20 d="M3 3 C3 1.89543 3.89543 1 5 1 H19 C20.1046 1 21 1.89543 21 3 V21 C21 22.1046 20.1046 23 19 23 H5 C3.89543 23 3 22.1046 3 21 V3 ZM5 3 H19 V21 H5 V3 Z" 21 fill="currentColor" 22 /> 23 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCalculator = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 22px ;12 border: 2px solid;13 border-radius: 2px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 10px ;22 height: 2px ;23 background: currentColor;24 top: 2px ;25 left: 2px ;26 } 27 &::after { 28 width: 2px ;29 box-shadow: 4px 0 0 , 8px 0 0 , 0 4px 0 , 4px 4px 0 , 8px 4px 0 , 0 8px 0 , 4px 8px 0 , 8px 8px 0 ,30 8px 6px 0 ; 31 top: 6px ;32 } 33 ` 34 35 export const Calculator = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledCalculator { ...props} ref={ ref} icon-role="calculator" /> 40 </> 41 ) 42 } , 43 ) 44
Calculator developed into a wonderful 100% CSS icon made by practicing features like: transform, width, height, border, border-radius, background, box-shadow,
