Smart Home Boiler interface
1 .gg-smart-home-boiler { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 20px ;
8 border: 2px solid;
9 border-radius: 2px ;
10 border-top-left-radius: 4px ;
11 border-top-right-radius: 4px ;
12 background:
13 linear-gradient(
14 to left,
15 currentColor 14px ,
16 transparent 0 17 )
18 no-repeat center 4px /14px 2px 19 } 20 21 .gg-smart-home-boiler::before { 22 content: "";
23 position: absolute;
24 display: block;
25 box-sizing: border-box;
26 width: 6px ;
27 height: 3px ;
28 border-left: 2px solid;
29 border-right: 2px solid;
30 transform: skewX(20deg );
31 bottom: -4px ;
32 left: 2px 33 }
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="M5 5 C5 2.79086 6.79086 1 9 1 H15 C17.2091 1 19 2.79086 19 5 V21 H15.144 L15.8865 22.9999 H13.8865 L13.144 21 H11.144 L11.8865 22.9999 H9.88653 L9.14397 21 H5 V5 ZM9 3 H15 C16.1046 3 17 3.89543 17 5 V7 H7 V5 C7 3.89543 7.89543 3 9 3 ZM7 9 H17 V19 H7 V9 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartHomeBoiler = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 20px ;12 border: 2px solid;13 border-radius: 2px ;14 border-top-left-radius: 4px ;15 border-top-right-radius: 4px ;16 background: linear-gradient(to left, currentColor 14px , transparent 0 ) no-repeat center 4px /14px 17 2px ; 18 } 19 &::before { 20 content: '';21 position: absolute;22 display: block;23 box-sizing: border-box;24 width: 6px ;25 height: 3px ;26 border-left: 2px solid;27 border-right: 2px solid;28 transform: skewX(20deg );29 bottom: -4px ;30 left: 2px ;31 } 32 ` 33 34 export const SmartHomeBoiler = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 35 (props, ref) => { 36 return ( 37 <> 38 <StyledSmartHomeBoiler { ...props} ref={ ref} icon-role="smart-home-boiler" /> 39 </> 40 ) 41 } , 42 ) 43
Smart Home Boiler ended up a magic CSS icon made by practicing properties such as: transform, width, height, border, border-radius, background, border-left, border-right,
