Thermostat devices
1 .gg-thermostat { 2 position: relative;
3 display: block;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 24px 8 } 9 10 .gg-thermostat::after ,
11 .gg-thermostat::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 border: 2px solid
17 } 18 19 .gg-thermostat::after { 20 width: 12px ;
21 height: 12px ;
22 border-top-color: transparent;
23 bottom: 0 ;
24 border-radius: 100px ;
25 background:
26 radial-gradient(
27 circle,
28 currentColor 20% ,
29 transparent 20% 30 ) no-repeat center
31 } 32 33 .gg-thermostat::before { 34 width: 8px ;
35 height: 16px ;
36 border-bottom-color: transparent;
37 left: 2px ;
38 border-top-left-radius: 100px ;
39 border-top-right-radius: 100px 40 }
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="M12 19 C12.5523 19 13 18.5523 13 18 C13 17.4477 12.5523 17 12 17 C11.4477 17 11 17.4477 11 18 C11 18.5523 11.4477 19 12 19 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M15 13.9997 C16.2144 14.9119 17 16.3642 17 18 C17 20.7614 14.7614 23 12 23 C9.23858 23 7 20.7614 7 18 C7 16.3642 7.78555 14.9119 9 13.9997 V4 C9 2.34315 10.3431 1 12 1 C13.6569 1 15 2.34315 15 4 V13.9997 ZM13 4 V15.1707 C14.1652 15.5826 15 16.6938 15 18 C15 19.6569 13.6569 21 12 21 C10.3431 21 9 19.6569 9 18 C9 16.6938 9.83481 15.5826 11 15.1707 V4 C11 3.44772 11.4477 3 12 3 C12.5523 3 13 3.44772 13 4 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledThermostat = styled.i` 5 & { 6 position: relative;7 display: block;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 24px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 border: 2px solid;20 } 21 &::after { 22 width: 12px ;23 height: 12px ;24 border-top-color: transparent;25 bottom: 0 ;26 border-radius: 100px ;27 background: radial-gradient(circle, currentColor 20% , transparent 20% ) no-repeat center;28 } 29 &::before { 30 width: 8px ;31 height: 16px ;32 border-bottom-color: transparent;33 left: 2px ;34 border-top-left-radius: 100px ;35 border-top-right-radius: 100px ;36 } 37 ` 38 39 export const Thermostat = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledThermostat { ...props} ref={ ref} icon-role="thermostat" /> 44 </> 45 ) 46 } , 47 ) 48
Thermostat turned into a 100% CSS icon built by adopting attributes such as: transform, width, height, border, border-top-color, border-radius, background, border-bottom-color,
