Smart Home Cooker interface
1 .gg-smart-home-cooker { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px ;
8 border: 2px solid;
9 border-radius: 4px ;
10 background:
11 linear-gradient(
12 to left,
13 currentColor 18px ,
14 transparent 0 15 ) no-repeat center 2px /18px 2px 16 } 17 18 .gg-smart-home-cooker::after ,
19 .gg-smart-home-cooker::before { 20 content: "";
21 position: absolute;
22 display: block;
23 box-sizing: border-box;
24 width: 6px ;
25 left: 4px 26 } 27 28 .gg-smart-home-cooker::before { 29 height: 6px ;
30 border: 2px solid;
31 border-radius: 4px ;
32 bottom: 2px 33 } 34 35 .gg-smart-home-cooker::after { 36 height: 3px ;
37 box-shadow: 0 -2px 0 ,inset 0 0 0 2px ;
38 border-left: 2px solid transparent;
39 border-right: 2px solid transparent;
40 top: -4px 41 }
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="M15 16 C15 17.6569 13.6569 19 12 19 C10.3431 19 9 17.6569 9 16 C9 14.3431 10.3431 13 12 13 C13.6569 13 15 14.3431 15 16 ZM13 16 C13 16.5523 12.5523 17 12 17 C11.4477 17 11 16.5523 11 16 C11 15.4477 11.4477 15 12 15 C12.5523 15 13 15.4477 13 16 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M15 1 H9 V3 H11 V5 H7 C4.79086 5 3 6.79086 3 9 V19 C3 21.2091 4.79086 23 7 23 H17 C19.2091 23 21 21.2091 21 19 V9 C21 6.79086 19.2091 5 17 5 H13 V3 H15 V1 ZM17 7 H7 C5.89543 7 5 7.89543 5 9 H19 C19 7.89543 18.1046 7 17 7 ZM19 11 H5 V19 C5 20.1046 5.89543 21 7 21 H17 C18.1046 21 19 20.1046 19 19 V11 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartHomeCooker = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 18px ;12 border: 2px solid;13 border-radius: 4px ;14 background: linear-gradient(to left, currentColor 18px , transparent 0 ) no-repeat center 2px /18px 15 2px ; 16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 display: block;22 box-sizing: border-box;23 width: 6px ;24 left: 4px ;25 } 26 &::before { 27 height: 6px ;28 border: 2px solid;29 border-radius: 4px ;30 bottom: 2px ;31 } 32 &::after { 33 height: 3px ;34 box-shadow: 0 -2px 0 , inset 0 0 0 2px ;35 border-left: 2px solid transparent;36 border-right: 2px solid transparent;37 top: -4px ;38 } 39 ` 40 41 export const SmartHomeCooker = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledSmartHomeCooker { ...props} ref={ ref} icon-role="smart-home-cooker" /> 46 </> 47 ) 48 } , 49 ) 50
Smart Home Cooker developed into a wonderful pure CSS icon built by using properties such as: transform, width, height, border, border-radius, background, box-shadow, border-left, border-right,
