Smart Home Heat
Views
Downloads - API calls
42 Lines - 912 Bytes
Apr 23, 2020 interface
1 .gg-smart-home-heat { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 24px ;
7 height: 14px ;
8 border: 2px solid;
9 border-radius: 22px ;
10 background:
11 linear-gradient(
12 to left,
13 currentColor 24px ,
14 transparent 0 15 ) no-repeat center 2px /10px 2px 16 } 17 18 .gg-smart-home-heat::after ,
19 .gg-smart-home-heat::before { 20 content: "";
21 position: absolute;
22 display: block;
23 box-sizing: border-box;
24 width: 6px ;
25 height: 6px ;
26 border: 2px solid;
27 top: 2px 28 } 29 30 .gg-smart-home-heat::before { 31 border-right: 0 ;
32 border-top-left-radius: 22px ;
33 border-bottom-left-radius: 22px ;
34 left: 2px 35 } 36 37 .gg-smart-home-heat::after { 38 border-left: 0 ;
39 border-top-right-radius: 22px ;
40 border-bottom-right-radius: 22px ;
41 right: 2px 42 }
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="M17 11 H7 C6.44772 11 6 11.4477 6 12 C6 12.5523 6.44772 13 7 13 H10 V15 H7 C5.34315 15 4 13.6569 4 12 C4 10.3431 5.34315 9 7 9 H17 C18.6569 9 20 10.3431 20 12 C20 13.6569 18.6569 15 17 15 H14 V13 H17 C17.5523 13 18 12.5523 18 12 C18 11.4477 17.5523 11 17 11 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M0 12 C0 8.13401 3.13401 5 7 5 H17 C20.866 5 24 8.13401 24 12 C24 15.866 20.866 19 17 19 H7 C3.13401 19 0 15.866 0 12 ZM7 7 H17 C19.7614 7 22 9.23858 22 12 C22 14.7614 19.7614 17 17 17 H7 C4.23858 17 2 14.7614 2 12 C2 9.23858 4.23858 7 7 7 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartHomeHeat = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 24px ;11 height: 14px ;12 border: 2px solid;13 border-radius: 22px ;14 background: linear-gradient(to left, currentColor 24px , transparent 0 ) no-repeat center 2px /10px 15 2px ; 16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 display: block;22 box-sizing: border-box;23 width: 6px ;24 height: 6px ;25 border: 2px solid;26 top: 2px ;27 } 28 &::before { 29 border-right: 0 ;30 border-top-left-radius: 22px ;31 border-bottom-left-radius: 22px ;32 left: 2px ;33 } 34 &::after { 35 border-left: 0 ;36 border-top-right-radius: 22px ;37 border-bottom-right-radius: 22px ;38 right: 2px ;39 } 40 ` 41 42 export const SmartHomeHeat = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledSmartHomeHeat { ...props} ref={ ref} icon-role="smart-home-heat" /> 47 </> 48 ) 49 } , 50 ) 51
Smart Home Heat became a wonderful CSS icon built by applying attributes such as: transform, width, height, border, border-radius, background, Some stats, it has: 42 Lines of code at 912b & 650b minified. Truly wonderful 🤗 don't you think ?.