Thermometer interface
1 .gg-thermometer { 2 position: relative;
3 display: block;
4 transform: scale(var(--ggs,1 ));
5 width: 22px ;
6 height: 22px 7 } 8 9 .gg-thermometer::after ,
10 .gg-thermometer::before { 11 content: "";
12 display: block;
13 position: absolute;
14 width: 2px ;
15 border-radius: 22px ;
16 transform: rotate(45deg )
17 } 18 19 .gg-thermometer::before { 20 height: 12px ;
21 border: 2px solid transparent;
22 box-shadow:
23 0 0 0 2px ,
24 inset 0 0 0 6px ;
25 right: 6px ;
26 top: 1px 27 } 28 29 .gg-thermometer::after { 30 height: 8px ;
31 background: currentColor;
32 bottom: 0 ;
33 left: 3px 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 d="M16.9498 5.63615 C17.3403 5.24563 17.9735 5.24563 18.364 5.63615 C18.7545 6.02668 18.7545 6.65984 18.364 7.05037 L11.2929 14.1214 C10.9024 14.512 10.2693 14.512 9.87873 14.1214 C9.48821 13.7309 9.48821 13.0977 9.87873 12.7072 L16.9498 5.63615 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M7.82813 17.5862 C9.7695 18.8725 12.4109 18.6603 14.1214 16.9499 L21.1924 9.8788 C23.1451 7.92617 23.1451 4.76035 21.1924 2.80773 C19.2398 0.855106 16.074 0.855106 14.1214 2.80773 L7.0503 9.8788 C5.33984 11.5893 5.12771 14.2307 6.41392 16.172 L2.80766 19.7783 C2.41714 20.1688 2.41714 20.802 2.80766 21.1925 C3.19819 21.583 3.83135 21.583 4.22188 21.1925 L7.82813 17.5862 ZM12.7072 15.5356 L19.7782 8.46458 C20.9498 7.29301 20.9498 5.39351 19.7782 4.22194 C18.6067 3.05037 16.7072 3.05037 15.5356 4.22194 L8.46452 11.293 C7.29294 12.4646 7.29294 14.3641 8.46452 15.5356 C9.63609 16.7072 11.5356 16.7072 12.7072 15.5356 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledThermometer = styled.i` 5 & { 6 position: relative;7 display: block;8 transform: scale(var(--ggs, 1 ));9 width: 22px ;10 height: 22px ;11 } 12 &::after , 13 &::before { 14 content: '';15 display: block;16 position: absolute;17 width: 2px ;18 border-radius: 22px ;19 transform: rotate(45deg );20 } 21 &::before { 22 height: 12px ;23 border: 2px solid transparent;24 box-shadow: 0 0 0 2px , inset 0 0 0 6px ;25 right: 6px ;26 top: 1px ;27 } 28 &::after { 29 height: 8px ;30 background: currentColor;31 bottom: 0 ;32 left: 3px ;33 } 34 ` 35 36 export const Thermometer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledThermometer { ...props} ref={ ref} icon-role="thermometer" /> 41 </> 42 ) 43 } , 44 ) 45
Thermometer turned into a wonderful pure CSS icon created by using properties as follows: transform, width, height, border-radius, border, box-shadow, background,
